Ext3.4 表格基本操作

//
1
var store=new Ext.data.Store({ 2 storeId : 'mainGridStore', 3 reader:new Ext.data.JsonReader(), 4 autoLoad:{params:{start:0,limit:20,orgTypeFlag:orgType}}, 5 pageSize:20, 6 proxy:new Ext.data.HttpProxy({ 7 url:getPath()+'/UPCatalogManageServlet.json?fillDataIntoGrid=true', 8 type:'ajax' 9 }), 10 listeners:{ 11 "beforeload":function(store){ 12 store.baseParams={ 13 orgTypeFlag:orgType 14 } 15 } 16 } 17 }); 18 19 /* var bottombar = new Ext.PagingToolbar({ 20 pageSize : 20, 21 store:store, 22 displayInfo: true, 23 displayMsg: '显示第 {0} - {1}条 共 {2} 条数据', 24 emptyMsg: "没有任何数据", 25 beforePageText:"第", 26 afterPageText:"/ {0}页", 27 firstText:"首页", 28 prevText:"上一页", 29 nextText:"下一页", 30 lastText:"尾页", 31 refreshText:"刷新", 32 items:[ 33 '-', { 34 text: '生成Excel', 35 handler : function() { 36 alert('生成excel,未做'); 37 // exportExcel(formx); 38 } 39 }] 40 }); */ 41 42 bottombar = new Ext.ux.PagingToolbar({ 43 pageSize : 20, 44 store : store, 45 displayInfo : true, 46 displayMsg : '显示第 {0} 条到 {1} 条记录,一共 {2} 条', 47 emptyMsg : "没有记录", 48 items : [ '-', { 49 text : '<font style="color:blue">生成EXCEL</font>', 50 handler : function(){ 51 var catalogName = ''; 52 var launchDept =''; 53 var status = Ext.getCmp('idMainPublishState').getValue(); 54 if(hasClickedQuery){ //点击查询 55 catalogName = Ext.getCmp('idCatalogName').getValue(); 56 launchDept = Ext.getCmp('idMainLaunchDept').getValue(); 57 } 58 59 var form = $("<form>"); //定义一个form表单 60 form.attr('style', 'display:none'); //在form表单中添加查询参数 61 form.attr('target', ''); 62 form.attr('method', 'post'); 63 form.attr('action', getPath() + '/UPCatalogManageServlet.json?exportExcel=true'); 64 65 var input1 = $('<input type="hidden" name="catalogName" value="'+catalogName+'" />'); 66 var input2 = $('<input type="hidden" name="launchDept" value="'+launchDept+'" />'); 67 var input3 = $('<input type="hidden" name="status" value="'+status+'" />'); 68 69 $('body').append(form); //将表单放置在web中 70 form.append(input1); //将查询参数控件提交到表单上 71 form.append(input2); //将查询参数控件提交到表单上 72 form.append(input3); //将查询参数控件提交到表单上 73 form.submit().remove(); 74 // if(isExcel=='1'){ 75 // exportExcel(1,formx); 76 // }else{ 77 // Ext.Msg.alert('提示','您没有权限导出数据!'); 78 // } 79 } 80 } ] 81 }); 82 83 var grid=new Ext.grid.GridPanel({ 84 // title:'表格数据分页', 85 id:'idMainWinGrid', 86 renderTo : 'grid', 87 margins : '175 10 0 10',// 下右上左 88 region : 'center', 89 viewConfig : { 90 forceFit : true 91 }, 92 layout : 'fit', 93 // frame:true, 94 bbar:bottombar, 95 store:store, 96 loadMask : true, 97 bodyStyle : '90%', 98 autoWidth : true, 99 viewConfig : { 100 forceFit : true 101 }, 102 columns:[ 103 new Ext.grid.RowNumberer({ 104 header : '序号', 105 width : 50, 106 dataIndex : 'no' 107 }), 108 {header:'pk',50,dataIndex:'pk',hidden:true,hideable:false}, 109 {header:'联合惩戒目录名称',dataIndex:'catalogName',sortable:true,renderer:function(data, cell, record, rowIndex, columnIndex, store){ 110 return "<a style='color:blue;cursor:pointer' onclick='showItem()'>"+data+"</a>"; 111 }}, 112 {header:'信息发起部门',80,dataIndex:'launchDept',sortable:true}, 113 {header:'联合执行部门',80,dataIndex:'executeDept',sortable:true}, 114 {header:'惩戒期限',60,dataIndex:'punishExpire',sortable:true,renderer:function(data, cell, record, rowIndex, columnIndex, store){ 115 if(data=='null') return ''; 116 else return data; 117 }}, 118 {header:'状态',30,dataIndex:'status',sortable:true,renderer:function(data, cell, record, rowIndex, columnIndex, store){ 119 // cell.attr = "style=background-color:#F5C0C0"; //设置单元格的背景色 120 if(data == 'D') 121 return '待发布'; 122 if(data == 'A') 123 return '已发布'; 124 if(data == 'Y') 125 return '已撤销'; 126 }}, 127 // {header:'state',80,dataIndex:'state',sortable:true,hidden:true,hideable:false}, 128 { 129 header : '操作', 130 dataIndex : 'operate', 131 sortable : true, 132 width : 80, 133 align : 'center', 134 renderer: function(value, a, record, rowIndex) { 135 var html_; 136 if(record['data']['status']=='D' || record['data']['status']=='Y'){ 137 html_="<a style='color:blue;cursor:pointer' onclick='modify()'><U>修改</U></a>&nbsp&nbsp" 138 +"<a style='color:blue;cursor:pointer' onclick='publish()'><U>发布</U></a>&nbsp&nbsp" 139 +"<a style='color:grey;'><U>撤销</U></a>"; 140 }else{ 141 html_="<a style='color:grey;'><U>修改</U></a>&nbsp&nbsp" 142 +"<a style='color:grey;'><U>发布</U></a>&nbsp&nbsp" 143 +"<a style='color:blue;cursor:pointer' onclick='recede(this)'><U>撤销</U></a>"; 144 } 145 var html = html_; 146 return html; 147 } 148 } 149 ] 150 }); 151 152 new Ext.Viewport({ 153 // style : 'background-color:#E5F1F1',//设置背景色 154 layout : 'border', 155 items : [ grid ] 156 });
    • 后台处理,包括查询的多种情况:表格初始化、有条件查询、翻页查询
 1 @ResponseBody
 2     @RequestMapping(params = "fillDataIntoGrid")
 3     public void fillDataIntoGrid(HttpServletRequest request, HttpServletResponse response){
 4         List<Object> list = new ArrayList<Object>();
 5         Enumeration enumeraion = request.getParameterNames();
 6         Map<String,String[]>  map = request.getParameterMap();
 7         while(enumeraion.hasMoreElements())
 8             System.out.println(enumeraion.nextElement());
 9         
10         
11         int start = Integer.parseInt(Util.strNewFiltrate(request.getParameter("start")));
12         int limit = Integer.parseInt(Util.strNewFiltrate(request.getParameter("limit")));
13         String orgTypeFlag = Util.strNewFiltrate(request.getParameter("orgTypeFlag"));            //区分是工商用户还是非工商用户
14         String catalogName = Util.strNewFiltrate(request.getParameter("catalogName"));
15         String launchDept ="",status="";
16         if(map.get("launchDept") == null || map.get("launchDept").length==1)
17             launchDept =Util.strNewFiltrate(request.getParameter("launchDept"));
18         else
19             launchDept = map.get("launchDept")[1];//request.getParameter("launchDept");
20         if(map.get("status") == null || map.get("status").length==1)
21             status = Util.strNewFiltrate(request.getParameter("status"));            //这里,表单直接提交上来,通过getParameter获取不到
22         else
23             status =  map.get("status")[1];//request.getParameter("status");
24         
25         if(!orgTypeFlag.equals("1"))        //非工商用户只展示已发布
26             status="A";
27         list.add(start);
28         list.add(limit);
29         list.add(catalogName);
30         list.add(launchDept);
31         list.add(status);
32         System.out.println(start);
33         System.out.println(limit);
34         String resultJson = uPCatalogManageService.fillDataIntoGrid(list.toArray());
35         try {
36             response.getWriter().write(resultJson);            //数据格式要带单引号
37         } catch (IOException e) {
38             throw new RuntimeException("response 写数据失败!");
39         }
40     }
    • 后台返回数据类型的格式
 1 /**
 2      * 根据前台传的参数来确定sql,填充表格中的数据。参数可能是空、可能是null。
 3      */
 4     public String fillDataIntoGrid(Object [] params){
 5         int start =  (Integer) params[0];
 6         int limit = (Integer) params[1];
 7         int end = start+limit;
 8         String catalogName = params[2]+"";        //null值也转为了字符串“null”
 9         String launchDept = params[3]+"";
10         String status = params[4]+"";
11         List<Object> list = new ArrayList<Object>();
12         list.add(start+1);
13         list.add(end);
14         list.add(catalogName);
15         list.add(launchDept);
16         list.add(status);
17         List<Map<String,Object>> resultList = uPCatalogManageDao.fillDataIntoGrid(list.toArray());
18         int size = uPCatalogManageDao.countAll();        //要得到正确的数,要保证这条sql的执行在上面sql的下面
19         StringBuffer json = new StringBuffer();
20         json.append("{");
21         json.append("metaData:{");
22         json.append(" totalProperty:'results',");
23         json.append("root:'rows',");
24         json.append("fields:[");
25         json.append("{name:'pk',mapping:'pk',hidden:true,hideable:false},");
26         json.append("{name:'catalogName',mapping:'catalogName'},");
27         json.append("{name:'launchDept',mapping:'launchDept'},");
28         json.append("{name:'executeDept',mapping:'executeDept'},");
29         json.append("{name:'punishExpire',mapping:'punishExpire'},");
30         json.append("{name:'status',mapping:'status'},");
31         json.append("]},");
32         json.append("results:"+size+",");
33         json.append("rows:[");
34         int length = resultList.size();
35         for(int i=0;i<length;i++){
36             json.append("{pk:'"+resultList.get(i).get("pk")+"',catalogName:'"+resultList.get(i).get("catalogName")+"',launchDept:'"+resultList.get(i).get("launchDept"));
37             json.append("',executeDept:'"+resultList.get(i).get("executeDept")+"',punishExpire:'"+resultList.get(i).get("punishExpire")+"',status:'"+resultList.get(i).get("status"));
38             json.append("'}");
39             if(i!=length-1)
40                 json.append(",");
41         }
42         json.append("]}");
43         return json.toString();
44     }
原文地址:https://www.cnblogs.com/zhangjieatbky/p/8137354.html