在jqgrid中使用JSON数据的Treegrid
我在jqgrid中测试树，到目前为止我只能创建类似下面的内容
我想要像jqGrid Demo页面那样的东西
我想出了下面的代码，但不知道我应该如何从给定的json格式扩展树中的每一行
$('
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而不是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; $('
').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" } });
您可以在此处查看演示中的修改结果 ：
在示例中，我为CustomFormater节点设置了expanded:true属性，以演示您可以指定应直接显示哪些节点展开。
我从树网格中删除了隐藏的列id ，因为id将另外保存为相应
元素的id属性。 如果您不打算使列可见，我建议将id属性仅放在树的输入数据中（在topicjson ）。
一个更重要的评论。 所有网格行的填充顺序与输入数据中的顺序完全相同。 因此，您必须在其父节点之后立即放置节点的子节点。 我在trirand论坛中放置了相应的更改请求 。 因此，关于树网格的输入数据的严格顺序的要求可能稍后会在某处改变。
更新 ：要正确排序，必须使用parent:null或parent:"null"而不是parent:""请参阅此处了解更多详细信息。