easyui的datagrid分页写法小结

easyui的datagrid分页死活不起作用...沙雕了...不说了上代码

//关闭tab1打开tab2 查询Detail
    function refundDetail(){
        $('#tt').tabs('select', "Detail Information");//subtitle为选项卡的标题
        //发起ajax请求,查询退款detail
        var dayendDate = $("#dayendDate").val();
        var terminal = $("#terminal").val();
        var counter = $("#counter").val();

        var txnType = 99;

        $('#detailCollectionInfo').datagrid({
            url: "dayendReconController.do?dayendReconDetail",
            queryParams: {
                txnType:txnType,//交易类型
                dayendDate:dayendDate,
                terminal:terminal,
                counter:counter
            }
        });

        //下拉框值
        $("#txnType").val('03');//txnType和点击保持一致,payMode为All不单独设置

//        $.ajax({
//            type: "post",
//            url: "dayendReconController.do?dayendReconDetail",
//            data: {
//                dayendDate:dayendDate,
//                terminal:terminal,
//                counter:counter
//            },
//            dataType: "json",
//            success: function(data){
//                console.log(data);
//                var detail = data.detail;
//                $("#detailCollectionInfo").datagrid("loadData",detail.rows);
//            }
//        })

    }

没错, 注释掉的沙雕代码就是我之前错误的写法, 发起ajax请求后台肯定接收不到page和rows两个参数, 分页必然不起作用.上面的写法datagrid自动将page和rows参数传到了后台, 每点击一次下一页发起当页的数据请求.以下是部分主要代码做个记录:

======================================我是分割线=======================================

jsp:

<table id="detailCollectionInfo" title="" class="easyui-datagrid"
                                       style="width:100%;height:100%" overflow="hidden"
                                       toolbar="#toolbar" pagination="true" rownumbers="true"
                                       fitColumns="false" singleSelect="true" fit="true"
                                       pagesize="10" pageNumber="1" pageList="[10]" >
                                    <thead>
                                    <tr>
                                        <th align="center" field="id" width="50">ID</th>
                                        <th align="center" field="refNo" width="110">Reference Number</th>
                                        <th align="center" field="accNo" width="110">Account Number</th>
                                        <th align="center" field="txnDate" width="110">Transaction Date</th>
                                        <th align="center" field="amount" width="100">Amount(SGD)</th>
                                        <th align="center" field="center" width="100">Center</th>
                                        <th align="center" field="counter" width="100">Counter</th>
                                        <th align="center" field="payMode" width="100">Payment Mode</th>
                                        <th align="center" field="txnType" width="110">Transaction Type</th>
                                        <th align="center" field="cashierId" width="100">Cashier</th>
                                        <th align="center" field="operation" width="100" data-options="field:'_operate',width:80,align:'center',formatter:formatOper">Operation</th>
                                    </tr>
                                    </thead>
                                </table>

jsp的js部分:

$('#detailCollectionInfo').datagrid({
            url: "dayendReconController.do?dayendReconDetail",
            queryParams: {
                txnType:txnType,//交易类型
                dayendDate:dayendDate,
                terminal:terminal,
                counter:counter
            }
        });

controller:

    //查询detail
    @RequestMapping(params = "dayendReconDetail")
    @ResponseBody
    public void dayendReconDetail(HttpServletRequest request, HttpServletResponse response, DataGrid dataGrid) {
        int page = Integer.valueOf(request.getParameter("page"));
        int rows = Integer.valueOf(request.getParameter("rows"));
        JSONObject detailJsonObject = this.dayendReconService.getDayendDetail(request, response, page, rows);
//        Map<String, Object> resultmap = new HashMap<>();
//
//        resultmap.put("detail",detailJsonObject);
//
//        return resultmap;
        Db2Page.responseDatagrid(response,detailJsonObject);
    }

serviceImpl:

//detail-tab2
    @Override
    public JSONObject getDayendDetail(HttpServletRequest request, HttpServletResponse response, int page, int rows) {
        Map<String, Object> returnMap = dayendReconDao.getDayendDetail(request, response, page, rows);
        String jsonStr = JSONUtils.beanToJson(returnMap);
        JSONObject jsonObject = JSONObject.parseObject(jsonStr);

        return jsonObject;
    }

daoImpl:

//查询dayend的detail
    @Override
    public Map<String, Object> getDayendDetail(HttpServletRequest request, HttpServletResponse response, int page, int rows){
        StringBuilder sql1 = new StringBuilder(
               " SELECT " +
               " id, refNo, accNo, txnDate, amount, center, counter, payMode, txnType, cashier " +
               " FROM " +
               " ( ( " +
               "     SELECT " +
               "     sp.id AS id, " +
               "     sp.ref_no AS refNo, " +
               "     sp.acc_no AS accNo, " +
               "     sp.txn_date AS txnDate, " +
               "     sp.topup_amt AS amount, " +
               "     sp.tmnl_code AS center, " +
               "     sp.counter_id AS counter, " +
               "     sp.pay_mode AS payMode, " +
               "     sp.txn_status AS txnType, " +
               "     sp.cashier_id AS cashier " +
               "     FROM " +
               "     SP_TOPUP_REC sp " +
               "     WHERE " +
               "     1 = 1 "
        );

        StringBuilder sql2 = new StringBuilder(
               " ) UNION ALL ( SELECT " +
               " re.ID AS id, " +
               " '--' AS refNo, " +
               " re.acc_no AS accNo, " +
               " re.appr_time AS txnDate, " +
               " re.refund_amt AS amount, " +
               " re.tmnl_code AS center, " +
               " re.counter_id AS counter, " +
               " re.pay_mode AS payMode, " +
               " '99' AS txnType, " +
               " re.apply_id AS cashier " +
               " FROM " +
               " REFUND_REC re " +
               " WHERE " +
               " re.appr_status = '02'  "
        );

        StringBuilder sql3 = new StringBuilder(" ) ) result ");

        StringBuilder condition = new StringBuilder();
        StringBuilder condition2 = new StringBuilder();
        List params = new ArrayList();
        List params2 = new ArrayList();

        //查询条件
        //time
        String dayendDate = request.getParameter("dayendDate");
        if(!"".equals(dayendDate)){
            condition.append(" AND DateDiff(dd, sp.txn_date, ? ) = 0 ");
            condition2.append(" AND DateDiff(dd, re.appr_time, ? ) = 0 ");
            params.add(dayendDate);
            params2.add(dayendDate);
        }
        //counter
        String terminal = request.getParameter("terminal");
        if(!"".equals(terminal)){
            condition.append(" AND sp.tmnl_code = ? ");
            condition2.append(" AND re.tmnl_code = ? ");
            params.add(terminal);
            params2.add(terminal);
        }
        //center
        String counter = request.getParameter("counter");
        if(!"".equals(counter)){
            condition.append(" AND sp.counter_id = ? ");
            condition2.append(" AND re.counter_id = ? ");
            params.add(counter);
            params2.add(counter);
        }

        String sqlQuery = sql1.append(condition).append(sql2).append(condition2).append(sql3).toString();
        Query q = getSession().createSQLQuery(sqlQuery);
        if (params != null && params.size() > 0) {
            for (int i = 0; i < params.size(); i++) {
                q.setParameter(i, params.get(i));
            }
        }
        if (params2 != null && params2.size() > 0) {
            for (int i = 0; i < params2.size(); i++) {
                q.setParameter(i+params.size(), params.get(i));
            }
        }

        List objectList = q.list();
        int count = 0;
        if (objectList!=null&&objectList.size()>0){
            count = objectList.size();
        }
        q.setFirstResult((page - 1) * rows).setMaxResults(rows);

        List list = q.list();
        List<Map<String, Object>> mapList = new ArrayList<>();

        //遍历
        if(list != null && list.size() > 0) {
            for (int i = 0; i < list.size(); i++) {
                Object[] objects = (Object[]) list.get(i);
                Map<String, Object> map = new HashMap<>();
                map.put("id", objects[0] != null ? objects[0] : "");
                map.put("refNo", objects[1] != null ? objects[1] : "");
                map.put("accNo", objects[2] != null ? objects[2] : "");
                map.put("txnDate", objects[3] != null ? objects[3] : "");
                map.put("amount", objects[4] != null ? objects[4] : "");
                map.put("center", objects[5] != null ? objects[5] : "");
                map.put("counter", objects[6] != null ? objects[6] : "");
                map.put("payMode", objects[7] != null ? objects[7] : "");
                map.put("txnType", objects[8] != null ? objects[8] : "");
                map.put("cashierId", objects[9] != null ? objects[9] : "");

                mapList.add(map);
            }
        }

        Map<String, Object> returnMap = new HashMap<>();
        returnMap.put("total",count);
        returnMap.put("rows",mapList);

        return returnMap;
    }

Db2page.java:

package com.ppms.utils;

import java.io.IOException;
import java.io.PrintWriter;
import java.text.DateFormat;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletResponse;


import com.alibaba.fastjson.JSONObject;

public class Db2Page {
    String fieldPage; // 页面的fieldID

    String columnDB; // 数据库的字段名

    IMyDataExchanger dataExchanger; // 数据变换

    // 构造函数1：当页面的fieldID与数据库字段一致时（数据也不用变换）
    public Db2Page(String fieldPage) {
        this.fieldPage = fieldPage;
        this.columnDB = fieldPage;
        this.dataExchanger = null;
    }

    // 构造函数2：当页面的fieldID与数据库字段不一致时（数据不用变换）
    public Db2Page(String fieldPage, String columnDB) {
        this.fieldPage = fieldPage;
        if (columnDB == null) {// 与fieldPage相同
            this.columnDB = fieldPage;
        } else {
            this.columnDB = columnDB;
        }
        this.dataExchanger = null;
    }

    // 构造函数3：当页面的fieldID与数据库字段不一致，且数据要进行变换（当然都用这个构造函数也行）
    public Db2Page(String fieldPage, String columnDB,
            IMyDataExchanger dataExchanger) {
        this.fieldPage = fieldPage;
        if (columnDB == null) {// 与fieldPage相同
            this.columnDB = fieldPage;
        } else {
            this.columnDB = columnDB;
        }
        this.dataExchanger = dataExchanger;
    }

    /**
     * 取页面表示绑定的fieldID
     */
    public String getKey() {
        return fieldPage;
    }

    /**
     * 取页面表示对应的值
     * 
     * @param mapDB
     *            : 从数据库直接取得的结果集(一条数据的MAP)
     * @return Object : 页面表示对应的值
     */
    public Object getData(Map mapDB) {
        Object objValue = mapDB.get(columnDB);
        if (objValue == null) {
            return null;
        } else {
            if (dataExchanger != null) {
                return dataExchanger.exchange(objValue);
            } else {
                return objValue;
            }
        }
    }

    // 数据变换的统一接口
    interface IMyDataExchanger {
        public Object exchange(Object value);
    }

    /**
     * 返回easyUI的DataGrid数据格式的JSONObject对象
     * 
     * @param mapList
     *            : 从数据库直接取得的结果集列表
     * @param iTotalCnt
     *            : 从数据库直接取得的结果集总数据条数
     * @param dataExchanger
     *            : 页面表示数据与数据库字段的对应关系列表
     * @return JSONObject
     */
    public static JSONObject getJsonDatagridEasyUI(
            List<Map<String, Object>> mapList, int iTotalCnt,
            Db2Page[] dataExchanger) {
        StringBuilder returnJson = new StringBuilder();

        List<Map<String, Object>> forList = new ArrayList<Map<String, Object>>();

        if (mapList != null && mapList.size() > 0) {
            returnJson.append("{\"total\":").append(iTotalCnt)
                    .append(",\"rows\":");

            for (int j = 0; j < mapList.size(); j++) {
                Map<String, Object> m = mapList.get(j);
                Map<String, Object> forMap = new HashMap<String, Object>();
                for (int i = 0; i < dataExchanger.length; i++) {
                    Object objValue = dataExchanger[i].getData(m) == null ? ""
                            : dataExchanger[i].getData(m);
                    forMap.put(dataExchanger[i].getKey(), objValue);
                }
                forList.add(forMap);
            }

            returnJson.append(JSONObject.toJSONString(forList)).append("}");

        } else {
            returnJson.append("{\"total\":").append(0).append(",\"rows\":[")
                    .append("]}");
        }

        JSONObject jObject = (JSONObject) JSONObject.parseObject(returnJson
                .toString());
        return jObject;
    }

    public static String isNull(String value) {
        if (value == null || "null".equals(value)) {
            return "";
        }
        return value;
    }

    public static boolean isFalse(String value) {
        if (value == null || "null".equals(value) || "".equals(value)) {
            return false;
        }
        return true;
    }

    private int getMonthDay(String month) {
        int year = Integer.parseInt(month.substring(0, 4));
        int mth = Integer.parseInt(month.substring(4, 6));
        Calendar calendar = Calendar.getInstance();
        calendar.clear(); // 在使用set方法之前，必须先clear一下，否则很多信息会继承自系统当前时间
        calendar.set(Calendar.YEAR, year);
        calendar.set(Calendar.MONTH, mth - 1); // Calendar对象默认一月为0
        int endday = calendar.getActualMaximum(Calendar.DAY_OF_MONTH);// 获得本
        return endday;
    }

    public static void responseString(HttpServletResponse response, String json) {
        response.setContentType("application/json");
        response.setHeader("Cache-Control", "no-store");
        try {
            PrintWriter pw = response.getWriter();
            pw.write(json);
            pw.flush();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public static void responseDatagrid(HttpServletResponse response,
            JSONObject jObject) {
        if (jObject == null)
            jObject = new JSONObject();
        response.setContentType("application/json");
        response.setHeader("Cache-Control", "no-store");
        try {
            PrintWriter pw = response.getWriter();
            pw.write(jObject.toString());
            pw.flush();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    
    /**
     * 使用Db2Page.getJsonDatagridEasyUI导致的问题
     * 01）包含单引号'：
     * Exception in thread "main" com.alibaba.fastjson.JSONException: syntax error, position at 33, name 管理单位
     * 02）包含转义\：
     * Exception in thread "main" com.alibaba.fastjson.JSONException: unclosed single-quote string
     * @param args
     */
    public static void main(String[] args) {
        Db2Page[] db2Pages = {
                new Db2Page("管理单位"),new Db2Page("orgNo", "ORGNO")};
        List<Map<String,Object>> detailList = new ArrayList<Map<String, Object>>();
        Map<String, Object> row = new HashMap<String, Object>();
        row.put("管理单位", "吉林供电\\单位");
        row.put("ORGNO", "00001");
        detailList.add(row);
        Map<String, Object> newrow = new HashMap<String, Object>();
        newrow.put("管理单位", "吉林长春供电\\单位");
        newrow.put("ORGNO", "000011");
        detailList.add(newrow);
        
        JSONObject jObject = Db2Page.getJsonDatagridEasyUI(detailList, 5, db2Pages);
        System.out.println(jObject.toJSONString());
    }
}

 

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