zoukankan      html  css  js  c++  java
  • 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     }
  • 相关阅读:
    缓存穿透、缓存并发、缓存失效
    改善Java文档的理由、建议和技巧
    如何用消息系统避免分布式事务?
    灰度发布
    REFLECTION(反射)INTROSPECTION(内省、内观)
    常规版本如果新增字段或新增状态如何正确处理
    Git库管理规范
    .net 创建文件夹
    HTTP消息头
    C#读取指定文件夹中的所有文件
  • 原文地址:https://www.cnblogs.com/zhangjieatbky/p/8137354.html
Copyright © 2011-2022 走看看