jqgrid滑动时,固定表头,并在右侧显示滚动条
时间: 2023-10-05 14:11:22 浏览: 178
要在 jqGrid 中实现固定表头并在右侧显示滚动条,可以使用以下步骤:
1. 将 jqGrid 的宽度设置为固定值,并将 `shrinkToFit` 属性设置为 `false`,以便允许水平滚动条出现。
2. 在 jqGrid 中启用 `scrollOffset` 属性,并将其设置为表头的高度,这样在滚动时表头将保持固定位置。
3. 在 jqGrid 中启用 `scroll` 属性,并将其设置为 `true`,以便允许垂直滚动条出现。
4. 使用 CSS 将表头固定在顶部位置,并在右侧添加一个滚动条。
下面是一个示例代码:
```javascript
$("#grid").jqGrid({
width: 800,
shrinkToFit: false,
scrollOffset: 30,
scroll: true,
// 其他 jqGrid 配置项
});
// CSS 样式
.ui-jqgrid .ui-jqgrid-hdiv { position: fixed; top: 0; z-index: 1000; }
.ui-jqgrid .ui-jqgrid-bdiv { overflow-y: scroll; overflow-x: hidden; }
.ui-jqgrid .ui-jqgrid-bdiv::-webkit-scrollbar { width: 8px; }
.ui-jqgrid .ui-jqgrid-bdiv::-webkit-scrollbar-track { background-color: #f1f1f1; }
.ui-jqgrid .ui-jqgrid-bdiv::-webkit-scrollbar-thumb { background-color: #888; }
```
其中,`scrollbar` 样式可以根据需要自定义。
阅读全文