Question

我想将jqgrid与嵌套子网格一起使用。但是，我发现的唯一示例是在主网格中填充一个url load-data调用和单独的调用来填充subgrids。

我的子网格数据作为嵌套文档存在于一个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",
                 }
              ],

           ],
        }
}

Answer 1

我制作了the demo，演示了如何执行此操作：

enter image description here

该演示基于here所述的想法以及内部data选项以未修改形式保存输入数据的事实。因此，您无需创建一些隐藏列来保存与该行关联的其他信息。有关详细信息，请参阅the answer和this one。我还强烈建议您在子网格中使用idPrefix选项。有关详细信息，请参阅the answer。

以下我在the demo中使用的代码：

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});

在上面的代码中，我修复了您发布的数据中的一些语法错误。

来自单个嵌套json的jqgrid子网格

1 个答案: