jqGrid实现虚拟滚动和合并单元格

如图：

关键点：
1.scroll: 1, //虚拟滚动，解决大数据一次性加载慢的问题，同时解决分页

2.function merge(names)//自定义函数

$(function () {
       //查询
       $("#querybtn").click(function () {
                var prm = {};
                $("#querytb td [name]").each(function (ind, o) {
                    prm[o.name] = $(o).val(); 
                });
                if ($("#jqgrid").data("jqgrid")) {//已经初始化
                    $("#jqgrid").jqGrid("setGridParam", { 
                        "postData": prm })
                    .trigger("reloadGrid");
                } else {
                    $("#jqgrid").jqGrid({
                        url: 'SCHandler.ashx?action=SCResult2',
                        caption: "点检结果",
                        datatype: "json",
                        pager: "#pager", postData: prm,
                        height: ($(window).height() - 210), 
                        colNames: ["rid", "系统", "设备名称", "部位", "项目", "点检内容", "点检时间", "点检结果", "结果说明", "处理方式", "处理结果", "点检人", "点检单位"],
                        colModel: [{ name: "rid", hidden: true, key: true },
                            { index: "系统", name: "系统", width: 80 },
                            { index: "设备名称", name: "设备名称", width: 80 },
                            { index: "部位", name: "部位", width: 80 },
                            { index: "项目", name: "项目", width: 80 },
                            { index: "点检内容", name: "点检内容", width: 80 },
                            { index: "点检时间", name: "点检时间", width: 100 },
                            { index: "点检结果", name: "点检结果", width: 60 },
                            { index: "结果说明", name: "结果说明" },
                            { index: "处理方式", name: "处理方式" },
                            { index: "处理结果", name: "处理结果" },
                            { index: "点检人", name: "点检人" },
                            { index: "点检单位", name: "点检单位", hidden: true }
                    ],
                        rowNum: 50, 
                        gridComplete: function () { merge(["系统", "设备名称", "部位", "项目","点检内容"]); },
                        cmTemplate: { editable: false, sortable: false, width: 80 }, scroll: 1, 
                        viewrecords: true, gridview: true
                    }).bindKeys().data("jqgrid", true);
                }
            });
        });
        function merge(names) {
            var trs = $("#jqgrid>tbody>tr:gt(0)");
            $.each(names, function (ind, name) {
                var bg = trs.eq(0).children("[aria-describedby='jqgrid_" + name + "']"),
                    index = bg.index(),
                    rowsp = 1;
                trs.slice(1).each(function (ind2, tr) {
                    var me = $(tr).children("td").eq(index);
                    if (bg.text() === me.text()) {
                        rowsp++;
                        me.hide();
                    } else {
                        bg.attr("rowspan", rowsp);
                        bg = me; 
                        rowsp = 1;
                    }
                    bg.attr("rowspan", rowsp);
                });
            });
        }
        

 

转载于:https://www.cnblogs.com/pw33/p/3897865.html