JQGrid 子网格错误如何修复？

Question

我正在尝试根据我在网上遇到的示例使用 Subgrid 生成 JQgrid，但我使用的不是本地数据，而是 json 服务。

通过使用嵌套 JSON 数据，其中嵌套 json 数据用于子网格部分。

当我尝试创建网格时，我不断收到此错误“SyntaxError：JSON 中位置 26 200 OK 中的意外标记 i”

我做错了什么或遗漏了什么？

我的代码在下面，我的 Fiddle is here

我的代码

$(document).ready(function() {
  var jsonData = {
      id: 48803,
      thingy: "DSK1",
      number: "02200220",
      status: "OPEN",
      subgridData: [{
        num: 1,
        item: "Item 1",
        qty: 3
      }, {
        num: 2,
        item: "Item 2",
        qty: 5
      }]
    },
    {
      id: 48769,
      thingy: "APPR",
      number: "77733337",
      status: "ENTERED",
      subgridData: [{
        num: 3,
        item: "Item 3",
        qty: 5
      }, {
        num: 2,
        item: "Item 2",
        qty: 10
      }]
    },
    mmddyyyy = "";
  /*********************************************************************/


  $("#grid").jqGrid({
    url: "/echo/json/",
    mtype: "POST",
    datatype: "json",
    postData: {
      json: JSON.stringify(jsonData)
    },
    height: 'auto',
    colNames: ['Inv No', 'Thingy', 'Number', 'Status'],
    colModel: [{
      name: 'id',
      width: 60,
      sorttype: "int",
      key: true
    }, {
      name: 'thingy',
      width: 90
    }, {
      name: 'number',
      width: 80,
      formatter: "integer"
    }, {
      name: 'status',
      width: 80
    }],
    gridview: true,
    autoencode: true,
    pager: '#pagerId',
    caption: "Stack Overflow Subgrid Example",
    subGrid: true,
    subGridOptions: {
      plusicon: "ui-icon-triangle-1-e",
      minusicon: "ui-icon-triangle-1-s",
      openicon: "ui-icon-arrowreturn-1-e"
    },
    shrinkToFit: false,

    subGridRowExpanded: function(subgrid_id, row_id) {
      var subgrid_table_id = subgrid_id + "_t",
        pager_id = "p_" + subgrid_table_id,
        localRowData = $(this).jqGrid("getLocalRow", row_id);
      $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "'></table><div id='" + pager_id + "'></div>");
      $("#" + subgrid_table_id).jqGrid({
        datatype: "local",
        data: localRowData.subgridData,
        colNames: ['No', 'Item', 'Qty'],
        colModel: [{
          name: "num",
          width: 80,
          key: true
        }, {
          name: "item",
          width: 130
        }, {
          name: "qty",
          width: 70,
          align: "right"
        }],
        rowNum: 20,
        idPrefix: "s_" + row_id + "_",
        pager: "#" + pager_id,
        autowidth: true,
        gridview: true,
        autoencode: true,
        sortname: "num",
        sortorder: "asc",
        height: "auto"
      }).jqGrid('navGrid', "#" + pager_id, {
        edit: false,
        add: false,
        del: false
      });
    }
  });


});

MY Fiddle

Answer 1

首先你必须修正语法错误。定义变量jsonData的形式

var jsonData = {
        id: 48803,
        ...
    },
    {
        id: 48769,
        ...
    };

为假。您尝试将 jsonData 定义为 array 项。因此代码片段必须固定为

var jsonData = [{
        id: 48803,
        ...
    },
    {
        id: 48769,
        ...
    }];

然后定义 <table id="grid"></table>，但在 your demo 中使用 $("#output").jqGrid({...}); 创建网格。如果 id.

，您必须在这两种情况下使用相同的值

现在，回到你的主要问题。您要使用 subgridData 属性项的数据 ($(this).jqGrid("getLocalRow", row_id).subgridData) 通过 datatype: "json" 填充。 datatype: "json" 表示 基于服务器的 数据排序、分页和过滤。 jqGrid 不填充 local 数据（data 参数）。要填写 data 你必须通知 jqGrid 来自服务器的输入数据包含 完整数据 （所有页面）因此 jqGrid 应该填写 data 选项并且使用 local 排序、分页和过滤。因此你应该添加

loadonce: true,

和

additionalProperties: ["subgridData"],

另外通知 jqGrid 用 subgridData 属性以及属性 id、thingy、number 和 status（主网格的列）。

最后，您可以删除不需要的分页器 div 并使用分页器的简化形式：pager: true。您应该考虑另外使用 Font Awesome：iconSet: "fontAwesome".

修改后的demo为https://jsfiddle.net/OlegKi/615qovew/64/，使用如下代码

$(document).ready(function() {
  var jsonData = [{
      id: 48803,
      thingy: "DSK1",
      number: "02200220",
      status: "OPEN",
      subgridData: [{
        num: 1,
        item: "Item 1",
        qty: 3
      }, {
        num: 2,
        item: "Item 2",
        qty: 5
      }]
    },
    {
      id: 48769,
      thingy: "APPR",
      number: "77733337",
      status: "ENTERED",
      subgridData: [{
        num: 3,
        item: "Item 3",
        qty: 5
      }, {
        num: 2,
        item: "Item 2",
        qty: 10
      }]
    }],
    mmddyyyy = "",
    $grid = $("#output");
  /*********************************************************************/

  $grid.jqGrid({
    url: "/echo/json/",
    mtype: "POST",
    datatype: "json",
    postData: {
      json: JSON.stringify(jsonData)
    },
    colNames: ['Inv No', 'Thingy', 'Number', 'Status'],
    colModel: [{
      name: 'id',
      width: 60,
      sorttype: "int",
      key: true
    }, {
      name: 'thingy',
      width: 90
    }, {
      name: 'number',
      width: 80,
      formatter: "integer"
    }, {
      name: 'status',
      width: 80
    }],
    loadonce: true,
    additionalProperties: ["subgridData"],
    autoencode: true,
    pager: true,
    caption: "Stack Overflow Subgrid Example",
    subGrid: true,
    /*subGridOptions: {
      plusicon: "ui-icon-triangle-1-e",
      minusicon: "ui-icon-triangle-1-s",
      openicon: "ui-icon-arrowreturn-1-e"
    },*/
    iconSet: "fontAwesome",
    shrinkToFit: false,
    subGridRowExpanded: function(subgridDivId, rowid) {
      var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
          subgridData = $(this).jqGrid("getLocalRow", rowid).subgridData;

      $("#" + subgridDivId).append($subgrid);
      $subgrid.jqGrid({
        data: subgridData,
        colNames: ['No', 'Item', 'Qty'],
        colModel: [{
          name: "num",
          width: 80,
          key: true
        }, {
          name: "item",
          width: 130
        }, {
          name: "qty",
          width: 70,
          align: "right"
        }],
        rowNum: 20,
        idPrefix: "s_" + rowid + "_",
        pager: true,
        iconSet: "fontAwesome",
        autowidth: true,
        autoencode: true,
        sortname: "num"
      }).jqGrid('navGrid', {
        edit: false,
        add: false,
        del: false
      });
    }
  }).jqGrid('filterToolbar', {
    stringResult: true,
    searchOnEnter: false,
    defaultSearch: "cn"
  });

  $(window).on("resize", function() {
    var newWidth = $grid.closest(".ui-jqgrid").parent().width();
    $grid.jqGrid("setGridWidth", newWidth, true);
  }).triggerHandler("resize");
});

JQGrid 子网格错误如何修复？

JQGrid Subgrid Error How can this be fixed?

javascript

jquery

jqgrid

free-jqgrid

JQGrid 子网格错误 如何修复？

JQGrid Subgrid Error How can this be fixed?

javascript

jquery

jqgrid

free-jqgrid

JQGrid 子网格错误如何修复？