Question

我从this answer获取了代码，并且我想在第一张图片中做一些事情，看看它是否可能（我知道它是，它是＆＃39;只是一些JavaScript，HTML和CSS;））。

第二张照片是我到目前为止的进展。我将详细信息文本放在标题中：

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

我更改了第一列的宽度：

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

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

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

如何切换＆＃34; subgrid＆＃34;列是最后一个而不是第一个完全超出我所知......

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; }

现在我们可以隐藏＆＃34;子网格＆＃34;列，并通过使用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");

相应的演示版可以看到here。点击＆＃34; + Detailes＆＃34;人们会看到以下内容：

自定义jqGrid子网格列

1 个答案: