jqGrid复杂表头及列拖拽后列错位问题_jqgrid setgroupheaders-CSDN博客

本文链接：https://blog.csdn.net/2403_86878632/article/details/145985220

1.复杂表头[header grouping]

复杂表头是指不只有一行表头，包含嵌套表头

示例：

使用方法：

 $("#jqGrid").jqGrid('setGroupHeaders', {
   useColSpanStyle:false,
   groupHeaders : [
     { "startColumnName":'OrderID', "numberOfColumns":2, "titleText":'Order Info' },
     { "startColumnName":'ShipName', "numberOfColumns":3, "titleText":'Shipping Details' }
   ]
 })

参数说明：

参数	类型	描述	默认值
useColSpanStyle	boolean	定义没有分组的列表头上是否增加一个空白的行， false添加空白行，否则此列的表头作为一个整体(不是group的表头是否合并为一行)	false
groupHeaders	array	数组，配置页头分组显示的内容和规则，可用值如下表如下所示	empty

配置	类型	描述
startColumnName	string	colModel中的name值，页头分组开始的列
numberOfColumns	integer	页头分组的列数。包含startColumnName配置的列。如果遇到隐藏的列，不包含此列列头，但是还是计算到总数里面
titleText	string	页头分组显示的内容，可以包含html标签

2.拖拽后列错位问题

含有复杂表头，拖拽后表头与数据列错开5px,

方法一：修改源码(不推荐)

 6013行  $firstRow.find('th').eq(idx).width(nw-5px);

有可能会出现其他不可预测的问题

产生5px错位的根本原因：盒模型

v4.7版本(免费版)的源码中给拖拽后的列头赋值时采用了js的width方法，该方法在设置宽度时不包含padding、border等样式产生的宽度，所以导致原生css所设置的padding：0 2px，占据了4px的宽度，border-right占据了1px的宽度，多出了5px的错位。只需在css中做更改即可修复错位的bug。

方法二：修改css样式

.ui-jqgrid .ui-jqgrid-htable th {
     // padding: 0 2px; 源代码
        padding: 0 !important;// 修改后
 }
 .ui-first-th-ltr {
     // border-right: 1px solid; 源代码
        border-right: unset; // 修改后
 }

最新的版本则不存在这种问题，因为它使用了style的width样式进行修改宽度