jQuery树形控件zTree使用小结
作者：Fonour
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了jQuery树形控件zTree使用方法，zTree树插件的基本使用方法，感兴趣的小伙伴们可以参考一下
0 zTree简介&
树形控件的使用是应用开发过程中必不可少的。zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。&
0.0 zTree的特点
&•最新版的zTree将核心代码按照功能进行了分割，不需要的代码可以不用加载，如普通使用只需要加载核心的jquery.ztree.core-3.5.js，需要使用勾选功能加载jquery.ztree.excheck-3.5.min.js，需要使用编辑功能加载jquery.ztree.exedit-3.5.min.js
&•采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
&•兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
&•支持 JSON 数据
&•支持静态 和 Ajax 异步加载节点数据
&•支持任意更换皮肤 / 自定义图标（依靠css）
&•支持极其灵活的 checkbox 或 radio 选择功能
&•提供多种事件响应回调
&•灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽
&•在一个页面内可同时生成多个 Tree 实例
&•简单的参数配置实现，灵活多变的功能
0.1 zTree文件介绍
&从zTree官网下载的zTree包括以下组成部分&
•metroStyle文件夹：zTree的metro风格样式相关文件（图片及css样式表）。
•zTreeStyle文件夹：zTree的标准风格样式文件夹（图片及css样式表）
•js文件：zTree.all.js是完整的js库，可单纯加载此文件实现所有zTree功能，ztree.core、ztree.excheck、ztree.exedit、ztree.exhide是对ztree按照功能进行的分割，分别对应基本功能、复选功能、编辑功能、显隐功能。&
1 zTree的基本使用
1.0 zTree的创建
在页面中添加对zTree的js及css引用，由于zTree基于JQuery，JQuery的引用是必须的。&
&!DOCTYPE html&
&TITLE& ZTREE DEMO &/TITLE&
&meta http-equiv="content-type" content="text/ charset=UTF-8"&
&link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css"&
&script type="text/javascript" src="jquery-1.4.2.js"&&/script&
&script type="text/javascript" src="jquery.ztree.core-3.x.js"&&/script&
&SCRIPT LANGUAGE="JavaScript"&
var zTreeO
var setting = {};
// zTree 的参数配置，后面详解
var zNodes = [
// zTree 的数据属性，此处使用标准json格式
name: "test1", open: true, children: [
{ name: "test1_1" }, { name: "test1_2" }]
name: "test2", open: true, children: [
{ name: "test2_1" }, { name: "test2_2" }]
$(document).ready(function () {
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); //初始化zTree，三个参数一次分别是容器(zTree 的容器 className 别忘了设置为 "ztree")、参数配置、数据源
&ul id="treeDemo" class="ztree"&&/ul&
运行结果如下
1.1 zTree的配置
zTree的配置采用Json格式，按照配置的类型分为view（可视界面相关配置）、data（数据相关配置）、check（复选框相关配置）、callback（各类事件的回调函数配置）、async（zTree异步加载配置），一下是我们经常会使用到的一些配置及说明，其他详细配置可以参考zTree官方API文档的详细介绍。&
var setting = {
selectedMulti: true, //设置是否能够同时选中多个节点
showIcon: true,
//设置是否显示节点图标
showLine: true,
//设置是否显示节点与节点之间的连线
showTitle: true,
//设置是否显示节点的title提示信息
simpleData: {
enable: false, //设置是否启用简单数据格式（zTree支持标准数据格式跟简单数据格式，上面例子中是标准数据格式）
idKey: "id",
//设置启用简单数据格式时id对应的属性名称
pidKey: "pId" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构
enable: true
//设置是否显示checkbox复选框
callback: {
onClick: onClick,
//定义节点单击事件回调函数
onRightClick: OnRightClick, //定义节点右键单击事件回调函数
beforeRename: beforeRename, //定义节点重新编辑成功前回调函数，一般用于节点编辑时判断输入的节点名称是否合法
onDblClick: onDblClick,
//定义节点双击事件回调函数
onCheck: onCheck
//定义节点复选框选中或取消选中事件的回调函数
enable: true,
//设置启用异步加载
type: "get",
//异步加载类型:post和get
contentType: "application/json", //定义ajax提交参数的参数类型，一般为json格式
url: "/Design/Get",
//定义数据请求路径
autoParam: ["id=id", "name=name"] //定义提交时参数的名称，=号前面标识节点属性，后面标识提交时json数据中参数的名称
需要注意的是，zTree的事件回调部分，基本上每一个事件都对应一个beforeXXX事件，比如onClick事件对应有一个beforeOnClick事件，主要用于控制相关事件是否允许执行，如果before事件返回false，则取消执行对应相关事件。&
1.2 zTree的数据格式
&zTree的每一个节点都是一个treeNode对象，treeNode对象经常用到的属性和方法如下：&
treeNode: {
//节点显示的文本
checked, //节点是否勾选，ztree配置启用复选框时有效
//节点是否展开
//节点的图标
iconOpen, //节点展开式的图标
iconClose, //节点折叠时的图标
//节点的标识属性，对应的是启用简单数据格式时idKey对应的属性名，并不一定是id,如果setting中定义的idKey:"zId",那么此处就是zId
//节点parentId属性，命名规则同id
children, //得到该节点所有孩子节点，直接下级，若要得到所有下属层级节点，需要自己写递归得到
isParent, //判断该节点是否是父节点，一般应用中通常需要判断只有叶子节点才能进行相关操作，或者删除时判断下面是有子节点时经常用到。
getPath() //得到该节点的路径，即所有父节点，包括自己，此方法返回的是一个数组，通常用于创建类似面包屑导航的东西A--&B--&C
zTree的数据源一般有标准数据格式、简单数据格式两种，标准数据格式通过指定节点的chidren属性构建层级关系，而简单数据格式根据根据id，pid属性构建层级关系，我们在应用开发中使用关系型数据库，一般采用的都是简单数据格式。
&标准数据格式
var nodes = [
{name: "父节点1", children: [
{name: "子节点1"},
{name: "子节点2"}
简单数据格式
var nodes = [
{id:1, pId:0, name: "父节点1"},
{id:11, pId:1, name: "子节点1"},
{id:12, pId:1, name: "子节点2"}
注意zTree的默认配置是不启用简单数据格式，使用简单数据格式一定要在setting中进行简单数据格式的相关配置。&
1.3 zTree的常用方法
zTree的主要操作方法介绍如下&
获取zTree对象：var treeObj = $.fn.zTree.getZTreeObj("tree");
增加节点：addNodes(parentNode,index,newNodes,isSlient)
parentNode:指定的父节点，如果增加根节点，请设置 parentNode 为 null 即可
index:新节点插入的位置（从 0 开始），index = -1 时，插入到最后，此参数可忽略
newNodes：需要增加的节点数据 JSON 对象集合，数据只需要满足 zTree 的节点数据必需的属性即可&
isSilent：true 时，添加节点后不展开父节点，其他值或缺省状态都自动展开
&勾选或取消勾选全部节点：checkAllNodes(checked);
&checked参数为true时全部勾选，为false时全部取消勾选。
&勾选或取消勾选单个节点：checkNode(node, checked, checkedTypeFlag，callbackFlag);
&node：要进行操作的节点
&checked：为true勾选，为false取消勾选
&checkeTypeFlag:为true表示对当前结点的子节点及父节点进行勾选状态的联动，为false不联动
&callbackFlag:为true时表示执行beforeOnCheck和onCheck事件的回调函数，为false不执行
&edit(node);& 使节点处于编辑状态，必须引用jquery.ztree.exedit 扩展。
&展开或折叠全部节点：expandAll(expand);
&expand为true是展开所有节点，为false是折叠所有节点。
&根据节点属性查找结点：getNodesByParam(key,value, parentNode);
&key:属性名
&value:属性值
&parentNode:是否在指定节点下查找，为null表示整个树查找。
&获取被勾选或未被勾选的节点集合：getCheckedNodes(checked);
&checked为true表示获取所有被勾选的节点集合，为false表示所有未被勾选的节点集合
&获取输入框勾选状态被改变的节点集合：getChangeCheckedNodes()
2 zTree的常用操作
<span style="color: #.0 ajax请求数据并创建zTree&
$(function () {
var setting = {
//此处根据自己需要进行配置
selectedMulti: false
simpleData: {
enable: true
callback: {
onClick: onDesignTreeClick,
onRightClick: OnRightClick,
beforeRename: beforeRename,
onCheck：onCheck
type: "Get",
url: "/Design/GetDesignTreeData",
//ajax请求地址
success: function (data) {
$.fn.zTree.init($("#treeZo"), setting, data); //加载数据
后台代码如下，可以根据需要返回你想要的任何数据，绑定到zTree上，然后通过treeNode.属性名取到对应的值，实现一些界面逻辑操作。&
public ActionResult GetDesignTreeData()
var result = _designAppService.GetDesignTreeData();
List&ModelTreeViewModel& treeModels = new List&ModelTreeViewModel&();
bool open =
foreach (var design in result.Designs)
if (design.ParentId == Guid.Empty)
else open =
treeModels.Add(new ModelTreeViewModel() { Id = design.Id.ToString(), PId = design.ParentId.ToString(), Name = design.Name, Open = open, Data = design.Remarks &#63;&#63; "", ViewPoint = design.ViewPoint &#63;&#63; "", Checked = true });
return Json(treeModels, JsonRequestBehavior.AllowGet);
<span style="color: #.1 节点单击操作
&节点单击事件会捕获事件对象e，zTree的唯一标识treeId，当前选中的节点对象treeNode三个参数。根据实际需求可获取treeNode中包含的任何属性数据，进行相关操作&
function onClick(e, treeId, treeNode) {
if (treeNode.isParent) //如果不是叶子结点，结束
alert(treeNode.name); //获取当前结点上的相关属性数据，执行相关逻辑
2.2 节点复选框事件&
一般情况下我们会直接使用treeObj.getCheckedNodes(true);获取所有选中的节点，然后遍历所有选中的节点进行相关操作，当面对大数据量时，这种操作方法便不可取，可通过getChangeCheckedNodes()方法获取勾选状态被改变的节点集合，值针对状态改变的节点做相应处理。
function onCheck() {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); //获取树对象
var nodes = treeObj.getChangeCheckedNodes();
//获取勾选状态改变的节点
var designIds = [];
var status = 0;
//定义初始勾选状态为未勾选
if (nodes[0].checked)
status = 1;
//如果状态改变节点为勾选状态，说明当前操作是从未勾选变为已勾选。
$.each(nodes, function (i, item) {
designIds.push(item.id);
//将状态改变的节点id输出到数组
item.checkedOld = item.
//这句话很关键，将节点的初始状态置为当前状态。否则每次勾选操作获取状态改变节点时只会跟树初始化的状态相比较。
type: "Post",
url: "/Design/GetRelationComponentIdsByDesigns",
data: { "designIds": designIds },
success: function (data) {
RealBimOcx.BatchAddSubClrInfoBegin();
$.each(data.result, function (i, item) {
if (status == 1)
//这里根据发生改变的节点是勾选还是为勾选进行相关逻辑操作。
RealBimOcx.AddSubClrInfo(item, 255, 255, 0);
RealBimOcx.AddSubClrInfo(item, 0, 255, 0);
if (i % 100 == 0) {
RealBimOcx.BatchAddSubClrInfoEnd();
RealBimOcx.BatchAddSubClrInfoBegin();
RealBimOcx.BatchAddSubClrInfoEnd();
2.3 实现zTree的右键增删改操作
首先定义右键弹出面板&
&div id="rMenu" style="z-index:100;"&
&li id="m_add" onclick="addTreeNode();"&新增节点&/li&
&li id="m_del" onclick="removeTreeNode();"&删除节点&/li&
&li id="m_edit" onclick="editTreeNode();" style="border-bottom:1px solid #cecece"&编辑节点&/li&&li id="m_left"&升级&/li&
&li id="m_right"&降级&/li&
&li id="m_up"&上移&/li&
&li id="m_down" style="border-bottom:1px solid #cecece"&下移&/li&
&li id="m_reset" onclick="resetTree();"&重置节点&/li& &li id="m_open" onclick="treeOpen()"&展开所有&/li&
&li id="m_stop" onclick="treeStop()"&收起所有&/li&
实现zTree右键单击事件回调函数&
//右键单击回调函数
function OnRightClick(event, treeId, treeNode) {
$("#treeZo").hide();
if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
zTree.cancelSelectedNode();
showRMenu("root", event.clientX, event.clientY); //根据鼠标位置显示右键操作面板
} else if (treeNode && !treeNode.noR) {
zTree.selectNode(treeNode);
showRMenu("node", event.clientX, event.clientY);
$("#treeZo").show();
//根据节点类型，控制右键操作菜单哪些可用哪些不可用
function showRMenu(type, x, y) {
$("#rMenu ul").show();
if (type == "root") {
$("#m_del").hide();
$("#m_edit").hide();
$("#m_left").hide();
$("#m_right").hide();
$("#m_up").hide();
$("#m_down").hide();
$("#m_add").addClass('mboder');
$("#m_del").show();
$("#m_edit").show();
$("#m_left").show();
$("#m_right").show();
$("#m_up").show();
$("#m_down").show();
$("#m_add").removeClass('mboder');
rMenu.css({ "top": y + "px", "left": x + "px", "visibility": "visible" });
$("body").bind("mousedown", onBodyMouseDown);
//以藏右键面板
function hideRMenu() {
if (rMenu) rMenu.css({ "visibility": "hidden" });
$("body").unbind("mousedown", onBodyMouseDown);
//单击页面其他位置 隐藏右键面板
function onBodyMouseDown(event) {
if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length & 0)) {
rMenu.css({ "visibility": "hidden" });
//增加节点
function addTreeNode() {
hideRMenu();
var name = new Date().getTime(); //利用时间戳生成节点名称，保证节点名称唯一
var newNode = {
name: name
if (zTree.getSelectedNodes()[0]) {
newNode.checked = zTree.getSelectedNodes()[0].
newNode.pid = zTree.getSelectedNodes()[0].
zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
zTree.addNodes(null, newNode);
var node = zTree.getNodeByParam("name", name, null); //得到新增加的节点
zTree.selectNode(node); //选中新增加的节点
zTree.editName(node);
//让新增加的节点处于编辑状态
function editTreeNode() {
var nodes = zTree.getSelectedNodes(); //得到选中节点集合
if (nodes && nodes.length & 0) {
var parent = nodes[0].getParentNode(); //得到选中节点的父节点
if (parent) {
nodes[0].pid = parent. //如果选中节点父节点存在，将当前结点的pid属性值设置为父节点的id
zTree.editName(nodes[0]); //让选中节点处于编辑状态
hideRMenu();
//隐藏右键面板
节点编辑状态离开时触发事件&
//编辑并保存节点
function beforeRename(treeId, treeNode, newName, isCancel) {
if (newName.length == 0) { //节点名称判断
alert("不能为空。");
//数据入库
type: "Post",
url: "/Design/InsertOrUpdate",
data: { "dto": { "Id": treeNode.id, "ParentId": treeNode.pid, "Name": newName } },
succes: function (data) {
if (data.result == "Faild") {
layerAlert("保存失败。");
treeNode.id = data. //将返回的id赋值给当前结点
删除节点数据&
function removeTreeNode() {
hideRMenu();
var nodes = zTree.getSelectedNodes();
if (nodes && nodes.length & 0) {
if (nodes[0].children && nodes[0].children.length & 0) {
alert("包含下级，无法删除。");
if (confirm("该操作会将关联数据同步删除，是否确认删除？") == true) {
type: "Post",
url: "/Design/Delete",
data: { "id": nodes[0].id },
success: function (data) {
if (data.result == "Success") {
zTree.removeNode(nodes[0]);
alert("删除失败。");
2.4 一些总结
&我们通常使用到树形控件做授权或关联类似的操作，一般会先全部取消勾选，然后根据选中的数据关联对树控件的复选框进行选中操作，在大数据量时，大约几万条数据，全部取消勾选+根据关联数据勾选相关节点这个操作通过js执行会很慢，这种情况建议在后台通过关联关系重新组织zTree需要的数据源，对每条数据（对应树节点）设置checked属性，然后再前台页面重新加载树，这种操作速度要快得多。&
type: "Get",
url: "/Model/GetRelationModelTreeData&#63;designId=" + treeNode.id + "&t=" + new Date(),
success: function (data) {
//$.each(data.result, function (i, item) {
// var node = modelTree.getNodeByParam("id", item, null);
// modelTree.checkNode(node, true, true);
$.fn.zTree.init($("#treejian"), setting1, data.result); //改为重新加载，比js循环勾选速度要快。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具&&&&异步&同步加载树节点----zTree(一)
异步&同步加载树节点----zTree(一)
该资源原理说明与博客《异步&同步加载树节点----zTree(一)》相一致。
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
开发技术下载排行ztree做的树形展示，如何实现点击上下移按钮让节点在同级中上下移？ - 开源中国社区
当前访客身份：游客 [
当前位置：
共有4个答案
<span class="a_vote_num" id="a_vote_num_
官网有例子 &可以直接拖拽顺序的
http://www.ztree.me/v3/demo.php#_511
--- 共有 1 条评论 ---
不能拖拽的，要点击实现，挺麻烦的
(5个月前)&nbsp&
<span class="a_vote_num" id="a_vote_num_
拖拽的事件用点击触发就可以了，无非就是事件+子父级关系处理好
--- 共有 1 条评论 ---
找出每个节点在树形里面的序号，调用moveNode()，只能移动最外层节点，二级三级节点没效果，遇到过吗？
(5个月前)&nbsp&
<span class="a_vote_num" id="a_vote_num_
还有个土办法 ，先删除当前要移动的节点，然后再指定位置新增节点
<span class="a_vote_num" id="a_vote_num_
moveNode 方法完全可以满足需要吧
更多开发者职位上
有什么技术问题吗？
漂流的河的其它问题
类似的话题转：zTree树控件key配置之title：zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称
转：zTree树控件key配置之title：zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称
[摘要：当树节面的称号有些很少时，全体表现出去隐得很拥堵的环境下，我们会念到用省略节面称号去取代，当鼠标移进节面时可以或许表现该节面的齐称。如许我们应当若何做呢？ 起首， 我们]
当树节点的名称有些很长时，全部显示出来显得很拥挤的情况下，我们会想到用省略节点名称来代替，当鼠标移入节点时能够显示该节点的全称。这样我们应该如何做呢？
首先，我们要在树的节点内多增加一个属性用于设置该节点的全称，这里我们以title名称为例吧，示例代码如下所示：
view sourceprint?
1.{ id:233, pId:23, name:"叶子节点233...",title:"叶子节点34"},
2.{ id:234, pId:23, name:"叶子节点...",title:"叶子节点打工撒干撒嘎斯"},
3.{ id:3, pId:0, name:"父节点3 - 没有子节点",title:"卧槽", isParent:true}
其次需要设置setting内data旗下key的title关键属性对应的属性名称。
官方API内是这样解释key内title的：
view sourceprint?
1.zTree 节点数据保存节点提示信息的属性名称。[setting.view.showTitle = true 时生效]
2.如果设置为 "" ，则自动与 setting.data.key.name 保持一致，避免用户反复设置
3.默认值：""
看明白了把，默认情况下会和name属性一致。
为此，我们需要手动设置一下title对应的属性名称，设置代码如下所示：
view sourceprint?
01.var&setting = {
02.data: {
03.simpleData: {
04.enable:&true
06.showTitle:true,&
08.title:"title"&
这样一来，我们就可以达到我们想要的效果了。省略显示节点名称，鼠标移入时显示其节点的全称。效果图如下所示：
转：/topic/?937
感谢关注 Ithao123精品文库频道，是专门为互联网人打造的学习交流平台，全面满足互联网人工作与学习需求，更多互联网资讯尽在 IThao123!
Hadoop是一个由Apache基金会所开发的分布式系统基础架构。
用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。
Hadoop实现了一个分布式文件系统（Hadoop Distributed File System），简称HDFS。HDFS有高容错性的特点，并且设计用来部署在低廉的（low-cost）硬件上；而且它提供高吞吐量（high throughput）来访问应用程序的数据，适合那些有着超大数据集（large data set）的应用程序。HDFS放宽了（relax）POSIX的要求，可以以流的形式访问（streaming access）文件系统中的数据。
Hadoop的框架最核心的设计就是：HDFS和MapReduce。HDFS为海量的数据提供了存储，则MapReduce为海量的数据提供了计算。
产品设计是互联网产品经理的核心能力，一个好的产品经理一定在产品设计方面有扎实的功底，本专题将从互联网产品设计的几个方面谈谈产品设计
随着国内互联网的发展，产品经理岗位需求大幅增加，在国内，从事产品工作的大部分岗位为产品经理，其实现实中，很多从事产品工作的岗位是不能称为产品经理，主要原因是对产品经理的职责不明确，那产品经理的职责有哪些，本专题将详细介绍产品经理的主要职责
PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，利于学习，使用广泛，主要适用于Web开发领域。PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML（标准通用标记语言下的一个应用）文档中去执行，执行效率比完全生成HTML标记的CGI要高许多；PHP还可以执行编译后代码，编译可以达到加密和优化代码运行，使代码运行更快。
IThao123周刊<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&}