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

写这篇文章主要是总结下项目中实际使用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);
        jQuery(window).resize(function(){
            //jQuery("#gview_grid-table").height(jQuery(window).height()-190);
            //jQuery(".ui-jqgrid-bdiv").height(jQuery(window).height()-218);
        });
    }

    function alarmFormatter(cellvalue, options, rowdata)
    {
        if (cellvalue != "0")
            return '<img class="alarmimg" src="../Images/128x128/RedLight.png" alt="' + cellvalue + '" />';
        else
            return '<img class="alarmimg" src="../Images/128x128/GreenLight.png" alt="' + cellvalue + '" />';
    }

    function updatePagerIcons(table) {
        var replacement ={
            'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
            'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
            'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
            'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
        };
        $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
            var icon = $(this);
            var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

            if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
        })
    }

    function enableTooltips(table) {
        $('.navtable .ui-pg-button').tooltip({container: 'body'});
        $(table).find('.ui-pg-div').tooltip({container: 'body'});
    }

    function modifySize(){
        //jQuery("#gview_grid-table").height(jQuery(window).height()-190);
        //jQuery(".ui-jqgrid-bdiv").height(jQuery(window).height()-218);
    }

    $.fn.gGrid = function(options){
        //var drawHeight = jQuery(window).height()-218;
        var drawHeight = parseInt((this).css("height"))-140;
        if(drawHeight==-140){
            drawHeight =  jQuery(window).height()-218;
        }
        var drawRowNum = Math.floor(drawHeight/33);
        var options = $.extend(false,defaults,options);
        if(options.autoHeight){
            options.rowNum =  drawRowNum;
            options.height = drawHeight;
        }
        //return this.each(function(){
        var gridDefAtt = $(this).attr('data-definition');
        console.log(gridDefAtt);
        options.gridDefinitionUrl = (gridDefAtt!=null&&gridDefAtt!='')?gridDefAtt:options.gridDefinition;
        if(options.gridDefinitionUrl!=null&&options.gridDefinitionUrl!=''){

            $.ajax({
                url: options.gridDefinitionUrl,
                dataType: 'json',
                async : false,
                success: function (data) {
                    gridOptions = data;

                    if(options.url==null || options.url==""){
                        options.url  = data.baseUrl;
                    }
                    options.colNames = data.colNames;
                    options.colModel = data.colModel;

                    initGrid(options);

                    // 合并列头
                    if (data.setgroupHeaders != null)
                        grid.jqGrid('setGroupHeaders', data.setgroupHeaders);
                }
            });
            return grid;
        }
        //});
    };

    $.fn.getOptions = function(){
        return gridOptions;
    }

    $.fn.getGrid = function(){
        return grid;
    }

    $.fn.getDataToJson  = function(bh) {
        var rowData =grid.getRowData();
        var json="[";
        for(i=0;i<rowData.length;i++){
            if(i>0)
                json=json+",";
            json+="{\"glbm\":\""+rowData[i]["glbm"]+"\",";
            json+="\"djh\":\""+rowData[i]["djh"]+"\",";
            json+="\"dbh\":\""+rowData[i]["dbh"]+"\"}";
        }
        json+="]";
        return json;
    }

    $.fn.getCheckId  = function(bh) {
        var selectedId = grid.jqGrid("getGridParam", "selrow");
        var text="";
        var ids =grid.jqGrid('getGridParam','selarrrow');
        for (var i = 0; i < ids.length; i++) {
            var rowData = grid.jqGrid('getRowData', ids[i]);
            if (rowData[bh]==null || rowData[bh]==""){
                continue;
            }
            if(text=="")
                text = text +"'" + rowData[bh]+"'" ;
            else
                text = text +","+ "'" + rowData[bh]+"'" ;
        }
        return text;
    };

    $.fn.getSelectedData  = function(field) {
        var text="";
        var ids =grid.jqGrid('getGridParam','selarrrow');
        for (var i = 0; i < ids.length; i++) {
            var rowData = grid.jqGrid('getRowData', ids[i]);
            if (rowData[field]==null || rowData[field]==""){
                continue;
            }
            text+=rowData[field]+",";
        }
        return text;
    };

    $.fn.refreshGrid = function(data,page){
        var postData = grid.jqGrid("getGridParam", "postData");
        $.each(postData, function (k) {
            delete postData[k];
        });

        grid.jqGrid('setGridParam', {
            postData: data,
            page: page!=null?page:1
        }).trigger("reloadGrid");
    };

    $.fn.freshGrid = function(currentGrid,data,page){
        var postData = currentGrid.jqGrid("getGridParam", "postData");
        $.each(postData, function (k) {
            delete postData[k];
        });

        currentGrid.jqGrid('setGridParam', {
            postData: data,
            page: page!=null?page:1
        }).trigger("reloadGrid");
    };

    $.fn.reloadGrid = function(url,data,page){
        grid.jqGrid('setGridParam', {
            url:url,
            postData: data,
            page: page!=null?page:1
        }).trigger("reloadGrid");
    }

    // 合并单元格
    $.fn.mergeRowCell = function(){
        var colModel = gridOptions.colModel;
        for (var i = 0; i < colModel.length; i++) {
            if (colModel[i].mergeBy != null) {
                mergerCell(colModel[i].name, colModel[i].mergeBy);
            }
        }
    }

    function mergerCell (mergeName, byName) {
        //得到显示到界面的id集合
        var mya = grid.jqGrid('getDataIDs');
        //当前显示多少条
        var length = mya.length;
        for (var i = 0; i < length; i++) {
            //从上到下获取一条信息
            var before = grid.jqGrid('getRowData', mya[i]);
            //定义合并行数
            var rowSpanTaxCount = 1;
            for (j = i + 1; j <= length; j++) {
                //和上边的信息对比 如果值一样就合并行数+1 然后设置rowspan 让当前单元格隐藏
                var end = grid.jqGrid('getRowData', mya[j]);
                if (before[byName] == end[byName]) {
                    rowSpanTaxCount++;
                    grid.setCell(mya[j], mergeName, '', { display: 'none' });
                } else {
                    rowSpanTaxCount = 1;
                    break;
                }
                grid.setCell(mya[i], mergeName, '', null,{ rowspan: rowSpanTaxCount });
            }
        }
    }
})(jQuery);

html部分：

<div id="gGrid" data-definition=".json">
    <table id="grid-table"></table>
    <div id="grid-pager"></div>
</div>

data-definition属性值是json文件的地址，该json文件对应的是表格中的列，表格向后台请求的地址也在json文件中，为何要使用json文件加载，一开始我也不明白，实践后发现，使用json文件可以避免数据库字段发生变化的时候，需要改动的代码只有js代码，也就是所谓的前后端分离，下面看如何操作就懂了。

表格初始化：

$('#gGrid').gGrid({
    rownumbers: true,
    multiselect: true,
    rownumWidth: 40,
    caption:getCount(),
    gridComplete:function(){
        var allDatas =  $(this).jqGrid("getRowData");
        var ids = $(this).jqGrid("getDataIDs");
        for (var i = 0; i < ids.length; i++) {
            var rowData = $(this).jqGrid('getRowData', i + 1);   

          var col_a = "";                 

if(){

              col_a = '<div value="'+rowData.TDDJ_Q+'">'+tdjb[rowData.TDDJ_Q]+'</div>';

} $( this). jqGrid( 'setRowData' , ids[i] ,{col_A:col_a}) } }}) ;

json文件：

{   "colNames":["状态"],
    "colModel":[
        {"name":"col_A","index":"col_A","width":50}
    ],
    "baseUrl":""//请求地址
}

col_A是json中的列名，当列名和服务器返回的数据中的命名一样时，会自动映射赋值，这是普通情况，当服务器命名更改后，则可以通过更改json文件的colName即可，或者通过回调函数中setRowData方法指定，我们在实际业务中经常碰到需要将某一列超链接，或者加图标，当有这些定制化需求的时候，这样做就更显得灵活了，拼好html片段直接在回调中指定colName赋值，至此前端部分结束。

后端：主要使用spring data jpa 中的EntityManager ,在此不多赘述，网上有很多，https://www.cnblogs.com/hdwang/p/7843405.html ，这个博客关于spring data jpa分页查询总结的挺好，拿来用就好了。