在jqgrid中使用JSON数据的Treegrid [英] Treegrid with JSON data in jqgrid

问题描述

我正在jqgrid中测试树木，到目前为止，我只能创建类似以下的内容

I am testing trees in jqgrid, so far I am only able to create something like below

我想要类似 jqGrid演示页面

我想出了以下代码，但不知道如何从给定的json格式扩展树中的每一行

I came up with the below code, but no idea how should I go about expanding each row in the tree from the given json format

$('<table id="list2" cellspacing="0" cellpadding="0"></table></div>').appendTo('#topics');

var grid = jQuery("#list2");
grid.jqGrid({
    datastr:topicjson,
    datatype: "jsonstring",
    height: "auto",
    pager: false,
    loadui: "disable",
    colNames: ["id","Items","url"],
    colModel: [
        {name: "id",width:1,hidden:true, key:true},
        {name: "elementName", width:150, resizable: false},
        {name: "url",width:1,hidden:true}
    ],
    treeGrid: true,

    caption: "jqGrid Demos",
    ExpandColumn: "elementName",
    autowidth: true,
    //width: 180,
    rowNum: 200,
    //ExpandColClick: true,
    treeIcons: {leaf:'ui-icon-document-b'},
    jsonReader: {
        repeatitems: false,
        root: "response"
    }
});

Json格式

var topicjson={
    "response": [
                 {
                     "id": "1",
                     "elementName": "Grouping",
                     "sub": [
                         {
                             "subelementName": "Simple Grouping"
                         },
                         {
                             "subelementName": "May be some other grouping"
                         }
                     ]
                 },
                 {
                     "id": "2",
                     "elementName": "CustomFormater",
                     "sub": [
                         {
                             "subelementName": "Image Formatter"
                         },
                         {
                             "subelementName": "Anchor Formatter"
                         }
                     ]
                 }
             ]
         };

推荐答案

您尝试将Tree Grid与格式错误的数据一起使用.您应该将树形网格视为带有一些其他隐藏列的网格，这些列定义了树形结构.列的名称取决于treeGridModel参数的值.我建议您使用treeGridModel: "adjacency".在这种情况下，隐藏列的名称将为:

You try to use Tree Grid with absolutely wrong formatted data. You should see tree grid as a grid with some additional hidden columns which defines the tree structure. The names of the columns depends on the value of the treeGridModel parameter. I recommend you to use treeGridModel: "adjacency". In the case the names of the hidden columns will be:

level, parent, isLeaf, expanded, loaded, icon

对于treeGridModel:嵌套"，有lft和rgt而不是parent列.

In case of treeGridModel: 'nested' there are lft and rgt instead of parent column.

因为树中的每一项(根节点和所有子项)都代表网格的行，因此每行必须具有ID的行将被放置在网格中.在原始版本的topicjson变量中，您仅为根元素(级别为0的元素)定义了ID.

Because every item of the tree (root nodes and all subitems) represents grid's row which will be placed in the grid every item have to have id. In your original version of the topicjson variable the you defined ids only for the root elements (elements of the level 0).

我们可以将您的原始示例修改为以下内容:

We can modify your original example to the following:

var topicjson={
    "response": [
           {
               "id": "1",
               "elementName": "Grouping",
               level:"0", parent:"", isLeaf:false, expanded:false, loaded:true
           },
           {
               "id": "1_1",
               "elementName": "Simple Grouping",
               level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true
           },
           {
               "id": "1_2",
               "elementName": "May be some other grouping",
               level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true
           },
           {
               "id": "2",
               "elementName": "CustomFormater",
               level:"0", parent:"", isLeaf:false, expanded:true, loaded:true
           },
           {
               "id": "2_1",
               "elementName": "Image Formatter",
               level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true
           },
           {
               "id": "2_1",
               "elementName": "Anchor Formatter",
               level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true
           }
       ]
    },
    grid;

$('<table id="list2"></table>').appendTo('#topics');

grid = jQuery("#list2");
grid.jqGrid({
    datastr: topicjson,
    datatype: "jsonstring",
    height: "auto",
    loadui: "disable",
    colNames: [/*"id",*/"Items","url"],
    colModel: [
        //{name: "id",width:1, hidden:true, key:true},
        {name: "elementName", width:250, resizable: false},
        {name: "url",width:1,hidden:true}
    ],
    treeGrid: true,
    treeGridModel: "adjacency",
    caption: "jqGrid Demos",
    ExpandColumn: "elementName",
    //autowidth: true,
    rowNum: 10000,
    //ExpandColClick: true,
    treeIcons: {leaf:'ui-icon-document-b'},
    jsonReader: {
        repeatitems: false,
        root: "response"
    }
});

您可以在演示的此处上看到修改的结果. >:

You can see the results of the modification on the demo here:

在示例中，我为CustomFormater节点设置了expanded:true属性，以演示您可以指定哪些节点应直接展开显示.

In the example I set expanded:true property for the CustomFormater node to demonstrate that you can specify which nodes should be directly displayed expanded.

我从树形网格中删除了隐藏列id，因为id将另外保存为相应<td>元素的id属性.如果您不打算使该列可见，我建议仅将id属性放在树的输入数据中(在topicjson中).

I removed hidden column id from the tree grid because the id will be saved additionally as the id attribute of the corresponding <td> element. If you don't plan to make the column visible I would recommend to place the id property only in the input data of the tree (in topicjson).

另一个重要的评论.所有网格行将以与输入数据中完全相同的顺序填充.因此，您必须将节点的子节点放置在其父节点之后.我放置了相应的

One more important remark. All grid rows will be filled in exactly the same order in which they are in the input data. So you have to place the child nodes of the node immediately after its parent. I placed the corresponding change request in the trirand forum. So probably the requirement about the strict order of the input data for the tree grid will be changed somewhere later.

更新:要正确进行排序，必须使用parent:null或parent:"null"而不是parent:""，请参见

UPDATED: To have sorting work correctly one have to use parent:null or parent:"null" instead of parent:"" see here for more details.

这篇关于在jqgrid中使用JSON数据的Treegrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！