JQGrid 子网格错误如何解决？

Question

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

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

当我尝试创建网格时，我不断收到此错误“SyntaxError: Unexpected token i in JSON at position 26 200 OK”

我做错了什么或错过了什么？

下面是我的代码和我的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，您必须在这两种情况下使用相同的值。

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

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