6

jqGrid-4.4.1subGrid機能を使用しています。

私の場合、各行のsubGridから列ヘッダーを削除したいと思います。

私は試した

var grid = $("#list");
var gview = grid.parents("div.ui-jqgrid-view"); 
gview.children("div.ui-jqgrid-hdiv").hide();

このリンクから。ただし、サブグリッドではなく、メインテーブルのヘッダーを削除します。

私は別の方法を見つけましたが、そのHTMLベースです。 Jqgridサブグリッドからテーブル列ヘッダーを削除する方法

また、行が展開されたときに最初の列からキャロット記号を削除するにはどうすればよいですか。

これがスナップショットです。赤くマークされた境界線を削除したい。

ここに画像の説明を入力してください

4

1 に答える 1

6

一般に、列ヘッダーを非表示にする正しい方法を使用します。唯一の問題は、正しいグリッドで非表示を使用する必要があることです。通常、コールバック内のグリッドとしてサブグリッドを作成しsubGridRowExpandedます。jqGrid<div>は、新しいサブグリッドを配置する場所に作成します。callback の最初のパラメーターとして取得する div の です (詳細についてはid、ドキュメントを参照してください)。そのため、通常は div の ID に基づいて構築された ID を持つサブグリッドを作成します。代わりにサブグリッドの ID を使用すると、サブグリッドの列ヘッダーを非表示にすることができます。subGridRowExpanded#list

デモは、そのような実装を示しています。

ここに画像の説明を入力

以下は、デモに使用したコードです

var myData = [
        {
            id: "10",
            c1: "My Value 1",
            c2: "My Value 1.1",
            subgridData: [
                { id: "10", c1: "aa", c2: "ab" },
                { id: "20", c1: "ba", c2: "bb" },
                { id: "30", c1: "ca", c2: "cb" }
            ]
        },
        {
            id: "20",
            c1: "My Value 2",
            c2: "My Value 2.1",
            subgridData: [
                { id: "10", c1: "da", c2: "db" },
                { id: "20", c1: "ea", c2: "eb" },
                { id: "30", c1: "fa", c2: "fb" }
            ]
        },
        {
            id: "30",
            c1: "My Value 3",
            c2: "My Value 3.1",
            subgridData: [
                { id: "10", c1: "ga", c2: "gb" },
                { id: "20", c1: "ha", c2: "hb" },
                { id: "30", c1: "ia", c2: "ib" }
            ]
        }
    ],
    $grid = $("#list"),
    mainGridPrefix = "s_";

$grid.jqGrid({
    datatype: "local",
    data: myData,
    colNames: ["Column 1", "Column 2"],
    colModel: [
        { name: "c1", width: 180 },
        { name: "c2", width: 180 }
    ],
    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);

        $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
        $subgrid.jqGrid({
            datatype: "local",
            data: $(this).jqGrid("getLocalRow", pureRowId).subgridData,
            colModel: [
                { name: "c1", width: 178 },
                { name: "c2", width: 178 }
            ],
            height: "100%",
            rowNum: 10000,
            autoencode: true,
            gridview: true,
            idPrefix: rowId + "_"
        });
        $subgrid.closest("div.ui-jqgrid-view")
            .children("div.ui-jqgrid-hdiv")
            .hide();
    }
});
$grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});

UPDATED :回答は、メイン グリッドの列のサイズ変更後にサブグリッドの列のサイズ変更を実装する方法を示しています。

于 2013-01-04T15:28:24.820 に答える