ztree简介_动力节点Java学院整理

zTree是一款基于JQuery核心代码的Tree插件，其强大的功能与灵活的配置使其能满足大部分常见需求。今天，让我们一起zTree的基本知识，领略其独特的魅力。

【简介】

zTree插件以其出色的性能、丰富的功能以及灵活的配置而著称。这款插件不仅能在IE、FireFox、Chrome等主流浏览器中流畅运行，更能在同一页面内生成多个Tree实例，极大地满足了复杂页面的展示需求。

zTree支持JSON数据格式，既可以选择一次性静态生成，也可以通过Ajax实现异步加载，为数据的动态展示提供了极大的便利。zTree还具备丰富的事件响应和反馈机制，使得用户与Tree的交互更加自然流畅。除此之外，zTree还支持节点移动、编辑、删除等操作，并允许用户根据自己的喜好更换皮肤、自定义图标，极大地提升了用户体验。

【特色功能】

zTree提供了极其灵活的checkbox或radio选择功能，简单的参数配置就能实现灵活多变的功能。这意味着，用户可以根据自己的需求，轻松地实现各种复杂的业务逻辑。

【部分函数和属性介绍】

核心函数zTree(setting, [zTreeNodes])是zTree插件的重要组成部分。这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes作为参数，用于建立Tree结构。

setting对象中包含了zTree的各种配置信息，如树的展示方式、节点的样式、事件的处理函数等。而zTreeNodes则包含了树的所有节点信息，每个节点都可以有自己的属性，如节点的名称、URL、子节点等。

zTree的核心参数配置

zTree的配置参数都集中在这里设置，这里决定了树的外观、事件响应以及访问路径等所有细节。

一、核心参数setting

zTree的所有样式、事件及路径配置都在这里完成。简单来说，树的展示样式、节点间的连线、节点上的复选框等都在这个setting中定义。

例如：

```javascript

var setting = {

showLine: true, // 是否显示节点间的连线

checkable: true // 节点上是否显示复选框

};

```

由于参数众多，详细参数请参见zTreeAPI。

二、核心参数zTreeNodes

zTree的全部节点数据集合，采用JSON对象组成的数据结构，简单来说，这里以Json格式保存了树的所有信息。

zTreeNodes的格式分为两种，一种是带有父子关系的标准格式，另一种是简单的Array格式。

1. 带有父子关系的标准zTreeNodes格式示例：

```javascript

var zTreeNodes = [

{

"id": 1,

"name": "test1",

"nodes": [

{

"id": 11,

"name": "test11",

"nodes": [

{

"id": 111,

"name": "test111"

}

]

},

{

"id": 12,

"name": "test12"

}

]

},

// ...更多节点

];

```

2. 带有父子关系的简单Array格式（isSimpleData）的zTreeNodes示例：

```javascript

var treeNodes = [

{"id": 1, "pId": 0, "name": "test1"},

{"id": 11, "pId": 1, "name": "test11"},

{"id": 12, "pId": 1, "name": "test12"},

{"id": 111, "pId": 11, "name": "test111"},

// ...更多节点

];

```

【实例一】（Java代码）

1. 在页面引入zTree的js和css文件。

HTML代码示例：

```html

```

2. 在script脚本中定义setting和zTreeNodes。

Java代码示例：

```javascript

var setting = {

isSimpleData : true, //数据是否采用简单 Array 格式，默认false

treeNodeKey : "id", //在isSimpleData格式下，当前节点id属性

treeNodeParentKey : "pId", //在isSimpleData格式下，当前节点的父节点id属性

showLine : true, //是否显示节点间的连线

checkable : true //每个节点上是否显示 CheckBox

};

var treeNodes = [

{"id": 1, "pId": 0, "name": "test1"},

{"id": 11, "pId": 1, "name": "test11"},

{"id": 12, "pId": 1, "name": "test12"},

{"id": 111, "pId": 11, "name": "test111"},

③ 动态构建树形结构并赋予右键菜单功能

一、配置setting

我们需要配置zTree的基本设置。在这里，我们将设置异步获取数据、数据格式、节点间的连线显示等参数。为右键点击事件配置回调函数。

```javascript

// 配置zTree的setting

var setting = {

async: true, // 异步加载子节点数据

asyncUrl: "/ospm/loginInfo/doGetPrivilegeTree.action", // 异步加载数据的URL地址

// 其他配置参数...

};

```

二、配置鼠标右键事件与显示右键菜单

接下来，我们配置鼠标右键点击事件并显示右键菜单。当用户右键点击树节点时，将展示相应的操作选项，如增加、删除、编辑和查看。

```javascript

// 显示右键菜单的函数

function showRMenu(type, x, y) {

$("rMenu ul").show(); // 显示菜单列表

// 根据type调整菜单内容...

$("rMenu").css({top: y+"px", left: x+"px", display: "block"}); // 定位并显示菜单

}

// 隐藏右键菜单的函数

function hideRMenu() {

$("rMenu").hide(); // 隐藏菜单

}

// 鼠标右键事件，创建右键菜单

function zTreeOnRightClick(event, treeId, treeNode) {

if (!treeNode) {

// 如果未选中节点，则取消选中并显示根节点菜单

zTree.cancelSelectedNode();

showRMenu("root", event.clientX, event.clientY);

} else if (treeNode && !treeNode.noR) { // 如果节点允许右键操作...

// 其他逻辑处理...

}

}

```

我们需要定义右键菜单的HTML结构。这里使用了一个简单的div来模拟菜单，并通过点击不同菜单项触发相应的事件。

```html

```

三、页面加载时生成树并监听鼠标点击事件