jqgrid treeReader 加载本地树形数据demo
时间: 2023-09-01 16:06:21 浏览: 152
下面是一个使用 jqGrid 的 `treeReader` 属性加载本地树形数据的示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jqGrid treeReader 加载本地树形数据示例</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
<script>
$(function() {
var mydata = [
{id: '1', name: '节点1', parent_id: '0', isLeaf: false, level: 0},
{id: '2', name: '节点2', parent_id: '0', isLeaf: false, level: 0},
{id: '3', name: '节点3', parent_id: '1', isLeaf: false, level: 1},
{id: '4', name: '节点4', parent_id: '1', isLeaf: false, level: 1},
{id: '5', name: '节点5', parent_id: '2', isLeaf: false, level: 1},
{id: '6', name: '节点6', parent_id: '2', isLeaf: false, level: 1},
{id: '7', name: '节点7', parent_id: '3', isLeaf: true, level: 2},
{id: '8', name: '节点8', parent_id: '3', isLeaf: true, level: 2},
{id: '9', name: '节点9', parent_id: '4', isLeaf: true, level: 2},
{id: '10', name: '节点10', parent_id: '4', isLeaf: true, level: 2}
];
$("#treegrid").jqGrid({
datatype: "local",
data: mydata,
colNames: ['ID', '名称', '父节点'],
colModel: [
{name:'id', index:'id', width:55},
{name:'name', index:'name', width:200},
{name:'parent_id', index:'parent_id', width:100, hidden: true}
],
treeGrid: true,
treeGridModel: 'adjacency',
ExpandColumn: 'name',
height: 'auto',
caption: 'treeReader 加载本地树形数据示例',
treeReader: {
level_field: "level",
parent_id_field: "parent_id",
leaf_field: "isLeaf",
expanded_field: "expanded"
}
});
});
</script>
</head>
<body>
<table id="treegrid"></table>
</body>
</html>
```
在浏览器中打开该页面,即可看到一个使用 `treeReader` 属性加载本地树形数据的 jqGrid 表格。其中,`mydata` 是本地的树形数据,`treeReader` 属性设置了树形数据的一些字段信息,例如 `level_field` 表示节点的层级,`parent_id_field` 表示节点的父节点 ID,`leaf_field` 表示节点是否为叶子节点,`expanded_field` 表示节点是否已展开。
阅读全文