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 : 'width: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',width: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:'信息发起部门',width:80,dataIndex:'launchDept',sortable:true}, 113 {header:'联合执行部门',width:80,dataIndex:'executeDept',sortable:true}, 114 {header:'惩戒期限',width: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:'状态',width: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',width: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>  " 138 +"<a style='color:blue;cursor:pointer' onclick='publish()'><U>发布</U></a>  " 139 +"<a style='color:grey;'><U>撤销</U></a>"; 140 }else{ 141 html_="<a style='color:grey;'><U>修改</U></a>  " 142 +"<a style='color:grey;'><U>发布</U></a>  " 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 }