开发者社区> 科技小能手> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

ExtJS表格示例

简介:
+关注继续查看

  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. <!-- 是个策略 表示页面加载完成后开始执行 --> 
  13. <script type="text/javascript"> 
  14.     Ext.BLANK_IMAGE_URL = 'ext-3.1.0/resources/images/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-image: url(images/icon/add.gif) !important; 
  32.             } 
  33.              
  34.             .update { 
  35.                 background-image: url(images/icon/update.gif) !important; 
  36.             } 
  37.              
  38.             .delete { 
  39.                 background-image: url(images/icon/delete.gif) !important; 
  40.             } 
  41.             .assign {  
  42.                 background-image: url(images/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/images/default/menu/checked.gif);   
  49.             }   
  50.             .ux-combo-selectall-icon-unchecked {     
  51.                 background: transparent url(ext-3.1.0/resources/images/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/images/default/menu/checked.gif);  
  73.             } 
  74.             .ux-lovcombo-icon-unchecked { 
  75.             background: transparent url(ext-3.1.0/resources/images/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';//统一指定错误信息提示方式 
  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解析的数据 
  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 : '镇江',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,   //设置每列最小宽度 
  157.                     cm : cm,                //设置列 
  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 : '正在加载数据,请稍侯……'} 
  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> 

 

后台:

 


  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); 

 

 

 

本文转自 梦朝思夕 51CTO博客,原文链接:http://blog.51cto.com/qiangmzsx/1175064



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
一文搞懂HTML中的表格、表单、列表
一文搞懂HTML中的表格、表单、列表
0 0
ExtJS学习(四)EditorGrid可编辑表格
操作表格有一种需求,要操作表格需要动态的添加内容,删除内容以及双击的时候进入编辑状态。这个时候怎么办呢,看具体的实现吧。
893 0
01_MUI之Boilerplate中:HTML5示例,动态组件,自定义字体示例,自定义字体示例,图标字体示例
 1安装HBuilder5.0.0,安装后的界面截图如下: 2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上图的Boilerplate.html: 3 代码内容如下: <!--          作者:XXX@qq.com          时间:2015-08-02
1156 0
HTML基础7--表格表单
表格--默认样式重置 表单、表单元素 轮廓线、表单元素兼容性问题
400 0
支持10种格式的 HTML 表格导出 jQuery 插件
  HTML 表格导出 jQuery 插件可以帮助用户导出 HTML 表格到 JSON、XML、PNG、CSV、TXT、SQL、MS-Word、MS-Excel、MS-PowerPoint 和 PDF 格式。
619 0
extjs 配置与表格使用
引用 :http://www.jb51.net/article/20027.htm http://wenku.baidu.com/view/226ce70cba1aa8114431d9bf.html 中文网站:http://extjs.
988 0
JQuery操作一个表格简单示例
jquery操作table的一个简单示例,仅做参考,具体可以根据原javascript操作table的操作更改为jquery操作方式。 .mainTable{ background-color:#ffcc00; width:85%; margin:auto; font-size:12px} .
593 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载