首页 > 代码库 > jqGrid实现虚拟滚动和合并单元格

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); }); }); }