jqGrid二次封装结合spring data jpa 分页查询

最新推荐文章于 2019-04-25 15:08:40 发布

原创

最新推荐文章于 2019-04-25 15:08:40 发布 · 780 阅读

1 ·

CC 4.0 BY-SA版权

写这篇文章主要是总结下项目中实际使用jqGrid的心得，文章思路主要分为两部分前端分页展示和后端分页查询。

jqGrid首先需要的是官方的js，我们在项目中是进行了二次封装，为了保持整个项目的表格统一，快速开发。

代码：

前端：

二次封装部分：（贴出来是为了方便像我一样的懒人，有些定制化的东西，可以参照jqGrid官方api在这个js里面加或者改或者可以选择不用，哈哈哈哈）

/**
 * 封装了jqGrid
 * colModel自定义参数说明：
 * 属性：mergeBy；值：列名；说明：该属性表示列值需要合并，合并参照属性值对应的列值
 * 属性：needExport；值：ture或者false；说明：字段是否需要导出，默认隐藏字段不导出，显示字段导出
 * option属性说明：
 * 属性：setgroupHeaders；说明：设置二级表头，具体参照jqGrid的标准配置方法
 */
(function($){
    var defaults={
        grid_selector:'#grid-table',
        datatype:'json',
        rowNum:20,
        height:400,
        autoHeight:true,
        datatype: "json",
        viewrecords: true,
        mtype:'POST',
        altRows: true,
        autowidth: true ,
        shrinkToFit: false,
        del: false,
        asdd: false,
        edit: false,
        search: false,
        pager: '#grid-pager',
        jsonReader: {
            root: "content",
            total: "totalPages",
            page: "number",
            records: "totalElements",
            repeatitems: false

        },
        loadComplete: function () {
            var table = this;
            setTimeout(function () {
                updatePagerIcons(table);
                enableTooltips(table);
            }, 0);
        },
        multiselect: false,
        onSelectRow: function (rowId, status, e) {

            var rowData = $(this).jqGrid('getRowData', rowId);
        }
    };

    var grid, gridOptions;

    function afterCompleteFunction(){
//获取列表数据
        var rowDatas = grid.jqGrid('getAllRowDatas');
        for(i=0;i<rowDatas.length;i++){
            var rowData = rowDatas[i];
            if(rowData.recVer=='1'){
//获取每行下的TD更改CSS
//第一种写法
                //$("#"+rowData.crmCustContractId).find("td").css("background-color", "pink");
//第2种写法
                $("#"+rowData.crmCustContractId + " td").css("background-color","pink");
//alert($("#"+rowData.crmCustContractId).find("td")[0]);
            }
        }
        return true;
    }

    function initGrid(options) {
        grid=jQuery(options.grid_selector).jqGrid(options);