JqGrid中文文档之TreeGrid
2024-09-01 08:33:52
几年之前写过一个非常简单的jqgrid属性说明。
今天又用到jqgrid这个控件了，捣鼓了许久，第一个treegrid完成了
jQuery("#list1").jqGrid({
url: 'NBuilding.aspx?oper=GetTreeJson&t=' + new Date().getTime(),
treedatatype: "json",
datatype: 'json',
mtype: "POST",
colNames: ["ID", "代码", "名称", "列1"],
colModel: [
{ name: 'id', index: 'id', width: 50, hidden: true, key: true },
{ name: 'dm', index: 'dm', width: 50, align: "center" },
{ name: 'mc', index: 'mc', width: 180 },
{ name: 'dd', index: 'dd', align: "center" }
],
height: $(".Content").height() - 25,
width: $(".Content").width() - 5,
treeGrid: true,//启用树型Grid功能
treeGridModel: 'adjacency',//表示返回数据的读取类型，分为两种：和adjacency
ExpandColumn: 'mc',//树型结构在哪列显示
caption: ""
});
上面这是主要的js代码
特别要说明的是treeGridModel分为两种：nested和adjacency；默认值：nested
再看一下使用adjacency方式,服务器返回的JSON数据
{
"total": 12,
"records": 1,
"page": 1,
"rows": [
{
"id": 1,
"cell": [
1,
"QY0001",
"南开区",
0,
0,
0,
false,
true,
true
]
},
{
"id": 4,
"cell": [
4,
"LY0007",
"集团",
0,
1,
1,
false,
false,
true
]
},
{
"id": 6,
"cell": [
6,
"LC0006",
"办公地点二",
0,
2,
4,
false,
false,
true
]
},
{
"id": 7,
"cell": [
7,
"FJ0013",
"201",
0,
3,
6,
false,
false,
true
]
},
{
"id": 10,
"cell": [
10,
"XL0014",
"电脑办公",
0,
4,
7,
true,
false,
true
]
},
{
"id": 8,
"cell": [
8,
"FJ0014",
"202",
0,
3,
6,
false,
false,
true
]
},
{
"id": 11,
"cell": [
11,
"XL0015",
"机房空调",
0,
4,
8,
true,
false,
true
]
},
{
"id": 2,
"cell": [
2,
"QY0003",
"西青区",
28.5,
0,
0,
false,
true,
true
]
},
{
"id": 3,
"cell": [
3,
"LY0006",
"A座",
28.5,
1,
2,
false,
false,
true
]
},
{
"id": 5,
"cell": [
5,
"LC0005",
"办公地点三",
28.5,
2,
3,
false,
false,
true
]
},
{
"id": 9,
"cell": [
9,
"XL0013",
"测试表（.252）",
14.9,
3,
5,
true,
false,
true
]
},
{
"id": 12,
"cell": [
12,
"XL0017",
"两块表同时测试",
13.6,
3,
5,
true,
false,
true
]
}
]
}
仔细观察在cell数组，我们只定义了4列，非treeGrid时我们返回4列就可以了
但是在adjacency方式我们需要在原本的4列数据之后再增加如下字段数据来支持TreeGrid
adjacency方式：
| 列 | 解释 |
| level_field | 节点的级别，默认最高级为0 |
| parent_id_field | 该行数据父节点的id |
| leaf_field | 是否为叶节点，为true时表示该节点下面没有子节点了 |
| expanded_field | 是否默认展开状态 |
| loaded_field | 是否已经加载过子节点（为false时点击节点会自动加载子节点） |
| icon_field | 图标 |
nested方式：
| 列 | 解释 |
| level_field | 节点的级别，默认最高级为0 |
| left_field | 用来确定这个节点的子节点ID开始数 |
| right_field | 用来确定这个节点的子节点ID结束数 |
| lead_field | 是否为叶节点，为true时表示该节点下面没有子节点了 |
| expanded_field | 是否默认展开状态 |
| loaded_field | 是否已经加载过子节点（为false时点击节点会自动加载子节点） |
| icon_field | 图标 |
最新文章
- CSS 百分比 margin & padding
- Maven打包跳过测试
- .Net Core 1.0.0正式版安装及示例教程
- Linux中vi、vim命令大全
- oracle的substr和replace
- mysql备份工具 ：mysqldump mydumper Xtrabackup 原理
- 基于BaseHTTPServer的简单存储服务器
- ubuntu下 使用AB做压力测试
- 在右键添加Cmder here选项，添加启动Cmder的快捷键
- URAL1523(dp+树状数组)
- SharePoint 2016 自定义城市和区域字段
- ionic的弹出框$ionicPopover
- fputcsv 导出CSV、Excel DownLoad
- linux常用的压缩与解压缩命令
- NumPy的思考……
- linux下objdump应用
- K8s部署使用CFSSL创建证书
- linux pidstat 命令详解
- Python3 tkinter基础 Entry insert delete 点击按钮 向输入框赋值 或 清空
- skipper http router 简单试用