jgrid相关功能用法记录

1.获取行号
var ids = $gridList.jqGrid('getGridParam', 'selarrrow'); //多选,返回选中行号组字符 
var ids2 = $gridList.jqGrid('getGridParam', 'selrow'); //返回选中行号 

2.获取行数据
var ids = $gridList.jqGrid('getGridParam', 'selarrrow');
for (var i = 0; i < ids.length; i++) {
        var ret = $gridList.jqGrid('getRowData', ids[i]);
        alert(ret.ID);
}

3.单元格保存后改变单元格值:
afterSaveCell: function (rowid, cellname, value, iRow, iCol) {

                if (newDirtyJson[rowid]) {
                    newDirtyJson[rowid].push(cellname);
                } else {
                    var newDirtyArray = [];
                    newDirtyArray.push(cellname);
                    newDirtyJson[rowid] = newDirtyArray;
                }
                jQuery("#ConsGridDiv").jqGrid().setCell(rowid, 'SynStatus', 0);
                $("td[aria-describedby=ConsGridDiv_SynStatus]", this.rows[iRow]).addClass("dirty-cell");
            }

4.加底部统计栏:

(1)设置属性:
footerrow: true
userDataOnFooter: true2)gridComplete
gridComplete: function (){           
          jQuery("#BurntJqGrid-datagrid").footerData("set", {
                "WeightAfter": "<span style='color:red;float:right;'>合计</span>"
            });
            //底部合计行计算
            var rowNum = burntJqGrid.getAllRecords().length;
            if (rowNum > 0) {
                $(".ui-jqgrid-sdiv").show();
                var Percents = parseFloat($("#BurntJqGrid-datagrid").getCol("Percents", false, "sum") * 100 / rowNum).toFixed(1)+"%";
                jQuery("#BurntJqGrid-datagrid").footerData("set", { "Percents": "<span style='color:red;float:left'>" + Percents + "</span>" }); //将合计值显示出来
            } else {
                $(".ui-jqgrid-sdiv").hide();
            }

} 

效果图:

5.三级表头合并

需要插件配合:https://files.cnblogs.com/files/starksoft/jquery.jqGrid.groupHeader-0.2.1.js

//二级表头合并
    jQuery("#ActiveJqGrid-datagrid").jqGrid('setGroupHeaders', {
        useColSpanStyle: true,
        groupHeaders: [
                        { startColumnName: 'D7_1', numberOfColumns: 2, titleText: '7d' },
                        { startColumnName: 'D28_1', numberOfColumns: 2, titleText: '28d' },
                        { startColumnName: 'S7_1', numberOfColumns: 2, titleText: '7d' },
                        { startColumnName: 'S28_1', numberOfColumns: 2, titleText: '28d' }
            ]
    });
    //三级表头合并
    jQuery("#ActiveJqGrid-datagrid").jqGrid("setComplexGroupHeaders", {
        complexGroupHeaders: [
                              { startColumnName: 'D7_1', numberOfColumns: 4, titleText: '<em>对比胶砂</em>' },
                              { startColumnName: 'S7_1', numberOfColumns: 4, titleText: '试样胶砂' }
             ]
    });

 效果图:

posted @ 2017-02-14 09:31  StarkSoft  阅读(1281)  评论(0编辑  收藏  举报