溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

ExtJS表格示例

發(fā)布時間：2020-07-17 23:42:03 來源：網(wǎng)絡(luò) 閱讀：456 作者：夢朝思夕 欄目：web開發(fā) 
  1. <link rel="stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css"/> 
  2. <script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js"></script> 
  3. <script type="text/javascript" src="ext-3.1.0/ext-all-debug.js"></script> 
  4. <script type="text/javascript" src="js/overLoad.js"></script> 
  5. <script type="text/javascript" src="ext-3.1.0/ext-lang-zh_CN-min.js"></script>  
  6.  
  7. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> 
  8. <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE8″ /> 
  9. <meta http-equiv="Cache-Control" content="no-store"/> 
  10. <meta http-equiv="Pragma" content="no-cache"/> 
  11. <meta http-equiv="Expires" content="0"/> 
  12. <!-- 是個策略 表示頁面加載完成后開始執(zhí)行 --> 
  13. <script type="text/javascript"> 
  14.     Ext.BLANK_IMAGE_URL = 'ext-3.1.0/resources/p_w_picpaths/default/s.gif'; 
  15. </script> 
  16. <!--繼承了項目中要用到的所有外部文件信息--> 
  17.  
  18.  
  19.  
  20. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  21. <html> 
  22.     <head> 
  23.         <title></title> 
  24.         <STYLE TYPE="text/css"> 
  25.             #content { 
  26.                 width: 100%; 
  27.                 height: 100%; 
  28.             } 
  29.              
  30.             .add { 
  31.                 background-p_w_picpath: url(p_w_picpaths/icon/add.gif) !important; 
  32.             } 
  33.              
  34.             .update { 
  35.                 background-p_w_picpath: url(p_w_picpaths/icon/update.gif) !important; 
  36.             } 
  37.              
  38.             .delete { 
  39.                 background-p_w_picpath: url(p_w_picpaths/icon/delete.gif) !important; 
  40.             } 
  41.             .assign {  
  42.                 background-p_w_picpath: url(p_w_picpaths/icon/list-items.gif) !important;  
  43.             } 
  44.             .ux-combo-selectall{   
  45.                 padding:3px;   
  46.             }   
  47.             .ux-combo-selectall-icon-checked{   
  48.                 background: transparent url(ext-3.1.0/resources/p_w_picpaths/default/menu/checked.gif);   
  49.             }   
  50.             .ux-combo-selectall-icon-unchecked {     
  51.                 background: transparent url(ext-3.1.0/resources/p_w_picpaths/default/menu/unchecked.gif);     
  52.             }   
  53.             .ux-combo-selectall-icon {   
  54.                 text-indent:1.8em;   
  55.                 background-position: 3px 2px ! important;     
  56.                 background-repeat:no-repeat ! important;     
  57.                 height:22px;   
  58.                 line-height:20px;   
  59.                 font-size:12px;   
  60.                 font-weight:bold;   
  61.                 -moz-user-select:none;   
  62.             } 
  63.              
  64.             .ux-lovcombo-icon { 
  65.             width:16px; 
  66.             height:16px; 
  67.             float:left; 
  68.             background-position: -1px -1px ! important; 
  69.             background-repeat:no-repeat ! important; 
  70.             } 
  71.             .ux-lovcombo-icon-checked { 
  72.             background: transparent url(ext-3.1.0/resources/p_w_picpaths/default/menu/checked.gif);  
  73.             } 
  74.             .ux-lovcombo-icon-unchecked { 
  75.             background: transparent url(ext-3.1.0/resources/p_w_picpaths/default/menu/unchecked.gif); 
  76.             } 
  77.             /* IE patch */ 
  78.             .ext-ie .ux-lovcombo-item-text { 
  79.             position:absolute; 
  80.             left:16px; 
  81.             top:3px; 
  82.             } 
  83.             .ext-ie .ux-lovcombo-icon { 
  84.             float:none; 
  85.             } 
  86.             .ext-ie .x-combo-list-item { 
  87.             position:relative; 
  88.             }    
  89.         </STYLE> 
  90.         <script type="text/javascript" src="js/Ext.ux.form.LovCombo.js"></script> 
  91.         <script type="text/javascript"><!-- 
  92.             var grid; 
  93.             var menuForm; 
  94.             var win; 
  95.             var appPvWin; 
  96.             var columnPvWin; 
  97.             var appPvStore; 
  98.              
  99.             Ext.onReady(function(){ 
  100.                 Ext.QuickTips.init(); 
  101.                 Ext.form.Field.prototype.msgTarget = 'qtip';//統(tǒng)一指定錯誤信息提示方式 
  102.              
  103.                 var menuRecord=Ext.data.Record.create([ 
  104.                                                     {name:'nt'}, 
  105.                                                     {name:'yc'}, 
  106.                                                     {name:'sq'}, 
  107.                                                     {name:'cz'}, 
  108.                                                     {name:'xz'}, 
  109.                                                     {name:'yz'}, 
  110.                                                     {name:'lyg'}, 
  111.                                                     {name:'ha'}, 
  112.                                                     {name:'wx'}, 
  113.                                                     {name:'tz'}, 
  114.                                                     {name:'nj'}, 
  115.                                                     {name:'zj'}, 
  116.                                                     {name:'sz'} 
  117.                                                 ]); 
  118.                  
  119.                 var creader = new Ext.data.JsonReader({ root : "date"}, menuRecord); 
  120.                  
  121.                 var store = new Ext.data.Store({ 
  122.                     //autoLoad : {params : {start : 0,limit : 15}},//自動加載 
  123.                     autoLoad : false, 
  124.                     reader :creader , 
  125.                     proxy : new Ext.data.HttpProxy({//獲得交給DataReader解析的數(shù)據(jù) 
  126.                         url : 'statistiweb.sp?method=getInstallSiteByArea', 
  127.                         method : 'POST' 
  128.                     }) 
  129.                 }); 
  130.                  
  131.                 //表格grid的列 
  132.                 var cm = new Ext.grid.ColumnModel([ 
  133.                     new Ext.grid.CheckboxSelectionModel(),  
  134.                     { header : '南京',dataIndex: 'nj', sortable:false}, 
  135.                     { header : '蘇州',dataIndex: 'sz', sortable:false}, 
  136.                     { header : '無錫',dataIndex: 'wx', sortable:false }, 
  137.                     { header : '常州',dataIndex: 'cz', sortable:false }, 
  138.                     { header : '鎮(zhèn)江',dataIndex: 'zj', sortable:false }, 
  139.                     { header : '揚州',dataIndex: 'yz', sortable:false}, 
  140.                     { header : '南通',dataIndex: 'nt', sortable:false}, 
  141.                     { header : '泰州',dataIndex: 'tz', sortable :false}, 
  142.                     { header : '徐州',dataIndex: 'xz', sortable:false }, 
  143.                     { header : '淮安',dataIndex: 'ha', sortable:false}, 
  144.                     { header : '鹽城',dataIndex: 'yc', sortable:false}, 
  145.                     { header : '連云港',dataIndex: 'lyg', sortable:false}, 
  146.                     { header : '宿遷',dataIndex: 'sq', sortable:false} 
  147.                      
  148.                 ]); 
  149.                 //表格面板 
  150.                 grid = new Ext.grid.GridPanel({ 
  151.                     region : 'center', 
  152.                     margins: '3 3 3 3', 
  153.                     autoWidth:true, 
  154.                     frame : false, 
  155.                     store : store, 
  156.                     minColumnWidth : 100,   //設(shè)置每列最小寬度 
  157.                     cm : cm,                //設(shè)置列 
  158.                     sm : new Ext.grid.RowSelectionModel({ singleSelect : true }), 
  159.                     viewConfig : { autoFit : true }, 
  160.                     width : Ext.get("content").getWidth(), 
  161.                     height : Ext.get("content").getHeight(), 
  162.                     loadMask : {msg : '正在加載數(shù)據(jù)，請稍侯……'} 
  163.                 }); 
  164.                  
  165.                 var panel = new Ext.Panel({ 
  166.                     title : '各地市裝機量', 
  167.                     layout : 'border', 
  168.                     border : true, 
  169.                     width : Ext.get("content").getWidth(), 
  170.                     height : Ext.get("content").getHeight(), 
  171.                     applyTo : 'panel-div', 
  172.                     items : [grid], 
  173.                     buttons:[new Ext.Button({ 
  174.                                  
  175.                                 text : '查詢', 
  176.                                 handler : query 
  177.                             })] 
  178.                     //items : [form,grid] 
  179.                 }); 
  180.  
  181.             function query() { 
  182.                 grid.getStore().reload({params : { 
  183.                                                  //startDate : startDate, 
  184.                                                  //endDate : endDate 
  185.                                             }}); 
  186.             } 
  187.  
  188.              
  189.  
  190.             });// End of Ext.onReady 
  191.  
  192.  
  193.     --></script> 
  194.     </head> 
  195.     <body> 
  196.         <div id="content"> 
  197.             <div id='panel-div'></div> 
  198.         </div> 
  199.     </body> 
  200. </html> 

 

ExtJS表格示例

后臺：

 

  1. /**計算裝機量（分地市）**/ 
  2. //http://localhost:8080/smartjsmgr/statistiweb.sp?method=getInstallSiteByArea 
  3. @RequestMapping(params = "method=getInstallSiteByArea", method = RequestMethod.POST) 
  4. public ModelAndView getInstallSiteByArea(HttpServletRequest request,HttpServletResponse response){ 
  5.     Map<String,Object> map = new HashMap<String,Object>(); 
  6.     List<Statistiweb> list=new ArrayList<Statistiweb>(); 
  7.     try { 
  8.         list=statistiwebService.getInstallSiteByArea(); 
  9.         if (list.size()>0) { 
  10.             map.put("date", list); 
  11.             map.put("success", "true"); 
  12.         }else{ 
  13.             map.put("success", "false"); 
  14.         } 
  15.     } catch (Exception e) { 
  16.         // TODO: handle exception 
  17.         e.printStackTrace(); 
  18.         logger.error("查詢計算裝機量（分地市）失?。。?！"); 
  19.     } 
  20.     return new ModelAndView("jsonView",map); 
  21. } 

 

 

 

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手