Question

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

enter image description here

之类的东西

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

$('<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"
                         }
                     ]
                 }
             ]
         };

Answer 1

您尝试使用绝对错误的格式化数据的Tree Grid。您应该将树网格看作一个网格，其中包含一些用于定义树结构的其他隐藏列。列的名称取决于treeGridModel参数的值。我建议你使用treeGridModel: "adjacency"。如果隐藏列的名称将是：

level, parent, isLeaf, expanded, loaded, icon

如果是treeGridModel：'嵌套'，则会有lft和rgt而不是parent列。

因为树的每个项目（根节点和所有子项）都表示将放置在网格中的网格行，每个项目都必须具有id。在原始版本的topicjson变量中，您只为根元素（级别0的元素）定义了ID。

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

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

您可以在演示here上看到修改结果：

enter image description here

在示例中，我为expanded:true节点设置了CustomFormater属性，以证明您可以指定应直接显示扩展的节点。

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

一个更重要的评论。所有网格行的填充顺序与输入数据中的顺序完全相同。因此，您必须在其父节点之后立即放置节点的子节点。我在trirand论坛中放置了相应的change request。因此，关于树网格的输入数据的严格顺序的要求可能会在稍后的某处更改。

更新：要使排序正常工作，必须使用parent:null或parent:"null"代替parent:""，请参阅here了解详情。< / p>

在jqgrid中使用JSON数据的Treegrid

1 个答案: