创建jQgrid树形表格

最新推荐文章于 2024-08-20 21:48:38 发布

linziping

最新推荐文章于 2024-08-20 21:48:38 发布

阅读量3.8k

点赞数 3

分类专栏： javascript 文章标签： jQgrid 树形结构表格 jQuery

本文链接：https://blog.csdn.net/linziping/article/details/90720733

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

创建 jQgrid树形表格

官网地址：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:treegrid
案例地址：https://blog.mn886.net/jqGrid/

1、编写html页面引入相应插件文件
jQgrid基于jQuery库，首先要引入jQuery.js；表格样式使用了boostrap，引入了boostrap.min.css；引入ui.jqgrid.css、jquery.jqGrid.min.js、grid.locale-cn.js

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	    <link rel="shortcut icon" href="favicon.ico">
	    <link href="../../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
	    <link href="../../css/plugins/jqgrid/ui.jqgrid.css" rel="stylesheet" />
	    <link href="../../css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
	</head>
	<body>
		
		<table id="treeTable"></table>
	</body>
	<script src="../../js/jquery.min.js?v=2.1.4"></script>
	<script src="../../js/bootstrap.min.js?v=3.3.6"></script>
	<script src="../../js/plugins/jqgrid/jquery.jqGrid.min.js"></script>
	<script src="../../js/plugins/jqgrid/i18n/grid.locale-cn.js"></script>
</html>

2、jQgrid初始配置

$('#treeTable').jqGrid({
	url: '../../data/department.json', // 本地json数据
	styleUI:'Bootstrap', // 使用Boostrap样式
	datatype: 'json',
	treeGrid: true,  // 启用treeGrid树形表格
	treeGridModel: 'adjacency', // treeGrid所使用的数据结构方法,nested:嵌套集模型，adjacency: 邻接模型
	ExpandColumn: 'name', // 指定那列来展开tree grid，默认为第一列
	colNames: ['部门名称','联系电话','部门地址','启用','部门描述'],
	colModel: [
		{ name:"name", index:"name", align: "left", width: 300, sortable: false },
		{ name:"tel", index:"tel", align: "left", width: 160, sortable: false },
		{ name:"address", index:"address", align: "left", width: 400, sortable: false },
		{ name:"status", index:"status", align: "left", width: 140, sortable: false, formatter:'checkbox', editoptions:{value:'1:0'}, formatoptions:{disabled:false} },
		{ name:"description", index:"description", align: "left", width: 600, sortable: false }
	],
	autowidth: true,
	jsonReader: {
		rows: 'rows',
		repeatitems: false
	},
	treeReader: { // 扩展表格的colModel
	     level_field: "level",  //  treeGrid等级字段，从0开始
   		parent_id_field: "parent",  // treeGrid父级id字段
  		leaf_field: "isLeaf",  // 是否叶子节点字段
   		expanded_field: "expanded" //treeGrid是否展开字段 
	}
});

注意：
下面是实现treeGrid树形结构所需的基本配置

	treeGrid: true,  // 启用treeGrid树形表格
	treeGridModel: 'adjacency', // treeGrid所使用的数据结构方法,nested:嵌套集模型，adjacency: 邻接模型
	ExpandColumn: 'name', // 指定那列来展开tree grid，默认为第一列
	treeReader: { // 扩展表格的colModel
		level_field: "level",  //  treeGrid等级字段，integer类型，从0开始
	    parent_id_field: "parent",  // treeGrid关联父级id字段
	    leaf_field: "isLeaf",  // 是否叶子节点字段，boolean类型
	    expanded_field: "expanded" //treeGrid是否展开字段 ，boolean类型
	}

3、本地静态json数据(adjacency：邻接数据结构)

{
	"rows": [
		{
			"id": 0,
			"status": 1,
			"name":"张三",
			"tel":"13011112222",
			"address": "辽宁省本溪市广裕路6号",
			"status": 1,
			"description": "货物仓储、运输、装卸、集装箱、接取送达、煤炭抑尘、特种设备运输等业务。",
			"level": 0,
			"parent": null, // level为0时,即第一级结构，parent为null值
			"isLeaf": false,
			"expanded": true
		},
		{
			"id": 1,
			"name":"张三",
			"tel":"13011112222",
			"address": "辽宁省本溪市广裕路6号",
			"status": 0,
			"description": "货物仓储、运输、装卸、集装箱、接取送达、煤炭抑尘、特种设备运输等业务。",
			"parent": 0,
			"level": 1,
			"isLeaf": true,
			"expanded": false
		},
		{
			"id": 2,
			"name":"张三",
			"tel":"13011112222",
			"address": "辽宁省本溪市广裕路6号",
			"status": 0,
			"description": "货物仓储、运输、装卸、集装箱、接取送达、煤炭抑尘、特种设备运输等业务。",
			"level": 0,
			"parent": null,
			"isLeaf": true,
			"expanded": false
		}
	]
}

4、页面展示
在这里插入图片描述
5、注意
1、使用treeGrid树形结构时，不支持分页、不支持多选，有兴趣的可以修改源码调试

treeGrid源码设置
setTreeGrid : function() {
//省略...
	$t.p.subGrid = false;$t.p.altRows =false;
	$t.p.pgbuttons = false;$t.p.pginput = false;
	$t.p.gridview =  true;
	if($t.p.rowTotal === null ) { $t.p.rowNum = 10000; }
	$t.p.multiselect = false;$t.p.rowList = [];
//省略...
}

2、本例修改了treeGrid的树形图标