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

来源：互联网发布：模拟核弹爆炸软件编辑：程序博客网时间：2024/06/08 05:14

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

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

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

　　下面是示例代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@ taglibprefix="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，都定义在前面。

0 0