请参阅下面的jqgrid子网格图片,
问题1:默认情况下,我的子网格以父网格列开头" ID" (父网格的第一列),我们可以从父网格的第3列(联系人姓名)开始我的子网格吗?
问题2:或者,是否有机会在我父网格的第二列之后移动子网格图标(+)列,因此我的子网格将从我父网格的第三列开始?
请建议,谢谢!
答案 0 :(得分:1)
标准子网格的行如下图所示
由三个部分组成,我用不同的颜色标记。相应的HTML结构如下图所示
jqGrid创建一个空的<div>
(请参阅标记为红色的<div class="tablediv" id="list_1"></div>
)并使用div的ID(上图中的“list_1”)调用subGridRowExpanded
回调作为值第一个参数。一个空的<table>
在div中添加一些唯一的id
属性,并从<table>
创建网格。典型的代码看起来像
subGridRowExpanded: function (subgridId, rowid) {
var $table = $("<table id='" + subgridId + "_t'></table>");
$("#" + subgridId).append($table);
$table.jqGrid({
// ...
});
}
您可以做的是在<div>
上设置一些CSS属性,将表格放在您需要的地方。例如,我在图片上使用的演示的父网格中有列"sequence"
。标题列标题的标识为gridId + "_sequence"
。因此,可以使用以下代码将padding-left
设置为跳过第一列:
subGridRowExpanded: function (subgridId, rowid) {
var $table = $("<table id='" + subgridId + "_t'></table>");
$("#" + subgridId).append($table)
// set padding-left to the outer width of the first column "sequence"
// of the parent grid
.css("padding-left", $("#" + this.id + "_sequence").outerWidth() + "px");
$table.jqGrid({
// ...
autowidth: true
});
}
使用padding-left
的优点:可以在子网格中使用autowidth: true
来调整子网格的大小以填充子网格行的右侧部分。
The demo使用代码。结果如下图所示
您可以更改subGridRowExpanded
内的子网格行的其他属性,以实现您的确切目标。