jqGrid实现二级表头冻结列
时间: 2024-09-23 10:02:21 浏览: 51
要实现jqGrid的二级表头冻结列,首先需要设置`colModel`,其中包含`冻顶格`(` frozenTitle`)属性来指定冻结的标题。以下是如何设置二级表头的冻结列示例:
1. 定义`colModel`时,对于二级表头的列,添加`frozen: true`,这会使其在视图中固定不变。例如:
```json
// 假设您有这样一组列定义
var colModel = [
// 一级表头
{
name: 'category1',
subgrid: true,
frozen: false, // 这里是顶级表头,不冻结
},
// 二级表头,第一个冻结
{
name: 'subcategory1_1',
frozen: true,
... // 其他二级列属性
},
{
name: 'subcategory1_2',
frozen: true,
... // 同上
},
// ...
];
```
2. 对于那些不是冻结列但需要与冻结列关联的二级列,设置它们的`width`,以确保冻结列与非冻结列之间的间距一致。
3. 使用`setGroupHeaders`设置多表头,包括二级表头,传递一个包含`rowspan`和`colspan`信息的对象数组给`groupHeaders`参数。如果需要冻结,这些设置应该只针对一级和部分二级表头。
```javascript
// 二级表头的冻结设置
var subheaders = [
{ // 假设二级表头的第一列和第二列需要冻结
startColumnName: 'subcategory1_1',
numberOfColumns: 2,
frozen: true,
... // 设置其他二级表头属性
},
// ... 更多二级表头配置
];
$("#j_tableList").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders: [topname, subheaders] // 注意顺序,先顶级后二级
});
```
阅读全文