来自单个嵌套json的jqgrid子网格 [英] jqgrid subgrids from a single nested json

问题描述

我想将jqgrid与嵌套子网格一起使用.但是，我发现的唯一示例是使用一个url负载数据调用和单独的调用来填充主网格，以填充子网格.

I want to use jqgrid with nested subgrids. However, the only examples I've found populate the main grid with one url load-data call and separate calls to populate the subgrids.

我的子网格数据以嵌套的文档形式存在于一个JSON结构中，如下面的代码片段所示(我希望各章显示为本书的子网格，而文件则应成为各章中的子网格).

My subgrid data exist as nested documents in one JSON structure, as shown in the snippet below (I want chapters to appear as subgrids of the book, and files to be subgrids within chapters).

我可以使用jqgrid从嵌套的JSON文档中创建子网格吗?

Can I create subgrids from nested JSON documents with jqgrid?

{
  _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",
                 }
              ],

           ],
        }
}

推荐答案

我制作了演示，演示如何执行此操作:

I made the demo which demonstrate how to do this:

该演示基于此处及其后描述的思想内部data选项以 unmodified 形式保存输入数据的事实.因此，您无需创建一些隐藏的列即可保存与该行关联的其他信息.参见答案和这一个了解更多信息.我严格建议您另外在子网格中使用idPrefix选项.有关详细信息，请参见答案.

The demo are based on the idea described here and on the fact that internal data option saves the input data in unmodified form. So you don't need to create some hidden columns to save additional information associated with the row. See the answer and this one for more details. I strictly recommend you additionally to use idPrefix option in subgrids. See the answer for details.

在我在演示:

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

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

In the above code I fixed some syntax errors from the data which you posted.

这篇关于来自单个嵌套json的jqgrid子网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！