jqgrid 更改子网格的位置或将子网格图标添加到自定义列而不是其他任何地方？

Question

我是 jqgrid 的新手。我想创建一个带有子网格的 jqgrid，我从 trirand.com 获得了代码。但在示例中，显示子行或子网格的子网格图标默认位于所有行的第 1 位。

我们如何将图标的位置更改为任何其他列，以使列数据文本和 (+) 图标位于表格的同一单元格中。由于我的数据是 JSON 格式，并且图标位置要求可以更改。点击后我需要显示相关的子网格。

Answer 1

解决方案取决于您使用的 jqGrid 的 version 和 jqGrid 的 fork。 Tony Tomov 开发商业 Guriddo jqGrid JS，我开发 free jqGrid，完全免费提供。

我在免费的 jqGrid 分支中重写了 jqGrid 的许多旧代码。功能之一：可以将"subgrid" 列移动到网格中的任何其他位置。只需使用remapColumns 或更好的新remapColumnsByName 方法对列进行重新排序。可以跳过remapColumnsByName 的最后一列，这些位置不会改变或跳过第一个标准 列，如"rn" 列，在那里可以看到行号（如果选项@987654334 @ 用来）。演示 https://jsfiddle.net/OlegKi/o1L8k2k6/ 使用以下调用

.jqGrid("remapColumnsByName", ["name", "invdate", "subgrid"], true);

将"subgrid" 列移动到"name" 和"invdate" 列之后。人们会看到类似的结果

如果您需要将“+”/“-”图标放在另一列内，那么您应该首先使用自定义格式化程序将图标放在列内，然后您可以使用 beforeSelectRow 来检测列内的点击。此外，您可以使用.jqGrid("hideCol", "subgrid") 隐藏标准子网格列。自定义格式化程序的代码可以是，例如，

formatter: function (cellValue) {
    // place the icon using Font Awesome icons (http://fontawesome.io/)
    // the the original data itself. One should encode the data
    // with respect of $.jgrid.htmlEncode for example to be sure that
    // ANY data could be correctly displayed in the column (like ' symbol)
    return "<span class='mysubgrid fa fa-fw fa-plus'></span>" +
        "&nbsp;" + $.jgrid.htmlEncode(cellValue);
}

演示https://jsfiddle.net/OlegKi/o1L8k2k6/2/另外使用beforeSelectRow的以下代码来处理打开/关闭子网格

beforeSelectRow: function (rowid, e) {
    var $target = $(e.target), $subgridTd;
    if ($target.hasClass("mysubgrid")) {
        $subgridTd = $target.closest("tr.jqgrow>td")
            .siblings("td")
            .filter(".ui-sgcollapsed");

        // simulate opening/closing of the subgrid
        $target.removeClass("fa-minus fa-plus"); // remove both classes
        $target.addClass(
            $subgridTd.hasClass("sgexpanded") ?
                "fa-plus" :
                "fa-minus"
        );
        // simulate click on the original subgrid button
        $subgridTd.find(".sgbutton").click();
    }
    return true; // allow selection of the row
}

看起来像

Answer 2

为此，您可以使用切换子网格的方法。这些方法称为 expandSubGridRow、collapseSubGridRow 或 toggleSubGridRow。

欲了解更多信息，请参阅Guriddo documentation here

您可以绑定单击所需单元格（使用格式化程序或 cellattr 事件）来切换子网格行