jqgrid 表格插件实现多行表头

矫情吗；* 2022-06-14 01:10 373阅读 0赞

jqgrid

插件默认为2行

修改后可编程多行

修改jquery.jqGrid.src.js文件

if (skip === 0) {
       if (o.useColSpanStyle) {
     
    // expand the header height to two rows 
          // $th.attr("rowspan", "2");
          //console.log($th);
          //console.log($th.parent());
    
          // expand the header height to many rows
          var rowspanlen = $th.parent().siblings('tr').length;
          //console.log("rowspanlen: " + rowspanlen);
          if(rowspanlen == 0){
             rowspanlen = 2;
          } else {
             rowspanlen++;
          }
          $th.attr("rowspan", rowspanlen);
       } else {
          $('<th>', {role: "columnheader"})
             .addClass("ui-state-default ui-th-column-header ui-th-"+ts.p.direction)
             .css({
      "display": cmi.hidden ? 'none' : '', 'border-top': '0 none'})
             .insertBefore($th);
          $tr.append(th);
       }
    } else {

var groupHead = [];
    $.each(areaobj,function(i,v){
        var sc = {
            startColumnName: v.id.trim()+'sampleCount',
            numberOfColumns: 6,
            titleText: v.planName.trim()
        };
        groupHead.push(sc);
    });
    $("#tabGrid").jqGrid('setGroupHeaders', {
        useColSpanStyle : true, // 没有表头的列是否与表头列位置的空单元格合并
        groupHeaders :  groupHead
    });
    groupHead = [];
    $.each(areaobj,function(i,v){
        var sc = {
            startColumnName: v.id.trim()+'sampleCount',
            numberOfColumns: 6,
            titleText: v.projectName.trim()
        };
        groupHead.push(sc);
    });
    $("#tabGrid").jqGrid('setGroupHeaders', {
        useColSpanStyle : true, // 没有表头的列是否与表头列位置的空单元格合并
        groupHeaders :  groupHead
    });
    
    groupHead = [];
    $.each(areaobj,function(i,v){
        var sc = {
            startColumnName: v.id.trim()+'sampleCount',
            numberOfColumns: 6,
            titleText: v.footTypeName.trim()
        };
        groupHead.push(sc);
    });
    $("#tabGrid").jqGrid('setGroupHeaders', {
        useColSpanStyle : true, // 没有表头的列是否与表头列位置的空单元格合并
        groupHeaders :  groupHead
    });

![Center][]

[Center]: /images/20220614/617972e194784a288aa090af3be3eb2e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，373人围观）

还没有评论，来说两句吧...

相关阅读

相关 jqGrid 实现表格导出Excel功能

1、实现代码 //读取表格内容 function jqgridToExcel1(id, fileName) { var Table = $("

叁歲伎倆/ 2023年10月05日 10:45/ 0 赞/ 27 阅读

相关 jqgrid：表头换行显示+单元格内容过长换行显示

1.添加自定义的css文件，css内容如下 / 表头换行显示 / th.ui-th-column div{ white-space:normal !

系统管理员/ 2022年11月20日 08:22/ 0 赞/ 314 阅读

相关 jqgrid demo java_jQuery学习之：jqGrid表格插件——第一个Demo

![79b4047e782b7830d30e7a3b2ac187e1.png][] 列出关键代码： html代码: ... 因为jqGrid3.6集成了jQuery U

忘是亡心i/ 2022年11月02日 13:16/ 0 赞/ 179 阅读

相关 jQuery学习之：jqGrid表格插件——参数配置

由于jqGrid功能强大，配置比较复杂，在第一个例子中，对于jqGrid的配置参数没有进行什么解释。从现在开始，会陆续介绍jqGrid的参数。这些参数的详细介绍请查看官方文档

拼搏现实的明天。/ 2022年09月17日 11:28/ 0 赞/ 206 阅读

相关 jQuery学习之：jqGrid表格插件——从servlet获得数据

在我的jqGrid第一个demo中，没有涉及到任何与服务端的交互：数据是从自己定义的一个固定数组中得到的。当然，实际应用中不可能会这么做。在 jqGrid官方网站上提供的dem

分手后的思念是犯贱/ 2022年09月17日 11:27/ 0 赞/ 177 阅读

相关 DevExpress中使用BandGridView实现复合（多行）表头、设置多行表头背景颜色、表格边框颜色

一、实现效果 ![20211012132412549.gif][] 二、实现方法 2.1、创建复合表头 ①将创建的GridControl下的GirdVie

「爱情、让人受尽委屈。」/ 2022年09月15日 12:45/ 0 赞/ 575 阅读

相关 jqgrid插件在谷歌上不显示表格，不兼容

jqgrid是兼容谷歌，火狐，ie6到ie11的，但是在改进项目的过程中发现表格在谷歌上不显示经测试，是由于jquery的js文件引入问题 jquery引入j

た入场券/ 2022年07月12日 06:50/ 0 赞/ 272 阅读

相关 jqgrid表格下拉搜索多选框优化—使用select下拉多选插件

jqgrid表格插件应该是表格插件中最强大吧，最近项目需要使用jqgrid但又要根据项目需求进行一些私人订制，还好jqgrid的源码写清晰易懂。 jqgrid有个下拉搜索的功

本是古典何须时尚/ 2022年06月15日 01:49/ 0 赞/ 1651 阅读

相关 jqgrid 表格插件实现多行表头

jqgrid 插件默认为2行修改后可编程多行修改jquery.jqGrid.src.js文件 if (skip === 0) {

矫情吗；*/ 2022年06月14日 01:10/ 0 赞/ 374 阅读

相关 element-ui表格多级表头、表头换行

效果图 ![在这里插入图片描述][2021060117264520.gif_pic_center] 安装Element-ui npm i element-

迈不过友情╰/ 2021年09月08日 03:16/ 0 赞/ 1815 阅读