jqgrid TreeGrid adjacency模式 使用c# 怎么实现
时间: 2024-03-05 18:51:14 浏览: 26
在 C# 中使用 jqGrid TreeGrid 的相邻模式,需要按照以下步骤进行:
1. 定义表格列模型,包括节点 ID、节点名称、父节点 ID 等列。例如:
```csharp
colModel: [
{ name: "id", index: "id", width: 50 },
{ name: "name", index: "name", width: 150 },
{ name: "parent", index: "parent", width: 50, hidden: true }
]
```
2. 加载表格数据,数据中每个节点应包含其父节点 ID。例如:
```csharp
var data = new[] {
new { id = 1, name = "Node 1", parent = (int?)null },
new { id = 2, name = "Node 2", parent = 1 },
new { id = 3, name = "Node 3", parent = 1 },
new { id = 4, name = "Node 4", parent = (int?)null },
new { id = 5, name = "Node 5", parent = 4 },
new { id = 6, name = "Node 6", parent = 4 }
};
var jsonData = new {
total = 1,
page = 1,
records = data.Length,
rows = data
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
```
以上示例中的 data 数组中每个节点都包含其父节点 ID。在返回数据时,需要将数据转换为 JSON 格式,并包含 total、page、records 以及 rows 四个属性。其中,rows 属性对应表格的数据。
3. 配置 TreeGrid 相关参数,包括 treeGrid、treeGridModel 以及 ExpandColumn 等参数。
```csharp
var gridModel = new {
treeGrid = true,
treeGridModel = "adjacency",
ExpandColumn = "name",
ExpandColClick = true,
caption = "TreeGrid Example",
colModel = new[] {
new { name = "id", index = "id", width = 50 },
new { name = "name", index = "name", width = 150 },
new { name = "parent", index = "parent", width = 50, hidden = true }
}
};
return Json(gridModel, JsonRequestBehavior.AllowGet);
```
4. 在前端页面中使用 jqGrid TreeGrid 插件来展示数据。例如:
```javascript
$("#treegrid").jqGrid({
url: "/Controller/Action",
datatype: "json",
mtype: "GET",
colModel: [
{ name: "id", index: "id", width: 50 },
{ name: "name", index: "name", width: 150 },
{ name: "parent", index: "parent", width: 50, hidden: true }
],
treeGrid: true,
treeGridModel: "adjacency",
ExpandColumn: "name",
ExpandColClick: true,
caption: "TreeGrid Example"
});
```
通过以上步骤,你就可以在 C# 中使用 jqGrid TreeGrid 的相邻模式来展示树形数据了。需要注意的是,相邻模式的数据结构相对复杂,需要根据具体需求进行调整。