有什么方法可以从主网格的特定列开始子网格，还是可以移动子网格图标列的位置? [英] Is there any way to start subgrid with particular column of main grid or can we shift subgrid icon column postion?

问题描述

请查看我下面的jqgrid子网格图像，

Please see my below jqgrid subgrid image,

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

Question 1 : By default, my sub grid start with parent grid column "ID" (first column of parent grid), Can we start my sub grid from 3rd column of my parent grid (Contact Name)?

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

Question 2 : Or, Is there any chance to move sub grid icon (+) column after 2nd column of my parent grid, hence my sub grid will start with 3rd column of my parent grid?

请提出建议，谢谢！

推荐答案

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

The row with the standard subgrid like on the picture below

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

consist from three parts which I marked in different colors. The corresponding HTML structure looks like on the next picture

jqGrid创建一个空的<div>(请参见用红色标记的<div class="tablediv" id="list_1"></div>)，并使用div的ID(上图为"list_1")调用subGridRowExpanded回调作为第一个参数的值.一个人将一个空的<table>放置在div中，并带有一些唯一的id属性，并根据<table>创建网格.典型的代码如下

jqGrid creates an empty <div> (see <div class="tablediv" id="list_1"></div> marked in red) and calls subGridRowExpanded callback with the id of the div ("list_1" on the picture above) as the value of the first parameter. One places an empty <table> with some unique id attribute in the div with and creates grid from the <table>. The typical code looks like

subGridRowExpanded: function (subgridId, rowid) {
    var $table = $("<table id='" + subgridId + "_t'></table>");
    $("#" + subgridId).append($table);
    $table.jqGrid({
        // ...
    });
}

您可以做的是在<div>上设置一些CSS属性，以将表放在需要的地方.例如，我在图片上使用的演示的父网格中有列"sequence".标头列的标头具有gridId + "_sequence" id.因此，可以使用以下代码将padding-left设置为跳过第一列:

What you can to do is to set some CSS attributes on the <div> to place the table on the place where you need it. For example I have the column "sequence" in the parent grid of the demo used on the pictures. The header of the column of the header have gridId + "_sequence" id. So one can use the following code to set padding-left to skip the first column:

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 advantage of the usage padding-left: one can use autowidth: true in the subgrid to resize the subgrid to fill the right part of the row of subgrid.

演示使用该代码.结果如下图所示

The demo uses the code. The results looks like on the picture below

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

You can change other attributes of subgrid row inside of subGridRowExpanded to achieve your exact goals.

这篇关于有什么方法可以从主网格的特定列开始子网格，还是可以移动子网格图标列的位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！