如何将数据加载到jqGrid Treegrid

时间:2016-09-22 01:36:40

标签: jqgrid treegrid

我的服务器返回JSON数据,如下所示:

{
  "pageIndex": 1,
  "pageSize": 100,
  "pages": 290,
  "total": 2891,
  "nodes": [
    {
      "data": { "id": 1, "name": "Node 1", "leaf": false },
      "errors": []
    },
    {
      "data": { "id": 2, "name": "Node 2", "leaf": true, "parentId": 1 },
      "errors": []
    }
  ]
}

我想在分层树结构中显示它,所以我在treegrid模式下配置了jqGrid,如下所示:

$("#tree").jqGrid({
  url: "/tree",
  datatype : "json",
  colModel : [{
    name: "data.id",
    key: true
  }, {
    name: "data.name"
  }],
  colNames : [],
  jsonReader : {
    page : 1,
    records : "total",
    repeatitems : false,
    root : "nodes",
    total : 1
  },
  treeGrid : true,
  treeGridModel : "adjacency",
  tree_root_level : 1,
  ExpandColumn : "data.id",
  ExpandColClick : true,
  treeReader : {
    leaf_field : "leaf",
    parent_id_field : "data.parentId"
  }
});

这很好用;但是,必须使用data前缀指定列名。有没有办法摆脱列名的这个前缀而不改变从服务器返回的数据?

1 个答案:

答案 0 :(得分:0)

如果我理解您的问题,那么您应该将colModeljsonReadertreeReader修复为以下内容:

colModel : [{
    name: "id",
    key: true
}, {
    name: "name"
}],
jsonReader : {
    cell: "data",
    root : "nodes"
},
treeReader : {
    parent_id_field: "parentId",
    leaf_field : "leaf"
}

请参阅相应的演示:https://jsfiddle.net/OlegKi/ae18ov61/2/。我在数据项中另外添加了属性"level": 1,它描述了叶子。