jqGrid v5.3.0（Bootstrap样式）子网格无单元格边框，求配置选项

我之前也碰到过类似的问题，jqGrid的bootstrap风格子网格默认确实容易出现没有单元格边框的情况，而且官方文档里确实没有专门的配置项来直接开启这个。不过有几个实用的解决方案：

1. 自定义CSS样式（最直接有效） #

子网格的表格带有特定的类名，你可以通过CSS强制为单元格添加边框，适配bootstrap的风格：

/* 给子网格的数据单元格添加边框 */
.ui-jqgrid .ui-jqgrid-bdiv .ui-subgrid td {
    border: 1px solid #dee2e6 !important; /* 复用bootstrap默认边框色 */
}
/* 可选：给子网格表头单元格也加上边框 */
.ui-jqgrid .ui-subgrid th {
    border: 1px solid #dee2e6 !important;
}

这里用!important是为了确保样式能覆盖jqGrid和bootstrap的默认规则，保证生效。

2. 初始化子网格时复用bootstrap自带类 #

在subGridRowExpanded方法创建子网格后，直接给子网格表格添加bootstrap的table-bordered类，这个类本来就会给所有单元格加上边框，完全贴合你的styleUI配置：

function subGridRowExpanded(subgrid_id, row_id) {
    // 你的子网格初始化逻辑...
    // 找到子网格表格并添加bootstrap边框类
    $("#" + subgrid_id).find("table").addClass("table table-bordered");
}

这种方法不用自己写CSS，直接复用框架样式，省心又统一。

3. 排查样式冲突 #

有时候可能是你项目里的其他自定义样式干扰了子网格的边框显示，或者jqGrid的bootstrap主题文件引入不完整。可以检查一下页面里的样式优先级，确认没有其他规则覆盖了子网格单元格的边框属性。

总的来说，前两种方法是最常用的，尤其是第二种，完全契合你用bootstrap风格的需求，能快速解决问题。

内容的提问来源于stack exchange，提问作者Sean Ad