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

问题描述

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

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

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

<代码>{_id: {"509403957ae7d3929edcb812"},名称:{我的书"}，布局: {章节 [{名称:我的第一章"，序列:1，标题:我的第一章"，文件:[{文件类型:tex"，名称:我的第一个文件"},{文件类型:tmpl"，名称:myfileb"，}],},{名称:我的第二章"，序列:2，标题:我的第二章"，文件:[{文件类型:tex"，名称:我的介绍"},{文件类型:tex"，名称:myfilec"，}],],}}

解决方案

我做了 描述的想法事实上，内部 data 选项将输入数据保存为 未修改 形式.因此，您无需创建一些隐藏列来保存与该行关联的其他信息.请参阅答案和这个 了解更多详情.我强烈建议您另外在子网格中使用 idPrefix 选项.有关详细信息，请参阅答案.

下面是我在演示中使用的代码:

var myData = {_id: "509403957ae7d3929edcb812",名称:我的书"，布局: {章节:[{名称:我的第一章"，序列:1，标题:我的第一章"，文件:[{ 文件类型:tex"，名称:myfirstfile"}，{ 文件类型:tmpl"，名称:myfileb"}]},{名称:我的第二章"，序列:2，标题:我的第二章"，文件:[{ 文件类型:tex"，名称:myintro"}，{ 文件类型:tex"，名称:myfilec"}]}]}},$grid = $("#list");$grid.jqGrid({数据类型:本地"，数据:myData.layout.chapters，colNames:[序列"，名称"，标题"]，col型号:[{名称:序列"，宽度:65，键:真}，{名称:名称"，宽度:150 }，{名称:标题"，宽度:150}],行数:10，行列表:[5,10,20]，寻呼机:#pager"，网格视图:是的，忽略大小写:真，行号:真，排序名称:序列"，观看记录:真实，高度:100%"，子网格:真，subGridRowExpanded:函数(subgridId，rowid){var subgridTableId = subgridId + "_t";$("#" + subgridId).html("<table id='" + subgridTableId + "'></table>");$("#" + subgridTableId).jqGrid({数据类型:本地"，数据:$(this).jqGrid("getLocalRow", rowid).files,colNames:[名称"，文件类型"]，col型号:[{名称:名称"，宽度:130，键:真}，{名称:文件类型"，宽度:130}],高度:100%"，行数:10，排序名称:名称"，idPrefix: "s_" + rowid + "_"});}});$grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});

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

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.

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).

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:

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.

Below in the code which I used in 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});

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

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