1


前回、アプリケーションの jqGrid (4.6.0 から free-jqgrid 4.8.0) と jQuery (1.7.2 から 2.1.3) のバージョンを変更しました。
私の親グリッドには、それぞれ幅が 100 ピクセルの 2 つの表示列があり、サブグリッドには、それぞれ幅が 200 ピクセルの表示列が 5 つあります。以前のバージョンでは、サブグリッドが一番上にあったため、列のサイズを変更しなくても、サブグリッドからすべての列を表示できました。
同じ結果を得るために変更した後 サブグリッドからすべての列を表示したい場合は、回避策を実行して空の列を追加する必要があります (やりたくないこと)。私にできることはありますか?
親グリッドの2番目の列を大きくしても機能する可能性がありますが、サイズを変更したくないので、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
        });
    }

編集:
デモはこちらから
入手できます ありがとう!

4

1 に答える 1