easyui的datagrid分页写法小结
Posted yadongliang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了easyui的datagrid分页写法小结相关的知识，希望对你有一定的参考价值。
easyui的datagrid分页死活不起作用...沙雕了...不说了上代码
1 //关闭tab1打开tab2 查询Detail 2 function refundDetail(){ 3 $(‘#tt‘).tabs(‘select‘, "Detail Information");//subtitle为选项卡的标题 4 //发起ajax请求,查询退款detail 5 var dayendDate = $("#dayendDate").val(); 6 var terminal = $("#terminal").val(); 7 var counter = $("#counter").val(); 8 9 var txnType = 99; 10 11 $(‘#detailCollectionInfo‘).datagrid({ 12 url: "dayendReconController.do?dayendReconDetail", 13 queryParams: { 14 txnType:txnType,//交易类型 15 dayendDate:dayendDate, 16 terminal:terminal, 17 counter:counter 18 } 19 }); 20 21 //下拉框值 22 $("#txnType").val(‘03‘);//txnType和点击保持一致,payMode为All不单独设置 23 24 // $.ajax({ 25 // type: "post", 26 // url: "dayendReconController.do?dayendReconDetail", 27 // data: { 28 // dayendDate:dayendDate, 29 // terminal:terminal, 30 // counter:counter 31 // }, 32 // dataType: "json", 33 // success: function(data){ 34 // console.log(data); 35 // var detail = data.detail; 36 // $("#detailCollectionInfo").datagrid("loadData",detail.rows); 37 // } 38 // }) 39 40 }
没错, 注释掉的沙雕代码就是我之前错误的写法, 发起ajax请求后台肯定接收不到page和rows两个参数, 分页必然不起作用.上面的写法datagrid自动将page和rows参数传到了后台, 每点击一次下一页发起当页的数据请求.以下是部分主要代码做个记录:
======================================我是分割线=======================================
jsp:
1 <table id="detailCollectionInfo" title="" class="easyui-datagrid" 2 style="width:100%;height:100%" overflow="hidden" 3 toolbar="#toolbar" pagination="true" rownumbers="true" 4 fitColumns="false" singleSelect="true" fit="true" 5 pagesize="10" pageNumber="1" pageList="[10]" > 6 <thead> 7 <tr> 8 <th align="center" field="id" width="50">ID</th> 9 <th align="center" field="refNo" width="110">Reference Number</th> 10 <th align="center" field="accNo" width="110">Account Number</th> 11 <th align="center" field="txnDate" width="110">Transaction Date</th> 12 <th align="center" field="amount" width="100">Amount(SGD)</th> 13 <th align="center" field="center" width="100">Center</th> 14 <th align="center" field="counter" width="100">Counter</th> 15 <th align="center" field="payMode" width="100">Payment Mode</th> 16 <th align="center" field="txnType" width="110">Transaction Type</th> 17 <th align="center" field="cashierId" width="100">Cashier</th> 18 <th align="center" field="operation" width="100" data-options="field:‘_operate‘,width:80,align:‘center‘,formatter:formatOper">Operation</th> 19 </tr> 20 </thead> 21 </table>
jsp的js部分:
1 $(‘#detailCollectionInfo‘).datagrid({ 2 url: "dayendReconController.do?dayendReconDetail", 3 queryParams: { 4 txnType:txnType,//交易类型 5 dayendDate:dayendDate, 6 terminal:terminal, 7 counter:counter 8 } 9 });
controller:
1 //查询detail 2 @RequestMapping(params = "dayendReconDetail") 3 @ResponseBody 4 public void dayendReconDetail(HttpServletRequest request, HttpServletResponse response, DataGrid dataGrid) { 5 int page = Integer.valueOf(request.getParameter("page")); 6 int rows = Integer.valueOf(request.getParameter("rows")); 7 JSONObject detailJsonObject = this.dayendReconService.getDayendDetail(request, response, page, rows); 8 // Map<String, Object> resultmap = new HashMap<>(); 9 // 10 // resultmap.put("detail",detailJsonObject); 11 // 12 // return resultmap; 13 Db2Page.responseDatagrid(response,detailJsonObject); 14 }
serviceImpl:
1 //detail-tab2 2 @Override 3 public JSONObject getDayendDetail(HttpServletRequest request, HttpServletResponse response, int page, int rows) { 4 Map<String, Object> returnMap = dayendReconDao.getDayendDetail(request, response, page, rows); 5 String jsonStr = JSONUtils.beanToJson(returnMap); 6 JSONObject jsonObject = JSONObject.parseObject(jsonStr); 7 8 return jsonObject; 9 }
daoImpl:
1 //查询dayend的detail 2 @Override 3 public Map<String, Object> getDayendDetail(HttpServletRequest request, HttpServletResponse response, int page, int rows){ 4 StringBuilder sql1 = new StringBuilder( 5 " SELECT " + 6 " id, refNo, accNo, txnDate, amount, center, counter, payMode, txnType, cashier " + 7 " FROM " + 8 " ( ( " + 9 " SELECT " + 10 " sp.id AS id, " + 11 " sp.ref_no AS refNo, " + 12 " sp.acc_no AS accNo, " + 13 " sp.txn_date AS txnDate, " + 14 " sp.topup_amt AS amount, " + 15 " sp.tmnl_code AS center, " + 16 " sp.counter_id AS counter, " + 17 " sp.pay_mode AS payMode, " + 18 " sp.txn_status AS txnType, " + 19 " sp.cashier_id AS cashier " + 20 " FROM " + 21 " SP_TOPUP_REC sp " + 22 " WHERE " + 23 " 1 = 1 " 24 ); 25 26 StringBuilder sql2 = new StringBuilder( 27 " ) UNION ALL ( SELECT " + 28 " re.ID AS id, " + 29 " ‘--‘ AS refNo, " + 30 " re.acc_no AS accNo, " + 31 " re.appr_time AS txnDate, " + 32 " re.refund_amt AS amount, " + 33 " re.tmnl_code AS center, " + 34 " re.counter_id AS counter, " + 35 " re.pay_mode AS payMode, " + 36 " ‘99‘ AS txnType, " + 37 " re.apply_id AS cashier " + 38 " FROM " + 39 " REFUND_REC re " + 40 " WHERE " + 41 " re.appr_status = ‘02‘ " 42 ); 43 44 StringBuilder sql3 = new StringBuilder(" ) ) result "); 45 46 StringBuilder condition = new StringBuilder(); 47 StringBuilder condition2 = new StringBuilder(); 48 List params = new ArrayList(); 49 List params2 = new ArrayList(); 50 51 //查询条件 52 //time 53 String dayendDate = request.getParameter("dayendDate"); 54 if(!"".equals(dayendDate)){ 55 condition.append(" AND DateDiff(dd, sp.txn_date, ? ) = 0 "); 56 condition2.append(" AND DateDiff(dd, re.appr_time, ? ) = 0 "); 57 params.add(dayendDate); 58 params2.add(dayendDate); 59 } 60 //counter 61 String terminal = request.getParameter("terminal"); 62 if(!"".equals(terminal)){ 63 condition.append(" AND sp.tmnl_code = ? "); 64 condition2.append(" AND re.tmnl_code = ? "); 65 params.add(terminal); 66 params2.add(terminal); 67 } 68 //center 69 String counter = request.getParameter("counter"); 70 if(!"".equals(counter)){ 71 condition.append(" AND sp.counter_id = ? "); 72 condition2.append(" AND re.counter_id = ? "); 73 params.add(counter); 74 params2.add(counter); 75 } 76 77 String sqlQuery = sql1.append(condition).append(sql2).append(condition2).append(sql3).toString(); 78 Query q = getSession().createSQLQuery(sqlQuery); 79 if (params != null && params.size() > 0) { 80 for (int i = 0; i < params.size(); i++) { 81 q.setParameter(i, params.get(i)); 82 } 83 } 84 if (params2 != null && params2.size() > 0) { 85 for (int i = 0; i < params2.size(); i++) { 86 q.setParameter(i+params.size(), params.get(i)); 87 } 88 } 89 90 List objectList = q.list(); 91 int count = 0; 92 if (objectList!=null&&objectList.size()>0){ 93 count = objectList.size(); 94 } 95 q.setFirstResult((page - 1) * rows).setMaxResults(rows); 96 97 List list = q.list(); 98 List<Map<String, Object>> mapList = new ArrayList<>(); 99 100 //遍历 101 if(list != null && list.size() > 0) { 102 for (int i = 0; i < list.size(); i++) { 103 Object[] objects = (Object[]) list.get(i); 104 Map<String, Object> map = new HashMap<>(); 105 map.put("id", objects[0] != null ? objects[0] : ""); 106 map.put("refNo", objects[1] != null ? objects[1] : ""); 107 map.put("accNo", objects[2] != null ? objects[2] : ""); 108 map.put("txnDate", objects[3] != null ? objects[3] : ""); 109 map.put("amount", objects[4] != null ? objects[4] : ""); 110 map.put("center", objects[5] != null ? objects[5] : ""); 111 map.put("counter", objects[6] != null ? objects[6] : ""); 112 map.put("payMode", objects[7] != null ? objects[7] : ""); 113 map.put("txnType", objects[8] != null ? objects[8] : ""); 114 map.put("cashierId", objects[9] != null ? objects[9] : ""); 115 116 mapList.add(map); 117 } 118 } 119 120 Map<String, Object> returnMap = new HashMap<>(); 121 returnMap.put("total",count); 122 returnMap.put("rows",mapList); 123 124 return returnMap; 125 }
Db2page.java:
1 package com.ppms.utils; 2 3 import java.io.IOException; 4 import java.io.PrintWriter; 5 import java.text.DateFormat; 6 import java.text.ParseException; 7 import java.text.SimpleDateFormat; 8 import java.util.ArrayList; 9 import java.util.Calendar; 10 import java.util.Date; 11 import java.util.HashMap; 12 import java.util.List; 13 import java.util.Map; 14 15 import javax.servlet.http.HttpServletResponse; 16 17 18 import com.alibaba.fastjson.JSONObject; 19 20 public class Db2Page { 21 String fieldPage; // 页面的fieldID 22 23 String columnDB; // 数据库的字段名 24 25 IMyDataExchanger dataExchanger; // 数据变换 26 27 // 构造函数1：当页面的fieldID与数据库字段一致时（数据也不用变换） 28 public Db2Page(String fieldPage) { 29 this.fieldPage = fieldPage; 30 this.columnDB = fieldPage; 31 this.dataExchanger = null; 32 } 33 34 // 构造函数2：当页面的fieldID与数据库字段不一致时（数据不用变换） 35 public Db2Page(String fieldPage, String columnDB) { 36 this.fieldPage = fieldPage; 37 if (columnDB == null) {// 与fieldPage相同 38 this.columnDB = fieldPage; 39 } else { 40 this.columnDB = columnDB; 41 } 42 this.dataExchanger = null; 43 } 44 45 // 构造函数3：当页面的fieldID与数据库字段不一致，且数据要进行变换（当然都用这个构造函数也行） 46 public Db2Page(String fieldPage, String columnDB, 47 IMyDataExchanger dataExchanger) { 48 this.fieldPage = fieldPage; 49 if (columnDB == null) {// 与fieldPage相同 50 this.columnDB = fieldPage; 51 } else { 52 this.columnDB = columnDB; 53 } 54 this.dataExchanger = dataExchanger; 55 } 56 57 /** 58 * 取页面表示绑定的fieldID 59 */ 60 public String getKey() { 61 return fieldPage; 62 } 63 64 /** 65 * 取页面表示对应的值 66 * 67 * @param mapDB 68 * : 从数据库直接取得的结果集(一条数据的MAP) 69 * @return Object : 页面表示对应的值 70 */ 71 public Object getData(Map mapDB) { 72 Object objValue = mapDB.get(columnDB); 73 if (objValue == null) { 74 return null; 75 } else { 76 if (dataExchanger != null) { 77 return dataExchanger.exchange(objValue); 78 } else { 79 return objValue; 80 } 81 } 82 } 83 84 // 数据变换的统一接口 85 interface IMyDataExchanger { 86 public Object exchange(Object value); 87 } 88 89 /** 90 * 返回easyUI的DataGrid数据格式的JSONObject对象 91 * 92 * @param mapList 93 * : 从数据库直接取得的结果集列表 94 * @param iTotalCnt 95 * : 从数据库直接取得的结果集总数据条数 96 * @param dataExchanger 97 * : 页面表示数据与数据库字段的对应关系列表 98 * @return JSONObject 99 */ 100 public static JSONObject getJsonDatagridEasyUI( 101 List<Map<String, Object>> mapList, int iTotalCnt, 102 Db2Page[] dataExchanger) { 103 StringBuilder returnJson = new StringBuilder(); 104 105 List<Map<String, Object>> forList = new ArrayList<Map<String, Object>>(); 106 107 if (mapList != null && mapList.size() > 0) { 108 returnJson.append("{"total":").append(iTotalCnt) 109 .append(","rows":"); 110 111 for (int j = 0; j < mapList.size(); j++) { 112 Map<String, Object> m = mapList.get(j); 113 Map<String, Object> forMap = new HashMap<String, Object>(); 114 for (int i = 0; i < dataExchanger.length; i++) { 115 Object objValue = dataExchanger[i].getData(m) == null ? "" 116 : dataExchanger[i].getData(m); 117 forMap.put(dataExchanger[i].getKey(), objValue); 118 } 119 forList.add(forMap); 120 } 121 122 returnJson.append(JSONObject.toJSONString(forList)).append("}"); 123 124 } else { 125 returnJson.append("{"total":").append(0).append(","rows":[") 126 .append("]}"); 127 } 128 129 JSONObject jObject = (JSONObject) JSONObject.parseObject(returnJson 130 .toString()); 131 return jObject; 132 } 133 134 public static String isNull(String value) { 135 if (value == null || "null".equals(value)) { 136 return ""; 137 } 138 return value; 139 } 140 141 public static boolean isFalse(String value) { 142 if (value == null || "null".equals(value) || "".equals(value)) { 143 return false; 144 } 145 return true; 146 } 147 148 private int getMonthDay(String month) { 149 int year = Integer.parseInt(month.substring(0, 4)); 150 int mth = Integer.parseInt(month.substring(4, 6)); 151 Calendar calendar = Calendar.getInstance(); 152 calendar.clear(); // 在使用set方法之前，必须先clear一下，否则很多信息会继承自系统当前时间 153 calendar.set(Calendar.YEAR, year); 154 calendar.set(Calendar.MONTH, mth - 1); // Calendar对象默认一月为0 155 int endday = calendar.getActualMaximum(Calendar.DAY_OF_MONTH);// 获得本 156 return endday; 157 } 158 159 public static void responseString(HttpServletResponse response, String json) { 160 response.setContentType("application/json"); 161 response.setHeader("Cache-Control", "no-store"); 162 try { 163 PrintWriter pw = response.getWriter(); 164 pw.write(json); 165 pw.flush(); 166 } catch (IOException e) { 167 e.printStackTrace(); 168 } 169 } 170 171 public static void responseDatagrid(HttpServletResponse response, 172 JSONObject jObject) { 173 if (jObject == null) 174 jObject = new JSONObject(); 175 response.setContentType("application/json"); 176 response.setHeader("Cache-Control", "no-store"); 177 try { 178 PrintWriter pw = response.getWriter(); 179 pw.write(jObject.toString()); 180 pw.flush(); 181 } catch (IOException e) { 182 e.printStackTrace(); 183 } 184 } 185 186 /** 187 * 使用Db2Page.getJsonDatagridEasyUI导致的问题 188 * 01）包含单引号‘： 189 * Exception in thread "main" com.alibaba.fastjson.JSONException: syntax error, position at 33, name 管理单位 190 * 02）包含转义： 191 * Exception in thread "main" com.alibaba.fastjson.JSONException: unclosed single-quote string 192 * @param args 193 */ 194 public static void main(String[] args) { 195 Db2Page[] db2Pages = { 196 new Db2Page("管理单位"),new Db2Page("orgNo", "ORGNO")}; 197 List<Map<String,Object>> detailList = new ArrayList<Map<String, Object>>(); 198 Map<String, Object> row = new HashMap<String, Object>(); 199 row.put("管理单位", "吉林供电\单位"); 200 row.put("ORGNO", "00001"); 201 detailList.add(row); 202 Map<String, Object> newrow = new HashMap<String, Object>(); 203 newrow.put("管理单位", "吉林长春供电\单位"); 204 newrow.put("ORGNO", "000011"); 205 detailList.add(newrow); 206 207 JSONObject jObject = Db2Page.getJsonDatagridEasyUI(detailList, 5, db2Pages); 208 System.out.println(jObject.toJSONString()); 209 } 210 }
少壮不努力, 老大开夏利, 夏利都没有...
以上是关于easyui的datagrid分页写法小结的主要内容，如果未能解决你的问题，请参考以下文章