父网格比子网格窄 free-jqgrid 4.8.0

Question

上次我在我的应用程序中更改了 jqGrid 的版本（4.6.0 到 free-jqgrid 4.8.0）和 jQuery（1.7.2 到 2.1.3）。
在我的父网格中，我有 2 个可见列，每个列的宽度为 100 像素，而在子网格中，有 5 个可见列，每个列的宽度为 200 像素。在以前的版本中，子网格位于顶部，因此我可以看到子网格中的所有列而无需调整任何列的大小。
更改后获得相同的结果如果我想查看子网格中的所有列，我需要解决方法并添加空列（我不想这样做）。有什么我可以做的吗？
它可以在父网格中使用更大的第二列，但我不想调整它的大小，我更喜欢将它保留为 100 像素。

网格定义：

function loadFirstGrid() {
        var data = {
            "page": "1",
            "records": "3",
            "rows": [
            { "DataID": "1", "DataDesc": "Test 1", "DataTitle": "Test 1" },
            { "DataID": "2", "DataDesc": "Test 2", "DataTitle": "Test 2" },
            { "DataID": "3", "DataDesc": "Test 3", "DataTitle": "Test 3" }
        ]
        };

        $("#FirstGrid").jqGrid({
            datatype: "xml",
            mtype: "GET",
            contentType: "text/xml",
            colNames: ['DataID', 'DataDesc', 'DataTitle'],
            colModel: [
            { name: 'DataID', index: 'DataID', hidden: true, key: true },
            { name: 'DataDesc', index: 'DataDesc', width: 100 },
            { name: 'DataTitle', index: 'DataTitle', width: 100 }
          ],
            rowNum: 10000,
            datatype: "jsonstring",
            datastr: data,
            ignoreCase: true,
            sortname: 'DataDesc',
            sortorder: 'asc',
            emtyrecords: "Nothing to display",
            viewrecords: true,
            sortable: true,
            height: "100%",
            shrinkToFit: false,
            loadonce: true,
            scrollOffset: 0,
            width: 2000,
            caption: 'First Grid',
            subGrid: true,
            subGridRowExpanded: loadSubGrid,
            gridview: false
        });
    }

    function loadSubGrid(subgrid_id, row_id) {
        var data = {
            "page": "1",
            "records": "3",
            "rows": [
            { "SubGridID": "1", "FirstCol": "Test 1", "SecondCol": "Test 1", "ThirdCol": "Test 1", "FourthCol": "Test 1", "FifthCol": "Test 1" },
            { "SubGridID": "2", "FirstCol": "Test 2", "SecondCol": "Test 2", "ThirdCol": "Test 1", "FourthCol": "Test 1", "FifthCol": "Test 1" },
            { "SubGridID": "3", "FirstCol": "Test 3", "SecondCol": "Test 3", "ThirdCol": "Test 1", "FourthCol": "Test 1", "FifthCol": "Test 1" }
        ]
        };

        var subgrid_table_id;
        var dataID = $("#FirstGrid").jqGrid('getRowData', row_id).DataID;
        subgrid_table_id = subgrid_id + "_SubGrid";
        $("#" + subgrid_id).html("<div><table id='" + subgrid_table_id + "' class='scroll'></table></div>");
        $("#" + subgrid_table_id).jqGrid({
            datatype: "xml",
            mtype: "GET",
            contentType: "text/xml",
            colNames: ['SubGridID', 'FirstCol', 'SecondCol', 'ThirdCol', 'FourthCol', 'FifthCol'],
            colModel: [
                { name: 'SubGridID', index: 'SubGridID', hidden: true, key: true },
                { name: 'FirstCol', index: 'FirstCol', editable: false, width: 200 },
                { name: 'SecondCol', index: 'SecondCol', width: 200 },
                { name: 'ThirdCol', index: 'ThirdCol', width: 200 },
                { name: 'FourthCol', index: 'FourthCol', width: 200 },
                { name: 'FifthCol', index: 'FifthCol', width: 200 },
              ],
            rowNum: 10000,
            datatype: "jsonstring",
            datastr: data,
            ignoreCase: true,
            sortname: 'FirstCol',
            sortorder: 'asc',
            emtyrecords: "Nothing to display",
            viewrecords: true,
            sortable: true,
            height: "100%",
            shrinkToFit: false,
            loadonce: true,
            scrollOffset: 0,
            width: 1900,
            caption: 'SubGrid',
            gridview: false
        });
    }

编辑：
演示可用 here
谢谢！

Answer 1

与 jqGrid 4.7 相比，免费的 jqGrid 4.8 CSS 结构有很多变化。所以我建议用另一种方式解决你的问题。您可以在 parent 网格的末尾添加新的最后一列。该列可以为空 header。因此，parent 网格以前看起来完全是直线，但现在您不会遇到所描述的问题。

我将您的演示修改为以下 http://jsfiddle.net/OlegKi/2tkkqbeq/4/。我删除了许多不需要的设置，例如 class='scroll'、datatype: "xml"（不能与和 datatype: "jsonstring" 一起使用）。我从 colModel 中删除了 所有 index 属性 。我删除了一些现在默认的其他属性。

删除 gridview: false 属性很重要，这会使网格运行缓慢并且没有其他优势。我建议您使用 datatype: "local" 和 data: data.rows 而不是 datatype: "jsonstring", datastr: data。更改的主要优点：输入数据将按 jqGrid 排序，对应于您使用的 sortname 选项。

我建议您在子网格中使用 autowidth: true。

我在您的演示中所做的最后但非常重要的更改是在子网格中包含选项 idPrefix: "s_" + row_id + "_"。如果不使用该选项，您将在页面上看到 id 重复项，因为主网格和子网格将具有相同的 id 值（1、2、3）。

父网格比子网格窄 free-jqgrid 4.8.0

Parent grid is narrower than subgrid free-jqgrid 4.8.0

jquery

jqgrid

free-jqgrid