有时,我们需要给jqgrid设置多表头信息,多表头区域会有行合并/列合并,如何实现?

1)通过jqgrid的 setGroupHeaders 方法来实现一个行的多表头,

2)如果有多行表头,需要设置多个 setGroupHeaders 方法

3)多行表头时,设置的 setGroupHeaders 方法的先后顺序就是多表头从上到下的显示顺序

4)setGroupHeaders 值的属性说明,如下表:

useColSpanStyle ture:是否自动向上合并没有多表头的列
groupHeaders->startColumnName 从哪个列开始合并(多表头行)
groupHeaders->numberOfColumns 合并几个单元格(多表头行)
groupHeaders->titleText 合并项的显示内容

参考代码如下(两行多表头):

            $('#jqGrid').setGroupHeaders(
{
useColSpanStyle: true,
groupHeaders: [
{ "numberOfColumns": 5, "titleText": "<a href='HtmlPage1.html'>big big big</a>", "startColumnName": "OrderID" }]
}); $('#jqGrid').setGroupHeaders(
{
useColSpanStyle: true,
groupHeaders: [
{ "numberOfColumns": 3, "titleText": "<a href='HtmlPage1.html'>Price</a>", "startColumnName": "OrderID" },
{ "numberOfColumns": 2, "titleText": "Secondary Details", "startColumnName": "Freight" }]
});

参考地址:

jqGrid表格插件实现多行表头的解决办法

jqgrid 设置多表头的更多相关文章

  1. Jqgrid入门-Jqgrid设置二级表头(六)

    上一章已经说明了Jqgrid结合Struts2+json展示数据,这一章主要探讨Jqgrid如何设置二级表头,类似这样的效果.如:           要实现这个功能,其实也不难.通过Jqgrid的s ...

  2. ASP设置动态表头

    /// <summary> /// 设置动态表头 /// </summary> /// <param name="sender"></pa ...

  3. Bootstrap Table踩坑——设置多级表头后只显示第一级表头问题解决办法

    今天设置了Bootstrap Table的复杂表头,设置了多级表头(两行列名),但是只能显示第一级表头(第一行的列名),第二级的表头被第一级的表头覆盖.但是我仿照其他网上的其他设置复杂表头例子都能正常 ...

  4. JqGrid 多行表头设置

    1.我想要统计的效果是这样的 2.只要在初始化表格中加上如下代码就可以了: jQuery("#tbAbroadStatisticByUnit").jqGrid('setGroupH ...

  5. jqgrid 设置冻结列

    有时,jqgrid表格的列非常多,而表格的宽度值是固定的,我们需要在表格底部出现滚动条,并且固定前面几个列作为数据参照项,如何实现? 需要用的jqgrid冻结列,步骤如下: 1)设置需要冻结的列属性, ...

  6. jqgrid 设置单元格编辑/不可编辑

    首先设置不可编辑,如下代码: $(', 'not-editable-cell'); 在单元格上设置一个'not-editable-cell'就可以了,如果需要设置为可编辑,那么可以使用下面的代码: f ...

  7. jqgrid设置单元格数据

    $("#gridid").jqGrid('setCell',rowid,icol,data); rowid为行ID,jqgrid内置的那个,从1开始 icol为列索引,从0开始, ...

  8. jqgrid 设置隔行换色

    有时,为美观效应,需要设置jqgrid隔行换色.jqgrid提供altRows属性来配置 启动隔行换色:altRows: true,//隔行换色 $("#filterGrid"). ...

  9. jqgrid 设置行编辑为本地端编辑状态

    有时,我们需要在jqgrid表格中做编辑操作,而jqgrid默认是启动了行保存连接到服务器更新.此时,如果没有指定editurl的有效url值时会报错 有时,我们需要将编辑完的表格数据一次性提交保存( ...

随机推荐

  1. PHP 绘制验证码

    使用PHP绘制验证码  可直接使用 // 验证码 <?php $checkCode = ""; for ($i=0; $i < 4; $i++) { // 十进制转换为 ...

  2. ionic3 下创建ionic1项目

    一 start命令 ionic start sdscapp --type=ionic1 ——添加平台命令 ionic cordova platform add android

  3. Android中使用Log4j及配置说明

    目前在进行Android开发时使用到了log4j,现在对其配置进行记录. 1. android-logging-log4j 下载地址 https://code.google.com/archive/p ...

  4. 安卓开发实用技巧:TextView预览

    背景: 使用TextView时,为了方便在开发工具中预览效果,需要在TextView中设置文字(如:android:text="Hello World"),但是等到后面提交时,为了 ...

  5. Hive分组取Top N

    Hive在0.11.0版本开始加入了row_number.rank.dense_rank分析函数,可以查询分组排序后的top值   说明: row_number() over ([partition ...

  6. Bootstrap源码分析系列之核心CSS

    本节主要介绍核心CSS,从整体架构中的7个Less文件对应的源码分别进行分析 scaffolding.less 这个文件编译后的css文件(886~989行)其作用就像定义全局样式. //调整css盒 ...

  7. 使用MonkeyTest对Android客户端进行压力测试

    目录 monkey命令简介 monkey命令参数说明 自动化实例 如何通过日志定位问题   1.monkey命令简介 Monkey是Android中的一个命令行工具,可以运行在模拟器里或实际设备中.它 ...

  8. ubuntu下给raspy pi2 编译qt5库

    交叉编译时,通常要准备mkspec, 参考: http://wiki.qt.io/Building_Qt_for_Embedded_Linux mkspec包含两个文件: qmake.conf- Th ...

  9. SqlServer 全文索引指令大全(转载)

    -- 创建测试表 -- DROP TABLE FullTextIndexing CREATE TABLE FullTextIndexing ( ID ,) NOT NULL, Sentence VAR ...

  10. 解决:Tomcat 局域网IP地址 访问不了

    解决:Tomcat 局域网IP地址 访问不了 2014年10月17日 ⁄ 综合 ⁄ 共 1000字 ⁄ 字号 小 中 大 ⁄ 评论关闭 如果连最基本的localhost:8080都失败的话. 原因就一 ...