easyUI配合PageHelper實現分頁

使用easyUI分頁，后台返回頁面需要當前頁需要顯示的數據rows，數據庫總條數total

后端采用的pageHelper幫助分頁，mybatis使用pageHelper分頁

前端js封裝獲取easyUI datagrid對象

測試結果：

 

 

 

封裝的common.js

// grid的輸入對象，使用此對象減少代碼量，也可以修改此對象
var getDatagridObj = function() {
    var dtd = $.Deferred();
    var datagridObj = {
        url : '',
        queryParams : {},
        fit : true,
        /* 設置為true將自動使列適應表格寬度以防止出現水平滾動。 */
        fitColumns : false,
        border : false,
        rownumbers : true,
        /* 設置true將在數據表格底部顯示分頁工具欄。 */
        pagination : true,
        idField : '',
        /* 表明該列是一個唯一列。 */
        pageSize : 10, // 當設置分頁屬性時，初始化每頁記錄數。
        pageList : [ 10, 20, 30, 40, 50 ], // 請不要再設置超過50條的顯示，超過會讓系統承受不住壓力，造成oom問題
        sortName : '',
        sortOrder : 'asc',
        checkOnSelect : true, // 如果為true，該復選框被選中/取消選中，當用戶點擊某一行上。如果為false，該復選框僅檢查/取消選中，當用戶點擊完全的復選框。、
        // selectOnCheck :
        // false,//如果設置為true，單擊一個復選框，將始終選擇行。如果為false，不會選擇行選中該復選框。
        nowrap : true, // 數據超出時是否自動截取
        singleSelect : true,
        // collapsible:true,
        loadingMessage : '正在努力加載中，請稍侯... ...',
        columns : [],
        // 單擊
        onClickRow : function(rowIndex, rowData) {
        },
        // 雙擊onDblClickCell列，onDblClickRow行
        onDblClickRow : function(rowIndex, rowData) {
        },
        // 右鍵
        onRowContextMenu : function(e, rowIndex, rowData) {
        },
        rowStyler : function(index, row) {
        },
        // 擴展自定義onLoadSuccess()之前的方法，防止onLoadSuccess()被覆蓋，導致高亮不顯示
        // 所以說在其他頁面上不應該調用onLoadSuccess(),而是應該調用onLoadSuccessCustom()
        onLoadSuccessCustom:function(data){

        },
        onLoadSuccess : function(data){
            console.log('common onLoadSuccess');

            //
            datagridObj.onLoadSuccessCustom(data);

            dtd.resolve();
            //首選把編輯框高亮顯示
            var datagridOptions = $(this).datagrid("options");
            var datagridColumns = datagridOptions.columns;
            var onClickCell = datagridOptions.onClickCell;
            var hasOnclickCell = false;
            if((""+onClickCell).indexOf("function (_863,_864,_865)")>=0){
                hasOnclickCell = false;
            }else{
                hasOnclickCell = true;
            }
            //fronzen columns

            for(var i=0;hasOnclickCell && i<datagridOptions.frozenColumns.length;i++){
                var datagridColumn = datagridOptions.frozenColumns[i];
                for(var j=0;j<datagridColumn.length;j++){
                    var oneOption = datagridColumn[j];
                    var field = oneOption.field;
                    var editor = oneOption.editor;
                    if(editor!=null){
                        $(".datagrid-body td[field='"+field+"']").each(function(index,eleDom){
                            $(eleDom).css("background","rgba(37, 255, 0, 0.0901961)");
                        });

                    }
                }
            }
            //columns
            for(var i=0;hasOnclickCell && i<datagridColumns.length;i++){
                var datagridColumn = datagridColumns[i];
                for(var j=0;j<datagridColumn.length;j++){
                    var oneOption = datagridColumn[j];
                    var field = oneOption.field;
                    var editor = oneOption.editor;
                    // liangtf editor是一個空對象，並不等於{}，詳情請看下面的removeEditor方法
                    if(!$.isEmptyObject(editor) && editor!=null){
                        $(".datagrid-body td[field='"+field+"']").each(function(index,eleDom){
                            $(eleDom).css("background","rgba(37, 255, 0, 0.0901961)");
                        });

                    }
                }
            }

            for(var i=0;data && i<data.rows.length;i++){
                var row = data.rows[i];
                if(row.orignalTotalCount>0){
                    var pageInfo = $(this).parent().parent().find(".pagination-info");
                    if(pageInfo.html().indexOf("(")<0){
                        pageInfo.html(pageInfo.html()+"(全"+row.orignalTotalCount+"條)");
                    }
                    break;
                }
            }
            var datagridCellArr = $(".datagrid-cell");
            for(var i=0;i<datagridCellArr.length;i++){
                var cellwidth = eval($(datagridCellArr[i]).css("width").replace("px",""));
                var strLength = eval($(datagridCellArr[i]).html().length);
                if($(datagridCellArr[i]).html().indexOf("<input")>=0 ||
                    $(datagridCellArr[i]).html().indexOf("<INPUT")>=0||
                    $(datagridCellArr[i]).html().indexOf("<DIV")>=0 ||
                    $(datagridCellArr[i]).html().indexOf("<div")>=0 ||
                    $(datagridCellArr[i]).html().indexOf("<a")>=0 ||
                    $(datagridCellArr[i]).html().indexOf("<A")>=0){
                    if($(datagridCellArr[i]).html().indexOf("<a")>=0){
                        var aTag = $(datagridCellArr[i]).find("a");
                        if($(aTag).attr("data-tip-text")){
                            $(aTag).tooltip({
                                position : 'bottom',
                                content : '<span>'+$(aTag).attr("data-tip-text")+'</span>',
                                onShow : function () {
                                    $(this).tooltip('tip').css({
                                        borderColor : '#9cd8fc'
                                    });
                                }
                            });
                        }
                    }
                    continue;
                }
                if(strLength*9>cellwidth){
                    $(datagridCellArr[i]).tooltip({
                        position : 'bottom',
                        content : '<span>'+$(datagridCellArr[i]).html()+'</span>',
                        onShow : function () {
                            $(this).tooltip('tip').css({
                                borderColor : '#666'
                            });
                        }
                    });
                }

            }


        },
        onLoadError : function(){
            dtd.reject();
            console.error("查詢失敗");
        },
        toolbar : '' // 聲明按鈕
    };
    datagridObj.dtd = dtd.promise();
    return datagridObj;
};

 

頁面jsp，需引入相關easyUI css、js文件

<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2020-04-15
  Time: 21:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>excel導入測試</title>
    <%-- 引入easyUI樣式 --%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/easyui.css" type="text/css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/icon.css" type="text/css" />
    <%-- 圖標 --%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font-awesome.min.css" type="text/css" />
    <%-- 引入jQuery --%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <%-- 引入jQuery easyUI --%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
    <%-- easyUI漢化 --%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
    <%-- 引入common.js --%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/common.js"></script>
    <script>
        var contextPath = "${pageContext.request.contextPath}";
    </script>
    <%-- 引入自定義js --%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/itemList.js"></script>
</head>
<body>
    <div id="itemList" style="height: 500px">
        <table id="itemList_datagrid"></table>

        <div id="itemList_datagrid_operate">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td><a id="importItemListBtnId" class="easyui-linkbutton"
                           data-options="iconCls:'fa fa-upload',plain:true" onclick="importItemList()">導入</a>
                    </td>
                    <td>
                        <div class="datagrid-btn-separator"></div>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div id="excelImportDialog" class="easyui-dialog" data-options="closed:true" title="導入商品"
         style="width:400px;height:200px;padding:10px" data-options="buttons: '#dlg-buttons'">
    </div>
</body>
</html>

加載datagrid的js

$(function() {
    // 初始化項目列表
    initItemList();
});

function initItemList() {
    var dataGridObj = getDatagridObj();
    dataGridObj.url = contextPath + "/item/getItemList";
    dataGridObj.queryParams = {pagination:"true"};
    dataGridObj.pageSize = 20;
    dataGridObj.pageList = [10, 20, 30, 40, 50, 100];
    dataGridObj.idField = "id";
    dataGridObj.sortName = "id";
    dataGridObj.sortOrder = "ASC";
    dataGridObj.toolbar = '#itemList_datagrid_operate';
    dataGridObj.columns = [[
        {
            field : 'id',
            title : "商品ID",
            width : 150,
            sortable:true
        },{
            field : 'title',
            title : "商品標題",
            width : 300,
            sortable:true
        },{
            field : 'sell_point',
            title : "商品賣點",
            width : 500,
            hidden : false,
            sortable:true
        },{
            field : 'price',
            title : "商品價格",
            width : 200,
            hidden : false,
            sortable:true
        }
    ]];

    $('#itemList_datagrid').datagrid(dataGridObj);
}

controller，利用PageHelper設置查詢參數，使用mapList封裝查詢記錄數

package com.alphajuns.ssm.controller;

import com.alphajuns.ssm.service.ItemService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import net.sf.json.JSONObject;
import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;
import java.util.Map;

@Controller
@RequestMapping("/item")
public class ItemController {

    private Logger logger = Logger.getLogger(ItemController.class);

    @Autowired
    private ItemService itemService;

    @RequestMapping("/itemList")
    public String itemList() {
        return "itemList";
    }

    @RequestMapping("/getItemList")
    @ResponseBody
    public JSONObject getItemList(@RequestParam Map<String, Object> params) {
        int pageNum = Integer.parseInt((String) params.get("page"));
        int pageSize = Integer.parseInt((String) params.get("rows"));
        String sortName = (String) params.get("sort");
        String sortOrder = (String) params.get("order");
        PageHelper.startPage(pageNum, pageSize, sortName + " " + sortOrder);
        // 查詢指定頁的數據
        List<Map<String, Object>> mapList = itemService.getItemList();
        // 查詢記錄數
        int total = itemService.getItemTotal();
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("total", total);
        jsonObject.put("rows", mapList);
        return jsonObject;
    }

    @RequestMapping("/invoke")
    @ResponseBody
    public void invoke(@RequestParam Map<String, Object> params) {

    }

}