jQuery 在 jqgrid 中使用 JSON 数据的 Treegrid
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6772601/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Treegrid with JSON data in jqgrid
提问by Oleg
I am testing trees in jqgrid, so far I am only able to create something like below
我正在 jqgrid 中测试树，到目前为止我只能创建如下所示的内容
I want to have something like jqGrid Demo page
我想要类似jqGrid 演示页面的东西
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
我想出了下面的代码，但不知道我应该如何从给定的 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 format
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"
}
]
}
]
};
回答by Oleg
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 treeGridModelparameter. I recommend you to use treeGridModel: "adjacency". In the case the names of the hidden columns will be:
您尝试将 Tree Grid 与格式完全错误的数据一起使用。您应该将树网格视为带有一些附加隐藏列的网格，这些列定义了树结构。列的名称取决于treeGridModel参数的值。我建议你使用treeGridModel: "adjacency". 在这种情况下，隐藏列的名称将是：
level, parent, isLeaf, expanded, loaded, icon
In case of treeGridModel: 'nested' there are lftand rgtinstead of parentcolumn.
在 treeGridModel: 'nested' 的情况下，有lft和rgt而不是parent列。
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 topicjsonvariable the you defined ids only for the root elements (elements of the level 0).
因为树的每个项目（根节点和所有子项目）都代表网格的行，该行将放置在网格中，每个项目都必须有 id。在topicjson变量的原始版本中，您仅为根元素（级别 0 的元素）定义了 id。
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:
In the example I set expanded:trueproperty for the CustomFormaternode to demonstrate that you can specify which nodes should be directly displayed expanded.
在示例中，我expanded:true为CustomFormater节点设置了属性，以演示您可以指定哪些节点应直接展开显示。
I removed hidden column idfrom the tree grid because the id will be saved additionally as the idattribute of the corresponding <td>element. If you don't plan to make the column visible I would recommend to place the idproperty only in the input data of the tree (in topicjson).
我id从树网格中删除了隐藏列，因为 id 将另外保存为id相应<td>元素的属性。如果您不打算使列可见，我建议id仅将该属性放置在树的输入数据中（在 中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 requestin the trirand forum. So probably the requirement about the strict order of the input data for the tree grid will be changed somewhere later.
更重要的一句话。所有网格行的填充顺序与它们在输入数据中的顺序完全相同。因此，您必须立即将节点的子节点放置在其父节点之后。我在trirand论坛中提出了相应的变更请求。因此，关于树形网格输入数据的严格顺序的要求可能会在以后的某个地方发生变化。
UPDATED: To have sorting work correctly one have to use parent:nullor parent:"null"instead of parent:""see herefor more details.
已更新：要让排序正确工作一个必须使用parent:null或parent:"null"代替parent:""看到这里了解更多详情。
