jqgrid实现表头合并功能

简介: jqgrid实现表头合并功能

在使用jqgrid的过程中,难免要用到表头合并的功能,下面为大家提供一个简单的操作方式。

首先,jqgrid列表的使用与之前的无二。

$("#jqGrid").jqGrid({
         url: baseURL + 'user/list',
         datatype: "json",
         colModel: [
             {label: '姓名', name: 'username', index: 'username', width: 20},
             {label: '年龄', name: 'age', index: 'age', width: 20},
             {label: '身高', name: 'height', index: 'height', width: 20}
             // 省略其他列信息
         ],
         viewrecords: true,
         height: 385,
         rowNum: 10,
         rowList: [10, 30, 50],
         rownumbers: true,
         rownumWidth: 25,
         autowidth: true,
         multiselect: true,
         pager: "#jqGridPager",
         jsonReader: {
             root: "page.list",
             page: "page.currPage",
             total: "page.totalPage",
             records: "page.totalCount"
         },
         prmNames: {
             page: "page",
             rows: "limit",
             order: "order"
         },
         gridComplete: function () {
             //隐藏grid底部滚动条
             $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
         }
     });

上面是一个很常规的jqgrid的列表初始化话方法,现在有三列“姓名”、“年龄”、“身高”,那么此时如果想对这三列进行一个合并标题,再生成一个统称“个人信息”,那么该如何操作呢。

方法很简单,在上面这个方法初始化之后,再执行以下方法。

#jqGrid').setGroupHeaders(
    {
        useColSpanStyle: true,
        groupHeaders: [
            {"numberOfColumns": 3, "titleText": "个人信息", "startColumnName": "username"}
            // 此处省略其他列
        ]
    }
);

通过以上代码接口实现合并功能。其中numberOfColumns指定合并的列的数量,这里是合并3列。titleText指定合并之后的统称叫什么。startColumnName指的是从那一列开始合并,包含当前列。

目录
相关文章
|
JavaScript 前端开发 Java
72jqGrid 分组表头 - 有合并列的样式
72jqGrid 分组表头 - 有合并列的样式
58 0
|
JavaScript
jqgrid清空表格
jqgrid清空表格
53 0
|
2月前
|
JavaScript 前端开发
JavaScript合并网页表格中内容相同的相邻单元格
JavaScript合并网页表格中内容相同的相邻单元格
|
前端开发 JavaScript API
在 Vue3 + Element Plus 中生成动态表格,动态修改表格,多级表头,合并单元格
在 Vue 中,表格组件是使用频率及复杂度排名第一的组件,前端经常需要根据后台返回的数据动态渲染表格,比如动态表格如何生成,因为表格的列并不是固定的,在未知表格具体有哪些列的场景下,前端如何动态渲染表格数据。又或者需要把表格单元格进行合并处理,比如第一列是日期,需要把相同的日期进行合并,这样表格看起来会更加清晰。 本文手把手教你如何在 Vue3 + Element Plus 中创建表格、生成动态表格、创建动态多级表头、表格行合并、列合并等问题。如果你正在搭建后台管理工具,又不想处理前端问题,推荐使用卡拉云 ,卡拉云是新一代低代码开发工具,可一键接入常见数据库及 API ,无需懂前端,仅需拖拽即
3093 0
|
3月前
|
JavaScript 前端开发
基于Vue实现具有固定表头、合并单元格的Html表格
本文介绍了如何在Vue框架中创建一个具有固定表头和合并单元格功能的HTML表格,通过CSS的`position: sticky`属性实现表头固定,并通过设置`rowspan`和`colspan`属性来实现单元格合并。
77 0
基于Vue实现具有固定表头、合并单元格的Html表格
|
4月前
|
前端开发
Element UI 表格常用改造(表头添加注释、翻页连续序号【内含前端分页】)
Element UI 表格常用改造(表头添加注释、翻页连续序号【内含前端分页】)
193 0
|
6月前
Element多级表格合并处理
Element多级表格合并处理
30 0
elementui表格自定义表头的两种方法
这篇文章主要是总结了elementui-table表格怎么自定义表头,两种方式需求不一样,大家还有啥好的方法或者遇到的bug评论区留言大家一起解决。
964 0
|
6月前
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
|
JavaScript 前端开发 Java
71jqGrid 分组表头 - 没有合并列的样式
71jqGrid 分组表头 - 没有合并列的样式
31 0