ExtJS表格示例

发布时间：2020-07-17 23:42:03 来源：网络阅读：456 作者：梦朝思夕栏目：web开发

<link rel="stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css"/> 
<script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="ext-3.1.0/ext-all-debug.js"></script> 
<script type="text/javascript" src="js/overLoad.js"></script> 
<script type="text/javascript" src="ext-3.1.0/ext-lang-zh_CN-min.js"></script>  
 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> 
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE8″ /> 
<meta http-equiv="Cache-Control" content="no-store"/> 
<meta http-equiv="Pragma" content="no-cache"/> 
<meta http-equiv="Expires" content="0"/> 
<!-- 是个策略 表示页面加载完成后开始执行 --> 
<script type="text/javascript"> 
    Ext.BLANK_IMAGE_URL = 'ext-3.1.0/resources/p_w_picpaths/default/s.gif'; 
</script> 
<!--继承了项目中要用到的所有外部文件信息--> 
 
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
        <title></title> 
        <STYLE TYPE="text/css"> 
            #content { 
                width: 100%; 
                height: 100%; 
            } 
             
            .add { 
                background-p_w_picpath: url(p_w_picpaths/icon/add.gif) !important; 
            } 
             
            .update { 
                background-p_w_picpath: url(p_w_picpaths/icon/update.gif) !important; 
            } 
             
            .delete { 
                background-p_w_picpath: url(p_w_picpaths/icon/delete.gif) !important; 
            } 
            .assign {  
                background-p_w_picpath: url(p_w_picpaths/icon/list-items.gif) !important;  
            } 
            .ux-combo-selectall{   
                padding:3px;   
            }   
            .ux-combo-selectall-icon-checked{   
                background: transparent url(ext-3.1.0/resources/p_w_picpaths/default/menu/checked.gif);   
            }   
            .ux-combo-selectall-icon-unchecked {     
                background: transparent url(ext-3.1.0/resources/p_w_picpaths/default/menu/unchecked.gif);     
            }   
            .ux-combo-selectall-icon {   
                text-indent:1.8em;   
                background-position: 3px 2px ! important;     
                background-repeat:no-repeat ! important;     
                height:22px;   
                line-height:20px;   
                font-size:12px;   
                font-weight:bold;   
                -moz-user-select:none;   
            } 
             
            .ux-lovcombo-icon { 
            width:16px; 
            height:16px; 
            float:left; 
            background-position: -1px -1px ! important; 
            background-repeat:no-repeat ! important; 
            } 
            .ux-lovcombo-icon-checked { 
            background: transparent url(ext-3.1.0/resources/p_w_picpaths/default/menu/checked.gif);  
            } 
            .ux-lovcombo-icon-unchecked { 
            background: transparent url(ext-3.1.0/resources/p_w_picpaths/default/menu/unchecked.gif); 
            } 
            /* IE patch */ 
            .ext-ie .ux-lovcombo-item-text { 
            position:absolute; 
            left:16px; 
            top:3px; 
            } 
            .ext-ie .ux-lovcombo-icon { 
            float:none; 
            } 
            .ext-ie .x-combo-list-item { 
            position:relative; 
            }    
        </STYLE> 
        <script type="text/javascript" src="js/Ext.ux.form.LovCombo.js"></script> 
        <script type="text/javascript"><!-- 
            var grid; 
            var menuForm; 
            var win; 
            var appPvWin; 
            var columnPvWin; 
            var appPvStore; 
             
            Ext.onReady(function(){ 
                Ext.QuickTips.init(); 
                Ext.form.Field.prototype.msgTarget = 'qtip';//统一指定错误信息提示方式 
             
                var menuRecord=Ext.data.Record.create([ 
                                                    {name:'nt'}, 
                                                    {name:'yc'}, 
                                                    {name:'sq'}, 
                                                    {name:'cz'}, 
                                                    {name:'xz'}, 
                                                    {name:'yz'}, 
                                                    {name:'lyg'}, 
                                                    {name:'ha'}, 
                                                    {name:'wx'}, 
                                                    {name:'tz'}, 
                                                    {name:'nj'}, 
                                                    {name:'zj'}, 
                                                    {name:'sz'} 
                                                ]); 
                 
                var creader = new Ext.data.JsonReader({ root : "date"}, menuRecord); 
                 
                var store = new Ext.data.Store({ 
                    //autoLoad : {params : {start : 0,limit : 15}},//自动加载 
                    autoLoad : false, 
                    reader :creader , 
                    proxy : new Ext.data.HttpProxy({//获得交给DataReader解析的数据 
                        url : 'statistiweb.sp?method=getInstallSiteByArea', 
                        method : 'POST' 
                    }) 
                }); 
                 
                //表格grid的列 
                var cm = new Ext.grid.ColumnModel([ 
                    new Ext.grid.CheckboxSelectionModel(),  
                    { header : '南京',dataIndex: 'nj', sortable:false}, 
                    { header : '苏州',dataIndex: 'sz', sortable:false}, 
                    { header : '无锡',dataIndex: 'wx', sortable:false }, 
                    { header : '常州',dataIndex: 'cz', sortable:false }, 
                    { header : '镇江',dataIndex: 'zj', sortable:false }, 
                    { header : '扬州',dataIndex: 'yz', sortable:false}, 
                    { header : '南通',dataIndex: 'nt', sortable:false}, 
                    { header : '泰州',dataIndex: 'tz', sortable :false}, 
                    { header : '徐州',dataIndex: 'xz', sortable:false }, 
                    { header : '淮安',dataIndex: 'ha', sortable:false}, 
                    { header : '盐城',dataIndex: 'yc', sortable:false}, 
                    { header : '连云港',dataIndex: 'lyg', sortable:false}, 
                    { header : '宿迁',dataIndex: 'sq', sortable:false} 
                     
                ]); 
                //表格面板 
                grid = new Ext.grid.GridPanel({ 
                    region : 'center', 
                    margins: '3 3 3 3', 
                    autoWidth:true, 
                    frame : false, 
                    store : store, 
                    minColumnWidth : 100,   //设置每列最小宽度 
                    cm : cm,                //设置列 
                    sm : new Ext.grid.RowSelectionModel({ singleSelect : true }), 
                    viewConfig : { autoFit : true }, 
                    width : Ext.get("content").getWidth(), 
                    height : Ext.get("content").getHeight(), 
                    loadMask : {msg : '正在加载数据，请稍侯……'} 
                }); 
                 
                var panel = new Ext.Panel({ 
                    title : '各地市装机量', 
                    layout : 'border', 
                    border : true, 
                    width : Ext.get("content").getWidth(), 
                    height : Ext.get("content").getHeight(), 
                    applyTo : 'panel-div', 
                    items : [grid], 
                    buttons:[new Ext.Button({ 
                                 
                                text : '查询', 
                                handler : query 
                            })] 
                    //items : [form,grid] 
                }); 
 
            function query() { 
                grid.getStore().reload({params : { 
                                                 //startDate : startDate, 
                                                 //endDate : endDate 
                                            }}); 
            } 
 
             
 
            });// End of Ext.onReady 
 
 
    --></script> 
    </head> 
    <body> 
        <div id="content"> 
            <div id='panel-div'></div> 
        </div> 
    </body> 
</html>

ExtJS表格示例

后台：

/**计算装机量（分地市）**/ 
//http://localhost:8080/smartjsmgr/statistiweb.sp?method=getInstallSiteByArea 
@RequestMapping(params = "method=getInstallSiteByArea", method = RequestMethod.POST) 
public ModelAndView getInstallSiteByArea(HttpServletRequest request,HttpServletResponse response){ 
    Map<String,Object> map = new HashMap<String,Object>(); 
    List<Statistiweb> list=new ArrayList<Statistiweb>(); 
    try { 
        list=statistiwebService.getInstallSiteByArea(); 
        if (list.size()>0) { 
            map.put("date", list); 
            map.put("success", "true"); 
        }else{ 
            map.put("success", "false"); 
        } 
    } catch (Exception e) { 
        // TODO: handle exception 
        e.printStackTrace(); 
        logger.error("查询计算装机量（分地市）失败！！！"); 
    } 
    return new ModelAndView("jsonView",map); 
}

向AI问一下细节

ExtJS表格示例

猜你喜欢

最新资讯

相关推荐

相关标签