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

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

时间: 2024-10-25 09:51:40

jqGrid实现虚拟滚动和合并单元格的相关文章

Datatables js 复杂表头 合并单元格

x →Datatables官网← x 项目中用到的Table都是用Datatables插件来搞得: 以前都是生成一般性的table: 近期要生成一些复杂表头,合并单元格之类的: 研究了一下. x 去官网上也查到了[复杂表头(rowspan 和 colspan)(Complex headers (rowspan and colspan))],[复杂表头], 但是只是html代码,蛋疼啊... 后来看到了[创建行回调(Row created callback)]哪里的时候 ,豁然开朗!!!   先上

DataGrid合并单元格(wpf)

在网上搜索wpf合并单元格,一直没搜索到,没办法,只能自己想办法搞定了.其实就是DataGrid套DataGrid,为了方便支持Column拖动,在合并的DataGridColumn那一列的Header也放一个DataGrid,但是合并的这一个连续列中只支持一列的拖动,效果如下,上图 代码如下 首先定义两个模板,一个用于合并的Header显示 <DataTemplate x:Key="MergeHeader">             <DataGrid Horizo

jQuery_easyUI 合并单元格 (DataGrid 数据表格)

<table id="dg" style="height:350px;z-index:-5555; " class="easyui-datagrid" rownumbers="true" data-options="fitColumns: true, iconCls: 'icon-edit', scrollbarSize:0, multiSort:true, remoteSort:true, paginatio

【记录】解析具有合并单元格的Excel

最近公司让做各种数据表格的导入导出,就涉及到电子表格的解析,做了这么多天总结一下心得. 工具:NOPI 语言:C# 目的:因为涉及到导入到数据库,具有合并单元格的多行必然要拆分,而NPOI自动解析的时候拆分单元格除第一个单元格外其余值都是空,对于列头有合并项目的,数据库设计一般才有合并单元格下面的最小列单元作为数据库字段.于是希望达到这样一个效果.于是有了一个思路就是把读入的Excel复制到新建的Excel,然后再去读新的Excel.总体思路就是把合并单元格所包含的所有最小单元格的值都设置成合并

devexpress实现单元格合并以及依据条件合并单元格

1.devexpress实现单元格合并非常的简单,只要设置属性[AllowCellMerge=True]就可以了,实现效果如下图: 2.但是在具体要求中并非需要所有的相同单元格都合并,可能需要其他的条件来控制合并.这个时候我们就需要在事件gridView1_CellMerge中来控制了.下图为根据最后一列判断是否合并单元格的效果图(其中第四列设置为不合并<非必需>,这里只是为了达到一个比较效果.). 3.重要代码: int row1 = e.RowHandle1; int row2 = e.R

前端页面表格实现合并单元格

做报表,查询的时候,经常用到表格. 页面展示多条数据时,时常表格的第一列都是相同的,所以合并单元格,让表格看起来更直观. 写这个函数,其它js里面直接调用unionTab (tb,collength);其中第一个参数tb为表格ID,第二个参数为你想要进行单元格合并的表格列数. 缺点:只能实现前N列,不能实现某一列实现合并. /**/ window.unionTab = function (tb, colLength) { var id = tb; tb = $("#" + tb).ge

Extjs3.4 合并单元格

Ext3.4合并单元格 表格上添加grid-row-span样式 列Renderer绑定 预览效果 样式: 代码: 原文:http://www.sencha.com/forum/showthread.php?103133-GridPanel-row-spanning-%28well-sort-of...%29

DevExpress XtraGrid网格控件示例六:自定义合并单元格

假设 "Order Date" 列中包含日期/时间值.如果视图的GridOptionsView.AllowCellMerge选项设置为true,若相邻两个单元格值是日期/时间值的话,这两个相邻单元格便会合并.下面的代码介绍了如何合并例单元格的日期部分,要覆盖默认的单元格合并机制,需要处理一下GridView.CellMerge事件. C# using DevExpress.XtraGrid.Views.Grid; // ... private void gridView1_CellMe

easyui datagrid 合并单元格

整理以前做的东西,这个合并单元格的问题再新浪博客也写过了..... 下面这段代码是列表数据 //载入排放系数管理报表数据 function LoadEmissionReportData() { //获取计算ID var CountID = getUrlParam("CountID"); $.ajax({ type: "POST", url: "../Ashx/GetGasInventoryListInfo.ashx?type=getParamReport&