自定义 jqGrid 子网格列

Question

我从this answer 获取了代码，我想做一些类似第一张图片的事情，看看它是否可能（我知道它是可能的，它只是一些 JavaScript、HTML 和 CSS；））。

第二张图是我目前的进步。 我将详细信息文本放在标题中：

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

我改变了第一列的宽度：

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

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

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

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

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)获取数据的项，$(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 图标）和类mylink 定义为

.mylink { text-decoration: underline; }

现在我们可以通过+ 或- 图标在隐藏单元格上模拟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。点击“+详情”后会看到如下：