自定义 jqGrid 子网格列

Question

我从 this answer 中获取了代码，我想做第一张图片中的代码，看看是否可行（我知道是的，它只是一些 JavaScript，HTML 和 CSS;)）。

第二张图是我目前的进度。我将详细信息文本放在 header:

$("#list_subgrid").append("Details").css('width', '100px');

我更改了第一列的宽度：

$(".jqgfirstrow").find("td:first").css({"height":"0px", "width":"100px"});

如果我到处更改一堆元素的宽度，我可以得到第三张图片，但不确定这是正确的方法。而且我无法摆脱水平滚动条。

不知道如何将详细信息文本而不是加号放入第一列的每个单元格中，但加号可以保留在那里。

以及如何将 "subgrid" 列切换到最后而不是第一个完全超出我的知识范围...

Answer 1

我写了很多年前的答案，你拿它作为例子。现在我只想将子网格数据与行的主要数据放在一起，例如下面的 details 属性：

var myGridData = [
        // main grid data
        {id: "10", col1: "11", col2: "12", details: [
            // data for subgrid for the id=10
            {id: "10", c1: "aa", c2: "ab", c3: "ac"},
            {id: "20", c1: "ba", c2: "bb", c3: "bc"},
            {id: "30", c1: "ca", c2: "cb", c3: "cc"}
        ]},
        {id: "20", col1: "21", col2: "22", details: [
            // data for subgrid for the id=20
            {id: "10", c1: "xx", c2: "xy", c3: "xz"}
        ]}
    ];

表达式$(this).jqGrid("getLocalRow", rowid)得到数据的item，$(this).jqGrid("getLocalRow", rowid).details是该行的子网格数据。结果我们可以像 the demo.

一样重写原始示例

要使列具有固定文本 Details，我们可以使用简单的格式化程序

formatter: function () {
    return details;
}

其中 details 定义为例如

var details = "<span class='fa fa-fw fa-plus'></span>&nbsp;" +
                    "<span class='mylink'>Details</span>";

（我使用了 Font Awesome 图标）和 class mylink 定义为

.mylink { text-decoration: underline; }

现在我们可以隐藏 "subgrid" 列和 open/close 子网格，方法是使用 + 或 - 模拟隐藏单元格上的 click 事件图标。我们收到以下完整代码

var myGridData = [
        // main grid data
        {id: "10", col1: "11", col2: "12", details: [
            // data for subgrid for the id=10
            {id: "10", c1: "aa", c2: "ab", c3: "ac"},
            {id: "20", c1: "ba", c2: "bb", c3: "bc"},
            {id: "30", c1: "ca", c2: "cb", c3: "cc"}
        ]},
        {id: "20", col1: "21", col2: "22", details: [
            // data for subgrid for the id=20
            {id: "10", c1: "xx", c2: "xy", c3: "xz"}
        ]}
    ],
    $grid = $("#list"),
    details = "<span class='fa fa-fw fa-plus'></span>&nbsp;" +
                "<span class='mylink'>Details</span>";

$grid.jqGrid({
    data: myGridData,
    colModel: [
        { name: "col1", label: "Column 1" },
        { name: "col2", label: "Column 2" },
        { name: "details", label: "Details",
            align: "center", width: 70,
            formatter: function () {
                return details;
            } }
    ],
    cmTemplate: { width: 200 },
    iconSet: "fontAwesome",
    autoencode: true,
    sortname: "col1",
    sortorder: "desc",
    pager: true,
    caption: "Demonstrate how to create subgrid from local data",
    beforeSelectRow: function (rowid, e) {
        var $self = $(this),
            p = $self.jqGrid("getGridParam"),
            $td = $(e.target).closest("tr.jqgrow>td"),
            cm = $td.length > 0 ? p.colModel[$td[0].cellIndex] : null,
            cmName = cm != null ? cm.name : null;
        if (cmName === "details") {
            // simulate opening the subgrid
            $($td.parent()[0].cells[p.iColByName.subgrid]).click();
            // inverse +/-
            var $plusMinus = $td.find("span.fa");
            if ($plusMinus.hasClass("fa-minus")) {
                $plusMinus.removeClass("fa-minus").addClass("fa-plus");
            } else {
                $plusMinus.removeClass("fa-plus").addClass("fa-minus");
            }
        }

        return true;
    },
    subGrid: true,
    subGridRowExpanded: function (subgridDivId, rowid) {
        var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
            $subgridDiv = $("#" + subgridDivId),
            subgridData = $(this).jqGrid("getLocalRow", rowid).details;

        $subgridDiv.closest(".subgrid-data").prev(".subgrid-cell").remove();
        var colspan = $subgridDiv.closest(".subgrid-data").attr("colspan");
        $subgridDiv.closest(".subgrid-data").attr("colspan", parseInt(colspan, 10) + 1);
        $subgridDiv.append($subgrid);
        $subgrid.jqGrid({
            idPrefix: rowid + "_",
            data: subgridData,
            colModel: [
                { name: "c1", label: "Col 1" },
                { name: "c2", label: "Col 2" },
                { name: "c3", label: "Col 3" }
            ],
            iconSet: "fontAwesome",
            autowidth: true,
            autoencode: true,
            sortname: "c1"
        });
        $subgrid.jqGrid("setGridWidth", $subgridDiv.width() - 1);
    }
}).jqGrid("hideCol", "subgrid");

对应的demo可以看here。单击“+ Detailes”后，将看到以下内容：

自定义 jqGrid 子网格列

Customizing jqGrid subgrid column

jqgrid