Question

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

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

当我尝试创建网格时，我不断收到此错误“ SyntaxError：JSON位置26的意外令牌i 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定义为数组项。因此，代码片段必须固定为

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不会填充本地数据（data参数）。要填充data，您必须通知jqGrid来自服务器的输入数据包含完整数据（所有页面），因此jqGrid应填充data选项并使用本地排序，分页和过滤。因此你应该添加

loadonce: true,

和

additionalProperties: ["subgridData"],

另外通知jqGrid使用subgridData属性填充本地数据项以及属性id，thingy，number和status（主网格的列。）

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

修改后的演示版为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子网格错误如何解决这个问题？

1 个答案: