jquery – 在jqgrid中使用JSON数据的Treegrid

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

我想要像jqGrid Demo page这样的东西

我想出了下面的代码,但不知道我应该如何从给定的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",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"
                         }
                     ]
                 }
             ]
         };

解决方法

您尝试使用绝对错误的格式化数据的树网格.您应该将树网格看作一个网格,其中包含一些用于定义树结构的其他隐藏列.列的名称取决于treeGridModel参数的值.我建议你使用treeGridModel：“adjacency”.在这种情况下,隐藏列的名称将是：

level,parent,isLeaf,expanded,loaded,icon

在treeGridModel：’nested’的情况下,有lft和rgt而不是父列.

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

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

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

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

grid = jQuery("#list2");
grid.jqGrid({
    datastr: topicjson,colNames: [/*"id",*/"Items",colModel: [
        //{name: "id",width:250,treeGridModel: "adjacency",//autowidth: true,rowNum: 10000,root: "response"
    }
});

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

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

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

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

更新：要正确排序,必须使用parent：null或parent：“null”而不是parent：“”有关详细信息,请参阅here.

jquery – 在jqgrid中使用JSON数据的Treegrid

解决方法

相关推荐