JavaEE项目实战（OA系统）之十六_ztree之一

最新推荐文章于 2021-02-27 16:11:25 发布

hanhf

最新推荐文章于 2021-02-27 16:11:25 发布

阅读量1.3k

点赞数

分类专栏： ssh框架文章标签： jquery ztree

本文链接：https://blog.csdn.net/hanhf/article/details/52573800

版权

ssh框架专栏收录该内容

22 篇文章 8 订阅

订阅专栏

　　JavaEE项目实战（OA系统）之十六_ztree之一

　　在我们的项目中，有多个地方需要用到树状视图。

　　经过分析和比较，我们选择了ztree。ztree是一个功能强大的，基于jquery的树状视图插件，参见：http://www.treejs.cn。

　　在下载软件包后，解压，会发现其中有js和css文件夹，这就是我们需要的。将js和css文件夹复制到项目WebRoot下相应位置。

　　下面是示例代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@ taglib
	prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>树状视图控件示例1</title>
<script src="../js/ztree/jquery-1.4.4.min.js"></script>
<script src="../js/ztree/jquery.ztree.core.min.js"></script>
<script src="../js/ztree/jquery.ztree.excheck.min.js"></script>
<link type="text/css" rel="stylesheet"
	href="../css/ztree/zTreeStyle.css" />
<script>
	var setting = {
		view : {
			showLine : true,
			showIcon : true
		},
		check : {
			enable : true
		},
		data : {
			simpleData : {
				enable : true,
				idKey : "id",
				pIdKey : "pId"
			}
		}
	};
	var treeNodes = [ {
		id : 0,
		pId : -1,
		name : "部门管理",
		open: true
	}, {
		id : 1,
		pId : 0,
		name : "总公司"
	}, {
		id : 2,
		pId : 0,
		name : "泉州分公司"
	}, {
		id : 3,
		pId : 0,
		name : "厦门分公司"
	}, {
		id : 4,
		pId : 1,
		name : "总经理办公室"
	}, {
		id : 5,
		pId : 1,
		name : "财务部"
	}, {
		id : 6,
		pId : 1,
		name : "人力资源部"
	}, {
		id : 7,
		pId : 1,
		name : "行政部"
	}, {
		id : 8,
		pId : 1,
		name : "业务部"
	}, {
		id : 9,
		pId : 1,
		name : "技术部"
	}, {
		id : 10,
		pId : 2,
		name : "业务部"
	}, {
		id : 11,
		pId : 3,
		name : "业务部"
	} ];
	$(function() {
		$.fn.zTree.init($("#ztreeDemo"), setting, treeNodes);
	});
</script>
</head>
<body>
	<div id="ztreeDemo" class="ztree"></div>
</body>
</html>

　　运行效果：

　　下面逐行分析示例代码：

<script src="../js/ztree/jquery-1.4.4.min.js"></script>
<script src="../js/ztree/jquery.ztree.core.min.js"></script>
<script src="../js/ztree/jquery.ztree.excheck.min.js"></script>
<link type="text/css" rel="stylesheet"
	href="../css/ztree/zTreeStyle.css" />

　　这几行代码导入javascript和样式表，由于ztree依赖jquery，所以先要导入jquery，ztree.core是ztree核心库，ztree.excheck是复选框功能库。

	var setting = {
		view : {
			showLine : true,
			showIcon : true
		},
		check : {
			enable : true
		},
		data : {
			simpleData : {
				enable : true,
				idKey : "id",
				pIdKey : "pId"
			}
		}
	};

　　这部分定义setting变量，指定ztree的配置信息。可选的配置信息很多，参见： http://www.treejs.cn/v3/api.php。
　　其中view部分是视图，showLine是否显示连线，showIcon是否显示图标；check部分是复选框，enable是否启用复选框；data部分是数据，simpleData部分的enable是否使用简单数据，idKey指定id列的名称，pIdKey指定父id列的名称。

　　ztree的节点数据有两种格式，一种是简单数据，另一种是JSON格式。本例使用简单数据。

	var treeNodes = [ {
		id : 0,
		pId : -1,
		name : "部门管理",
		open: true
	}, {
		id : 1,
		pId : 0,
		name : "总公司"
	}, {
		id : 2,
		pId : 0,
		name : "泉州分公司"
	}, {
		id : 3,
		pId : 0,
		name : "厦门分公司"
	}, {
		id : 4,
		pId : 1,
		name : "总经理办公室"
	}, {
		id : 5,
		pId : 1,
		name : "财务部"
	}, {
		id : 6,
		pId : 1,
		name : "人力资源部"
	}, {
		id : 7,
		pId : 1,
		name : "行政部"
	}, {
		id : 8,
		pId : 1,
		name : "业务部"
	}, {
		id : 9,
		pId : 1,
		name : "技术部"
	}, {
		id : 10,
		pId : 2,
		name : "业务部"
	}, {
		id : 11,
		pId : 3,
		name : "业务部"
	} ];

　　这部分是节点数据，在javascript中使用中括号表示数组，使用大括号表示对象，这里其实是一组对象。每个节点都至少有id、pId和name三个属性，还可以有url、target、open（是否展开节点）等属性，参见： http://www.treejs.cn/v3/api.php。

	$(function() {
		$.fn.zTree.init($("#ztreeDemo"), setting, treeNodes);
	});

　　这部分调用ztree插件的init方法，init方法有三个参数：第一个参数是树状视图展示的位置，一般是一个div，第二个参数是setting，第三个参数是treeNodes，都定义在前面。

hanhf

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaEE项目实战（OA系统）之十六_ztree之一

ztree简介
复制链接

扫一扫

专栏目录

JavaEE项目实战（OA系统）之十六_ztree之一

“相关推荐”对你有帮助么？