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>
View Code

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         });
View Code

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     }
View Code

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     }
View Code

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     }
View Code

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 }
View Code

 

少壮不努力, 老大开夏利, 夏利都没有...

 

以上是关于easyui的datagrid分页写法小结的主要内容,如果未能解决你的问题,请参考以下文章

springmvc+easyUI的DataGrid分页功能

easyui-datagrid分页部分翻页按钮不显示

jquery easyui datagrid 的分页,为啥总是显示所有的数据啊,哪位大虾帮忙看看啊,下面是代码

mvc easyui datagrid 查询怎么做啊,

改变EasyUI默认分页显示数目

为啥easyui-datagrid分页控件把所有的都遮住了?