如何为jqGrid的分组表头单元格添加自定义CSS类？

嗨，这个问题我之前也碰到过，jqGrid的setGroupHeaders方法本身确实没直接提供给分组表头单元格加自定义类的选项，不过咱们可以用两种简单的方式搞定：

方法一：通过分组标题文本定位（简单直观） #

在你执行完setGroupHeaders设置分组表头之后，直接用jQuery选择器找到对应标题的表头单元格，然后添加你的mClass类：

// 先设置分组表头
$("#datagrid").jqGrid('setGroupHeaders', { 
    useColSpanStyle: true, 
    groupHeaders:[{
        startColumnName: 'abc', 
        numberOfColumns: 11, 
        titleText: 'Group'
    }] 
});

// 定位分组表头单元格并添加类
$("#datagrid thead tr.ui-jqgrid-labels + tr th:contains('Group')").addClass('mClass');

解释一下：jqGrid生成分组表头时，会在原始表头行（带有ui-jqgrid-labels类的<tr>）后面新增一行专门放分组表头，所以用tr.ui-jqgrid-labels + tr可以精准选中这一行，再通过:contains('Group')筛选出标题为Group的单元格。

方法二：通过起始列索引定位（更可靠） #

如果你的表格里有重复的标题文本，方法一可能会出错，这时候可以通过起始列的索引来定位，更稳妥：

// 先设置分组表头
$("#datagrid").jqGrid('setGroupHeaders', { 
    useColSpanStyle: true, 
    groupHeaders:[{
        startColumnName: 'abc', 
        numberOfColumns: 11, 
        titleText: 'Group'
    }] 
});

// 获取"abc"列在colModel中的索引
var colIndex = $("#datagrid").jqGrid('getGridParam', 'colModel').findIndex(col => col.name === 'abc');

// 定位对应分组表头单元格并添加类
$("#datagrid thead tr.ui-jqgrid-labels + tr th").eq(colIndex).addClass('mClass');

小提醒：修正你的CSS类 #

另外注意一下，你的CSS里写的font-color是无效的，CSS中设置文字颜色的属性是color，所以要改成这样：

.mClass{ 
    color: red; /* 替换font-color为color */
    text-align: center; 
    /* 其他样式 */
}

内容的提问来源于stack exchange，提问作者Radhika Kulkarni