zTree 插件的入门程序

开发者学堂课程【使用 Spring Data Redis+zTree 实现授权模型的设计与思考：zTree 插件的入门程序】学习笔记，与课程紧密连接，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/745/detail/13177

内容介绍：

一、zTree 插件的入门程序

跳转到一个页面，接下来生成一个复选的菜单，简单来讲有以下几步。

第一段假如有样式，则需要先引进样式，要引进什么只需翻看源代码

第二步是进行 zTree 的一些设置，设置的目的是将 zTree 设置成带复选框样式的。菜单有带小图标的等需要设置的是带复选框的。

第三步是提供数据，例如图表中的随意勾选等就是数据，需要提供的就是类似的数据。

第四步是调用初始化的方法，来生成一个这样的 zTree,这就是入门步骤，接下来就可以按照步骤生成。

1．先引入对应的 CSS和 JS2. zTree 的设置

第一步引入什么数据，引入的是 ZTREE DEMO 的数据，打开 index.html，里面是源码，var zNodes 表示的是数据，

{id:2,pId:0,name : " [excheck]复/单选框功能演示",open:false} ,

fid:201，pId:2，name : "checkbox勾选操作", file: "excheck/ceckbox")，表示文件夹叫做excheck，文件名叫做ceckbox 找到源文件，后右键点击edit with Notepad++

白<HEAD>

<TITLE>ZTREE DEMO - checkbox</TITLE>

<meta http-equiv="content-type" content="text/html; gharset=UTR-8"><link rel="stxlesheet" href="../../ . ./gss/demo . 955" type="text/g55"><link zel="stxleshest" href=" . ./ . ./ . ./9ss/zTreeStyle/zTreeStyle.95s" type="text/9ss""><script type="text/5avasorint" src-"../ ../. ./s/14merx-1.4.4.nin .js"></script><script type="text/1vas9xint"src=". ./ . ./ . ./1s/1mexx ·atxeg.core-3.5.Js""></sEript><script type="text/javascint" src="../../. ./1s/.9nexx.4txee · exghegk-3.5.1场"></script><!—-

<script type="text/javascript"9g=" . ./ . ./ . ./js/j.que术x·45工e9· ixedi.t-3.5.j."></script>-->

<SCRIPT type="text/1axa5sxint">

已经引入了对应的文件，可以直接复制粘贴过来，只需要查看路径是否正确，然后将路径调整正确，因为现在编写的是服务器端的一个jsp文件，将路径调整正确就很简单了。

{ pageContext.request.contextPath }表示的是根目录，下面可以一层一层的写，应该写 app,然后复制 components

<html xmlns="http: / / www . w3.org/1999/xhtmL "><head>

<title></title><link rel="styLesheet" href=""${ pageContext.request.contextPath }/components/zTree.<link rel="stylesheet" href="../../../css/zTreeStyLe/zTreeStyle.css" type="text/css"><script type="text/javascript" src="../ ../../js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="../ ../../js/jquery.ztree.core-3.5.js"></script><script type="text/javascript" src="../ ../ ../is/iquery.ztree.excheck-3.5.js"'</script>

后面的可以删除，因为demo只是针对当前的案例，也可以不拷贝，不引进css

<title></title>〈link rel="styLesheet" href="${ pagelontext.request.contextPath }/components/zTree/css/zTreesStyle/zTreeStyle.css" typ<script type="text/javascript"src="${ pageContext.request.contextPath }/components/zTree/js/jquery-1.4.4.min.js" </s<script type="text/javascript" snc="$[ pageContext.request.contextPath }/components/zTree/js/jquery.ztree.core-3.5.js<script type="text/javascript"src="${[ pagelontext.request.contextPath j/components/zTreel js/jquery.ztree.excheck-3.5

可以自己对照以下，点击 zTree,点击 css，ztreestyle 文件夹下 ztree.css，查看对应的几个文件都存在，就已经将这些文件都引入了，第一步就完成了。

第二步进行 ztree 的设置，第一步是编写 javacript 的程序，第二步设置，设置什么数据并不知道，这时需要打开 api，打开 api 中文文档，在文档中有配置详解，

setting 配置详解

var setting - i

Gtreeld : "",

Gtreeobj : null,

async : f

autoParam : [],

contentType : "application..."

dataFilter : null,

dataType : "text"",

enable : false,

otherParam : [],

type : "post"",

url : """

callback : i

beforeAsync : null,

beforeCheck : null,

beforeClick : null,

beforeCollapse : null,

beforeDblClick : null,

beforeDrag : null,

beforeDragopen : null,

zTree方法乎解

$.fn.zTree : f

init (obj, zSetting, zNodes)

GgetzTreeobj(treeld)destroy (treeld)

C_z : {tools, view , event, data}

zTreeObj :f

Csetting

addNodes (parentNode, newNodes, issilent)

cancelEditName (newName)

cancelSelectedNode (node)

checkAllNodes (checked)checkNode (node, checked, checkTypeFlag, callbackFlag)copyNode (targetNode, node, moveType, issilent)

Gdestroy o

editName (node)

expandAll (expandFlag)

expandNode (node, expandFlag, sonSign, focus, callbackFlag)

getChangeCheckedNodes ()

getCheckedNodes (checked)

getNodeByParam (key,value, parentNode)

getNodeByTld (tId)

生成的是一个带复选框，第一个添加的设置是check：{

下的 enable：false

setting.check.enable

概述【依赖 jquery.zdree.excheck 扩展 js]

设置 zTree 的节点上是警显示 checkbox / radio默认值: false

Boolean 格式说明

true / false分别表示显示/不显示复选框或单选框

setting举例

需要显示 checkbox

<script type="text/javascript">

i zTree的设置

var s = {

check:{

enable:true

}

var setting=i

check: f

enable: true

默认值是 flase，如果不显示，现在要设置成 ture，让他显示，因为写的是 jason 的模式，所以是大括号。里面要写属性，第一个属性是 check，加上冒号，大括号，表示这个属性又是一个 jason 的类型，里面再写 enable：true 表示现在要显示复选框。

设置是 key 下的 simpleData：{

Enable:false

simpleData：{

是一个简单的数据格式，

setting.data.simpleData.enable

Boolean

概述【依赖jquery ztree.core核心s ]

确定 zTree 初始化时节点数据、异步加载时的节点数据、或addNodes方法中输入的newNodes 数据是否采用简单数掘模式(Array)

不需要用户再把数据库中取出的List强行转换为复杂的JSON嵌套格式默认值: false

Boolean 格式说明

true / false分别表示使用/不使用简单数据模式

如栗设置为true，请务必设置setting.data.simpleData 内的其他参数: idKey / pldKey / rootPld，并且让数据满足父于关系-

setting举例

使用简单Aray格式的数据

var setting= i

data:i

simpleData:f

enable: true,idKey."id ,pldKey:"pld ,rootPld:0

以下是提供的一组数据的模板，其中有id:1,pid：0，name：test11

Pid 是 id 的一个复节点，假如设置属性enable=ture之后就可以提供类似的简单数据，

var treeNodes = l

i:1, "pld"T:0, "name":"test17,{id:11,"Pld"T":1, ""name":"test117.{Jd:12,Tld":1,"name":"test127.{"MJd:111,"pld":11,"name":"test1117}

设置：

var s = {

check : {

enable:true}，

data:{

simpleData:{

enable:true

}

和 check 是同级，里面属性是 simpledata，设置完成代表设置了一个简单的数据格式，以上就是设置的全部操作。

2、提供数据

因为提供的是简单的数据格式，就完全可以将刚刚看到的数据格式直接复制过来，因为下面的内容就是一个标准的数据格式，所以可以直接提供该数据，然后修改名字。

var treeNodes = l

i:1, "pld"T:0, "name":"test17,

{id:11,"Pld"T":1, ""name":"test117

{id:12,Tld":1,"name":"test127.

{"id:111,"pld":11,"name":"test1117}

/提供数据

var treeNodes = [

{ "id":1，"pId":0，"name":"系统管理"}，

{ "id":11，"pId":1，"name":”用户管理"},

{"id":12，"pId":1，"name" :"角色管理"}，

{ "id":2，"pId":0，"name":"货运管理"}，

{ "id":21，"pId":2，"name": "购销合同"},

{ "id":22，"pId":2，"name" :"出口报运}];

Id1和id2都分别是一个复菜单，剩下的是主菜单，这就是一个标准的数据。

3、调用 zTree 初始化的方法

zTree 方法详解

$.fn zTree : i

init (obj, zSetting, zNodes)getzTreeobj(treeld)

destroy (treeld)

_z : {tools, view , event, data}

里面有个 init，点击$.fn.zTree.init

概述【依赖 Jquery ztree.core 核心 s]

zTree 初始化方法,创建 zTree 必须使用此方法

（1）页面需要进行 W3C 申明,例如:<IDOCTYPE html PUBLIC--IW3CIDTD XHTML 1.0Transitional/ENT"httplwww.w3.org/TRxhtml1/DTDixhtml1-transitional.dtd ">o

（2）需要首先加载 jquery-1.4.2.js 或其他更高版本的jQuery o

（3）需要加载 jquery-ztree.core-3.0.js，如果需要用到编辑功能checkboxlradio还需要分别加载 jquery-ztree.exedit-3.0.js 和jquery-ztree.excheck-3.0.js o

（4）需要加载 zTreeStyle.css以及zTreeStyle目录下的img文件。

（5）如果需要使用自定义图标请参考相应的Demoo

（6）请注意设置zTree的容器样式 class="ztree"，其中 "ztree”这个 className，可以根据需要随意修改别忘了修改cSS中对应名字就是了，对于容器如果需要增加其他特殊样式，可根据自己的需要进行修改。都需要先加载，之前都已经加载过了，并且没问题。

4.Function 参数说明

obj、jQuery Object 用于展现zTree的 DOM容彩

zsetting、JSON

zTree的配置数据,三体请参考“setting配宜详解"中的各个孱性详细说明zNodes、Array(JSON)/JSON

zTree的节点数弱,只体请参考treeNode节点数据详解"中的各个属性详细说明

1.v3×支持单独添加一个节点,即如栗只新增一个节点。不用必须包在数组中

2.如桑需要异步加载根节点,可以设且为nul或[]

3.使用简单数据模式,请参考setting.data.simpleData内的房性说明返回值与JSON。
zTree对象。捉供换作zTree的各种方法,对于通过j躲作zTree来说必须通过此对象如果不需要自行设定全局交量保存，可以利用S.fn.zTree.getZTreeOb]j方法随时获取

第一步可以理解成为再<body>里面添加一个div，添加一个容器，就可以将zTree生成到容器里面去。

第二步就是提供配置数据，

第三步是节点数据

调用方法：

.S(document).ready(functionok

zTeeObj= $.fn.zTree.init(S("#tree"), setting, zTreeNodes);

<BODY>

sulid=tree" class="ztree" style=-width 230px; over flow.auto; ><lub/BODY

HTML>

<body>

<h3>zTree插件的入门程序</h3>

<%--DOM的容器，用于生成zTree数--%><div>

//调用zTree初始化的方法$(function(){

//页面一加载，在页面上生成树[【初始化的方法

$.fn.zTree.init($("#tree"),setting，zTreeNodes ) ;});

script>

第一个是#号设置，然后是setting，第三个是treNodes就是数据的地方，这棵树彻底初始化完成了，再返回之前的项目之中。重新刷新以下项目，登录进去点击角色管理，点击菜单跳转到之间的页面。

有复选框，返回值

5.JSON

zTree对象。捉供换作zTree的各种方法,对于通过j躲作zTree来说必须通过此对象如果不需要自行设定全局交量保存，可以利用S.fn.zTree.getZTreeOb]j方法随时获取

设置树形折叠菜单的时候默认都是折叠状态，假如希望默认全部都是展开的效果

//调用zTree初始化的方法

$(function(){

//页面一加载，在页面上生成树

//初始化的方法

var obj = $. fn.zTree . init($("#tree"), s, treeNodes );

// obj指的就是zTree的对象

//展开所有的节点

obj . expandAll(true);

zTreeobj.expandAll

展开/折叠全部节点

此方法不会在发beforeExpand / onExpand和beforeCollapse / onCollapse事件回调函数◎请通过zTree对象执行此方法。

zTreeobj.expandAll

展开/折叠全部节点

此方法不会在发beforeExpand / onExpand和beforeCollapse / onCollapse事件回调函数◎请通过zTree对象执行此方法。

Function参数说明

expandFlag

Boolean

expandFlag = true 表示展开全部节点 expandFlag = false 表示折叠全部节点返回值

返回表示最终实际换作情况

true 表示晨开全部节点false表示折叠全部节点nu表示不存在任何父节点

重新刷新一下，点击角色管理，菜单就可以看到效果，所有的复选框都是展开的。

zTree 插件的入门程序 | 学习笔记