3

ネストされたサブグリッドで jqgrid を使用したい。ただし、私が見つけた唯一の例は、メイン グリッドに 1 つの url load-data 呼び出しと、サブグリッドにデータを入力するための個別の呼び出しを設定します。

サブグリッド データは、以下のスニペットに示すように、1 つの JSON 構造にネストされたドキュメントとして存在します (章を本のサブグリッドとして表示し、ファイルを章内のサブグリッドとして表示する必要があります)。

jqgrid を使用してネストされた JSON ドキュメントからサブグリッドを作成できますか?

{
  _id: {"509403957ae7d3929edcb812"},
  name: {"MYBOOK"},
  layout: {
        chapters [
           {
              name: "myfirstchapter",
              sequence: 1,
              title: "My First Chapter",
              files: [
                 {
                 filetype: "tex",
                 name: "myfirstfile"
                 },
                 {
                 filetype: "tmpl",
                 name: "myfileb",
                 }
              ],

           },
           {
              name: "mysecondchapter",
              sequence: 2,
              title: "My Second Chapter",
              files: [
                 {
                 filetype: "tex",
                 name: "myintro"
                 },
                 {
                 filetype: "tex",
                 name: "myfilec",
                 }
              ],

           ],
        }
}
4

1 に答える 1

8

これを行う方法を示すデモを作成しました。

ここに画像の説明を入力

デモは、ここで説明したアイデアと、内部dataオプションが入力データを変更されていない形式で保存するという事実に基づいています。そのため、行に関連付けられた追加情報を保存するために非表示の列を作成する必要はありません。詳細については、回答とこれを参照してください。idPrefixさらにサブグリッドでオプションを使用することを強くお勧めします。詳細については、回答を参照してください。

デモで使用したコードの下：

var myData = {
        _id: "509403957ae7d3929edcb812",
        name: "MYBOOK",
        layout: {
            chapters: [
                {
                    name: "myfirstchapter",
                    sequence: 1,
                    title: "My First Chapter",
                    files: [
                        { filetype: "tex", name: "myfirstfile" },
                        { filetype: "tmpl", name: "myfileb" }
                    ]
                },
                {
                    name: "mysecondchapter",
                    sequence: 2,
                    title: "My Second Chapter",
                    files: [
                        { filetype: "tex", name: "myintro" },
                        { filetype: "tex", name: "myfilec" }
                    ]
                }
            ]
        }
    },
    $grid = $("#list");

$grid.jqGrid({
    datatype: "local",
    data: myData.layout.chapters,
    colNames: ["Sequence", "Name", "Title"],
    colModel: [
        {name: "sequence", width: 65, key: true },
        {name: "name", width: 150 },
        {name: "title", width: 150}
    ],
    rowNum: 10,
    rowList: [5, 10, 20],
    pager: "#pager",
    gridview: true,
    ignoreCase: true,
    rownumbers: true,
    sortname: "sequence",
    viewrecords: true,
    height: "100%",
    subGrid: true,
    subGridRowExpanded: function (subgridId, rowid) {
        var subgridTableId = subgridId + "_t";
        $("#" + subgridId).html("<table id='" + subgridTableId + "'></table>");
        $("#" + subgridTableId).jqGrid({
            datatype: "local",
            data: $(this).jqGrid("getLocalRow", rowid).files,
            colNames: ["Name", "Filetype"],
            colModel: [
              {name: "name", width: 130, key: true},
              {name: "filetype", width: 130}
            ],
            height: "100%",
            rowNum: 10,
            sortname: "name",
            idPrefix: "s_" + rowid + "_"
        });
    }
});
$grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});

上記のコードでは、投稿したデータの構文エラーをいくつか修正しました。

于 2012-11-05T22:26:11.647 に答える