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 ,注意看红色部分,一对一是正常的,但是有一对多的订单 ...
随机推荐
- maven配置spring mvc+hibernate+spring框架
作为一名刚出茅草屋的新手小白写的框架,仅适合新手小白借鉴,大神勿喷,谢谢...... 前天刚知道spring mvc这个框架现在也很流行,决定用它代替struts2来写我的毕业设计. ...作为一名新 ...
- ReferenceError: $ is not defined
蛋疼的问题,原因是jquery导入顺序不对,任何页面都必须把jquery的导入放在首位,js文件放在其次.
- X windows的底层实现机制
Qt在Linux上运行崩溃了,很可能的原因是对于X11机制的不了解.很可能是UI代码里面对窗口的操作不规范而导致Qt内部的BUG暴露出来.具体UI实现代码我也没有看.是别人维护的.打算今天去看下代码, ...
- setAdapter(adapter)空指针nullPointer 解决办法
setAdapter(adapter)空指针nullPointer 解决办法 (2014-06-13 10:01:23) 转载▼ 标签: 旅游 分类: Android开发 如果setAdapter报空 ...
- Dubbo、Zookeeper、SpringMVC的整合使用
互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,Dubbo是一个分布式服务框架,在这种情况下诞生的.现在核心业务抽取出来,作为独立的服务,使 ...
- 百度地图V1.5 LocalSearch增加浮动窗体的操作内容
1.初始化LocalSearch控件 LocalSearch = new BMap.LocalSearch(map, { renderOptions : { map : map, panel : & ...
- Remove Element 解答
Question Given an array and a value, remove all instances of that value in place and return the new ...
- MySQL无法重启问题解决Warning: World-writable config file ‘/etc/my.cnf’ is ignored
MySQL无法重启问题解决Warning: World-writable config file ‘/etc/my.cnf’ is ignored
- magento添加系统sections配置时应注意的事项
(1)只有在新增sections是需要增加对应的acl配置,这个配置可以放在config.xml中或者放在adminhtml.xml中 <adminhtml> <acl> &l ...
- SHDP--Working With HBase(一)之基本介绍
最近在做web项目使用到了Hadoop,HBase,在这里对Spring For Hadoop(SHDP)的使用做个总结,主要使用了SHDP中提供的一些封装好的HBase模块. Spring For ...