jqGrid TreeGrid 支持两种模式:嵌套模式(nested)和相邻模式(adjacency)。相邻模式是指表格数据中每个节点除了包含自身信息外,还包含其父节点的信息。以下是在 jqGrid TreeGrid 中使用相邻模式的基本步骤:
1. 定义表格列模型,包括节点 ID、节点名称、父节点 ID 等列。例如:
```javascript
colModel: [
{ name: 'id', width: 50, key: true },
{ name: 'name', width: 150 },
{ name: 'parent', width: 50, hidden: true }
]
```
2. 加载表格数据,数据中每个节点应包含其父节点 ID。例如:
```javascript
var data = [
{ id: 1, name: 'Node 1', parent: null },
{ id: 2, name: 'Node 2', parent: 1 },
{ id: 3, name: 'Node 3', parent: 1 },
{ id: 4, name: 'Node 4', parent: null },
{ id: 5, name: 'Node 5', parent: 4 },
{ id: 6, name: 'Node 6', parent: 4 }
];
$("#treegrid").jqGrid({
data: data,
datatype: "local",
colModel: [
{ name: 'id', width: 50, key: true },
{ name: 'name', width: 150 },
{ name: 'parent', width: 50, hidden: true }
],
treeGrid: true,
treeGridModel: "adjacency",
ExpandColumn: 'name',
ExpandColClick: true,
caption: "TreeGrid Example"
});
```
3. 配置 TreeGrid 相关参数,包括 treeGrid、treeGridModel 以及 ExpandColumn 等参数。
以上示例中的 treeGrid 参数设置为 true,表示启用 TreeGrid 功能;treeGridModel 参数设置为 adjacency,表示使用相邻模式;ExpandColumn 参数设置为 'name',表示使用名称列作为展开节点的列。
4. 启用 TreeGrid 功能,例如:
```javascript
$("#treegrid").jqGrid('setGridParam', {treeGrid: true}).trigger('reloadGrid');
```
通过以上步骤,你就可以在 jqGrid TreeGrid 中使用相邻模式来展示树形数据了。需要注意的是,相邻模式的数据结构相对复杂,需要根据具体需求进行调整。