有没有办法用主网格的特定列启动子网格,还是可以移动子网格图标列位置?

时间:2014-12-15 13:32:06

标签: jqgrid

请参阅下面的jqgrid子网格图片,

enter image description here

问题1:默认情况下,我的子网格以父网格列开头" ID" (父网格的第一列),我们可以从父网格的第3列(联系人姓名)开始我的子网格吗?

问题2:或者,是否有机会在我父网格的第二列之后移动子网格图标(+)列,因此我的子网格将从我父网格的第三列开始?

请建议,谢谢!

1 个答案:

答案 0 :(得分:1)

标准子网格的行如下图所示

enter image description here

由三个部分组成,我用不同的颜色标记。相应的HTML结构如下图所示

enter image description here

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使用代码。结果如下图所示

enter image description here

您可以更改subGridRowExpanded内的子网格行的其他属性,以实现您的确切目标。