jquery:在调整主网格大小时调整SubGrid列的大小

您的问题很有趣，但答案并不容易.尽管如此，我还是花了一些时间为您提供以下演示，演示了如何实施该解决方案.该实现基于对内部函数 dragEnd的源代码的分析 将在 mouseup内部被调用 回调（请参见此处）. mousemove 回调（请参见此处）和 mousedown 列标题（请参见此处）上的所有内容一起播放。

结果，该演示调整了子网格的列大小：

在演示中，我介绍了调整列大小后重新调整整个网格大小的技巧.它最初在答案中描述.我个人在每个生产性网格中都使用它，因为我更类似没有滚动条的网格。

下面，我包括完整的代码（全部来自 document.ready 演示程序的处理程序）：

var myData = [
        {
            id: "10",
            c1: "My Value 1.1",
            c2: "My Value 1.2",
            c3: "My Value 1.3",
            c4: "My Value 1.4",
            subgridData: [
                { id: "10", c1: "aa", c2: "ab", c3: "ac", c4: "ad" },
                { id: "20", c1: "ba", c2: "bb", c3: "bc", c4: "bd" },
                { id: "30", c1: "ca", c2: "cb", c3: "cc", c4: "cd" }
            ]
        },
        {
            id: "20",
            c1: "My Value 2.1",
            c2: "My Value 2.2",
            c3: "My Value 2.3",
            c4: "My Value 2.4",
            subgridData: [
                { id: "10", c1: "da", c2: "db", c3: "dc", c4: "dd" },
                { id: "20", c1: "ea", c2: "eb", c3: "ec", c4: "ed" },
                { id: "30", c1: "fa", c2: "fb", c3: "fc", c4: "fd" }
            ]
        },
        {
            id: "30",
            c1: "My Value 3.1",
            c2: "My Value 3.2",
            c3: "My Value 3.3",
            c4: "My Value 3.4",
            subgridData: [
                { id: "10", c1: "ga", c2: "gb", c3: "gc", c4: "gd" },
                { id: "20", c1: "ha", c2: "hb", c3: "hc", c4: "hd" },
                { id: "30", c1: "ia", c2: "ib", c3: "ic", c4: "id" }
            ]
        }
    ],
    mainGridPrefix = "s_";
$("#list").jqGrid({
    datatype: "local",
    data: myData,
    colNames: ["Column 1", "Column 2", "Column 3", "Column 4"],
    colModel: [
        { name: "c1", width: 100 },
        { name: "c2", width: 130 },
        { name: "c3", width: 150 },
        { name: "c4", width: 170 }
    ],
    rowNum: 10,
    rowList: [5, 10, 20],
    pager: "#pager",
    gridview: true,
    ignoreCase: true,
    rownumbers: true,
    sortname: "c1",
    viewrecords: true,
    autoencode: true,
    height: "100%",
    idPrefix: mainGridPrefix,
    subGrid: true,
    subGridRowExpanded: function (subgridDivId, rowId) {
        var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
            pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
            colModel = $(this).jqGrid("getGridParam", "colModel");
        $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
        $subgrid.jqGrid({
            datatype: "local",
            data: $(this).jqGrid("getLocalRow", pureRowId).subgridData,
            colModel: [
                { name: "c1", width: (colModel[2].width - 2) },
                { name: "c2", width: colModel[3].width },
                { name: "c3", width: colModel[4].width },
                { name: "c2", width: (colModel[5].width - 2) }
            ],
            height: "100%",
            rowNum: 10000,
            autoencode: true,
            gridview: true,
            idPrefix: rowId + "_"
        });
        $subgrid.closest("div.ui-jqgrid-view")
            .children("div.ui-jqgrid-hdiv")
            .hide();
    },
    resizeStop: function (newWidth, index) {
        // grid.dragEnd()
        var widthChange = this.newWidth - this.width,
            $theGrid = $(this.bDiv).find(">div>.ui-jqgrid-btable"),
            $subgrids = $theGrid.find(">tbody>.ui-subgrid>.subgrid-data>.tablediv>.ui-jqgrid>.ui-jqgrid-view>.ui-jqgrid-bdiv>div>.ui-jqgrid-btable");
        $subgrids.each(function () {
            var grid = this.grid;
            // we have subgrids which have no internal subgrids
            // it reduce the number of columns to 1
            // we have rownumbers: true in the main grid, but not in subgrids
            // it reduce the number of columns to additional 1
            // so we should use (index - 2) as the column index in the subgrids
            grid.resizing = { idx: (index - 2) };
            grid.headers[index - 2].newWidth = (index - 2 === 0) || (index - 1 === grid.headers.length) ? newWidth - 2 : newWidth;
            grid.newWidth = grid.width + widthChange;
            grid.dragEnd.call(grid);
            $(this).jqGrid("setGridWidth", grid.newWidth, false);
        });
        $theGrid.jqGrid("setGridWidth", this.newWidth, false);
    }
}).jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});

UPDATED ：答案介绍了新的 setColWidth 基于上述解决方案代码的方法.一种使用新的 setColWidth 简化 resizeStop代码的方法