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实现虚拟滚动和合并单元格的更多相关文章
- jqGrid合并单元格
两个参数 /**合并单元格:合并指定 gridName表格的NoName 列,合并的标准是参考CellName+CellNameTwo列内单元格的值. * gridName :表格名称 * NoNam ...
- 【表格设置】HTML中合并单元格,对列组合应用样式,适应各浏览器的内容换行
1.常用表格标签 普通 <table> | <tr> | | <th ...
- Qt高仿Excel表格组件-支持冻结列、冻结行、内容自适应和合并单元格
目录 一.概述 二.效果展示 三.实现思路 1.冻结行.冻结列 2.行高自适应 3.蚂蚁线 四.测试代码 1.添加表格数据 2.设置冻结行.列 3.行高.列宽 4.单元格背景色 5.单元格文字 6.其 ...
- C# 获取Excel中的合并单元格
C# 获取Excel中的合并单元格 我们在制作表格时,有时经常需要合并及取消合并一些单元格.在取消合并单元格时需要逐个查找及取消,比较麻烦.这里分享一个简单的方法来识别Excel中的合并单元格,识别这 ...
- jquery操作表格 合并单元格
jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...
- NPOI操作EXCEL(五)——含合并单元格复杂表头的EXCEL解析
我们在第三篇文章中谈到了那些非常反人类的excel模板,博主为了养家糊口,也玩命做出了相应的解析方法... 我们先来看看第一类复杂表头: ...... 博主称这类excel模板为略复杂表头模板(蓝色部 ...
- poi获取合并单元格内的第一行第一列的值
当读取如图所示的excel时,显示为第1行 第1列 的内容是:合并单元格 其它在合并单元格区域内的单元格不显示 示例代码如下: import java.io.FileInputStream; impo ...
- Repeater多列分别合并单元格
GridView.Repeater合并单元格可以参考http://www.cnblogs.com/zhmore/archive/2009/04/22/1440979.html,但是原文例子是合并一列的 ...
- Aspose.Cells 首次使用,用到模版填充数据,合并单元格,换行
Aspose.Cells 首次使用,用到模版填充数据,合并单元格,换行 模版格式,图格式是最简单的格式,但实际效果不是这种,实际效果图如图2 图2 ,注意看红色部分,一对一是正常的,但是有一对多的订单 ...
随机推荐
- (转) 学习C++ -> 向量(vector)
vector是向量类型,它是一种对象实体,具有值,所以可以看作是变量. 它可以容纳许多其他类型的相同实体,如若干个整数,所以称其为容器. vector类与一般的Array类的区别在于: 1 ...
- hdu1466 计算直线的交点数
题意: 平面上有n条直线,且无三线共点,问这些直线能有多少种不同交点数. 比如,如果n=2,则可能的交点数量为0(平行)或者1(不平行). 分析: DP 设状态:f[i][j]表示i条直线能否产生j个 ...
- 给Array添加删除重复元素函数
给Array本地对象增加一个原型方法,它用于删除数组中重复的元素(可能有多个重复), 返回值是一个包含被删除的重复条目的新数组. Array.prototype.distinct = function ...
- Bootstrap3 formテキストフィールド横幅の指定の仕方
Bootstrap3を使ってて.フォームの横幅を変えたいなって時ありませんか??Bootstrap3のフォームの横幅のデフォルトはwidth:100%で設定されています.ですので.普通にフォームを使用 ...
- Constructing Roads(1102 最小生成树 prim)
Constructing Roads Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- windows环境下搭建Cocos2d-X开发环境
最近终于有时间可心搞搞自己的东西了,呵呵,那就开始做个手机小游戏给孩子玩吧. 首先必须选定开发的框架,移动终端开源的游戏框架貌似不多,找来找去也就这个了,名字简单Cocos2d-X,是Cocos2d国 ...
- C# Stopwatch类_性能_时间计时器
在研究性能的时候,完全可以使用Stopwatch计时器计算一项技术的效率.但是有时想知道某想技术的性能的时候,又常常想不起可以运用Stopwatch这个东西,太可悲了. 属性: Elapsed 获取当 ...
- 3 x 8 = 23(火了)
颜回爱学习,德性又好,是孔子的得意门生.一天,颜回去街上办事,见一家布店前围满了人.他上前一问,才知道是买布的跟卖布的发生了纠纷. 只听买布的大嚷大叫:「三八就是二十三,你为啥要我二十四个钱?」颜回走 ...
- Python标准库:内置函数classmethod(function)
把类函数当作类的一个方法返回. 类方法第一个參数是指明类,跟类中函数一样,第一个參数是指明类实例. 类方法修饰符採用以下的格式来使用: class C: @classmethod def f(cls, ...
- Web Service中的XFire 传输List 自定义对象.
我把这个创建的步骤和代码的贴出来,. 首先新建一个工程,取名就随便点啦..MyWebService,然后复制jar包到lib目录下, 创建包,建立接口..写一个javaBean的类, 以下是一个简单的 ...