JqGrid随笔

官网 http://guriddo.net/

所使用的版本信息

/*
* jqGrid 5.1.1
* Copyright (c) 2008, Tony Tomov, tony@trirand.com
* License: http://guriddo.net/?page_id=103334
*
* Modules: grid.base.js; jquery.fmatter.js; grid.common.js; grid.formedit.js; grid.filter.js; grid.inlinedit.js; grid.celledit.js; jqModal.js; jqDnR.js; grid.subgrid.js; grid.grouping.js; grid.treegrid.js; grid.pivot.js; grid.import.js; grid.utils.js; grid.jqueryui.js; jquery.sortable.js;
*/

1、多级表头 官网例子 http://www.guriddo.net/documentation/guriddo/javascript/user-guide/grouping/

$("#jqGrid").jqGrid('setGroupHeaders', {
    useColSpanStyle:true,// 是否合并单元格
    groupHeaders : [
        { "startColumnName":colNameA, "numberOfColumns":2, "titleText":'人数' }, //startColumnName：起始列的colName, numberOfColumns: 包含多少列， 
        { "startColumnName":colNameB, "numberOfColumns":4, "titleText":'占比' },
        { "startColumnName":colNameB, "numberOfColumns":5, "titleText":'过成' },
    ]
});

2、给表格添加隐藏的rowId行

{ label: "rowNum", name:"rowNum", width: 0, key: true, hidden: true},

3、给单元格添加背景色

{ label: '日期', name: 'date', width: 150, cellattr: this.fillLtvAndRetentionCellColor}

fillLtvAndRetentionCellColor: function(rowId, val, rawObject, cm, rdata){
            if(cm.name.indexOf("num") == 0){
                return "style='background:#ecf0f5'";
            }
            if(cm.name.indexOf("asd") == 0){
                return "style='background:#7bc0f2'";
            }
            if(cm.name.indexOf("efg.") == 0){
                return "style='background:#ffb980'";
            }
            return "";
        },

4、local模式 

local的col排序
{ label: '日期', name: 'ds', index: 'ds', width: 100, sorttype : "date", sortable: true},
{ label: '新注册', name: 'dnu', fixed:'true', width: 150, sorttype: "int"},

sorttype : "date", sortable: true -------  sorttype的类型有 date,int,double等
还可以用 sorttype: function(value){return value;}, 这种来自定义排序
这个是字段格式化的formatter: function(value, options, row)

jQuery.jgrid.gridUnload("jqGrid");//清除表格
    $("#jqGrid").jqGrid({
        data:dataList, //local数据
        scrollrows: true,
        shrinkToFit: false,
        datatype: "local", // local模式
        colModel: cols,//通过方法传递的参数，就不详细写了
        viewrecords: true,
        //height: 370,
        rowNum: 10,
        rowList : [10,30,50],
        rownumbers: false,
        rownumWidth: 60,
        autowidth: true,
        multiselect: false,
        width:$(window).width(),
        footerrow : true, //跟页脚数据相关的配置
        userDataOnFooter: true, //跟页脚数据相关的配置
        sortname: 'day',
        sortorder: 'desc',
        pager: "#jqGridPager",
        caption:"xxx",//表格的标题吧
        localReader : {
            total: function(object){  //分页,有多少页面
                let rowNum = $('#jqGrid').getGridParam('rowNum');
                return Math.ceil(totalCount/rowNum);
                },
            records: function(object){ return totalCount}, // 数据总条数
            userdata: function(object){ return summary},//跟页脚数据相关的配置，页脚数据
        },
        gridComplete:function(){
            // table字体水平居中
            $("th").css({"text-align" : "center" });
            $("td").css({"text-align" : "center" });
            
            //跟页脚数据相关的配置，属于优化加了个显示合计俩字，把原来的透明背景改了下
            let frozenEles = $('td[aria-describedby="jqGrid_day"]');
            let frozen_foot = frozenEles[frozenEles.length - 1];
            frozen_foot.innerHTML = "合计";
            frozen_foot.style.backgroundColor = "#fff";
            
        },
        //双击行时触发。rowid：当前行id；iRow：当前行索引位置；iCol：当前单元格位置索引；e:event对象
        ondblClickRow: function(rowid,iRow,iCol,e){
            //双击时候的操作
        }
    });
    $("#jqGrid").jqGrid("setFrozenColumns");//冻结列
　　 //还可以进行多级表头，具体看上面第一个示例
},