zTree在jQuery树控件中的使用总结

0 zTree简介

在应用程序开发过程中，树控件的使用是必不可少的。ZTree是jQuery实现的多功能“树插件”。出色的性能、灵活的配置、多种功能的组合是zTree最大的优势。

0.0 zTree的特点最新版本的zTree按照功能划分核心代码，不需要加载不必要的代码。比如正常使用只需要加载核心jquery.ztree.core-3.5.js，加载jquery . z tree . excheck-3.5 . min . js需要使用check函数，加载jquery.ztree.exedit-3.5.min.js需要使用编辑函数，采用延迟加载技术，轻松加载上万个节点。即使在IE6下，也基本可以秒杀IE、FireFox、Chrome、Opera、Safari等兼容浏览器。支持JSON数据，支持静态和Ajax异步加载节点数据，并支持任意皮肤替换/用户自定义图标(取决于CSS)支持极其灵活的复选框或单选功能，并为各种事件响应回调提供灵活的编辑(添加/删除/修改/检查)功能。节点可以随意拖拽，一个页面可以拖拽多个节点，可以同时生成多个Tree实例。参数配置实现简单，功能灵活多变。

0.1从ztree官网下载的zTree文件介绍zTree包括以下组件

metroStyle文件夹：zTree的metro style相关文件(图片和css样式表)。zTreeStyle文件夹：zTree: zTree.all.js的标准样式文件夹(图片和css样式表)js文件是一个完整的js库，只需加载这个文件就可以实现所有的zTree功能。ztree.core、ztree.excheck、ztree.exedit、ztree.exhide按照功能划分ztree，分别对应基本功能、检查功能、编辑功能

1 z tree的基本用法

1.0 zTree的创建在页面中添加了对Ztree的js和css引用。由于ztree是基于JQuery的，所以JQuery的引用是必要的。

！DOCTYPE HTMl HTMl head TItle ZTREE DEMO/TItle meta http-equiv=' content-type ' content=' text/html；charset=UTF-8' link rel='样式表' href=' ztree style/ztree style . CSS ' type=' text/CSS '脚本类型=' text/JavaScript ' src=' http : jquery-1 . 4 . 2 . js '/脚本脚本类型=' text/JavaScript ' src=' http : jquery . z tree . core-3 . x . js '/脚本语言=' JavaScript ' var zTreeObjvar设置={ }；ztree的参数配置。varznodes=[//zTree的数据属性将在后面详细说明。这里使用了标准的json格式{name:' test1 '，open3360 true，children :[{ name 3360 ' test1 _ 1 ' }。{ name: 'test1_2' }] }，{ name: 'test2 '，open: true，children :[{ name : ' test2 _ 1 ' }，{ name : ' test2 _ 2 ' }]}]；$(文档)。ready(function(){ ztreeObj=$ . fn . ztree . init($(' # treedeo ')，setting，zNodes)；//初始化zTree，三个参数分别是容器(别忘了把zTree的容器类名设置为‘zTree’)、参数配置和数据源}；/script/head body div ul id=' tree demo ' class=' ztree '/ul/div/body/html running结果如下

1.1 zTree配置zTree配置采用Json格式，根据配置类型分为view(可视化界面相关配置)、data(复选框相关配置)、callback(各种事件的回调函数配置)和async(zTree异步加载配置)。以下是我们经常使用的一些配置和描述。其他详细配置请参考zTree官方API文档的详细介绍。

Var设置={ view : { selected multi : true，//设置是否可以同时选择多个节点，//设置是否显示节点图标showLine: true，//设置是否显示节点之间的连接showTitle: true，//设置是否显示节点的标题提示信息}，data : { simpledata : { enable: false，//设置是否启用简单数据格式(zTree支持标准数据格式和简单数据格式，the//启用简单数据格式时，设置id对应的属性名pidkey 3360‘PID’。//启用简单数据格式时，设置parentId对应的属性名。ztree根据id和PID之间的层次关系构建树形结构。Check:{ enable: true //设置是否显示复选框}，callback 3360 { onclick 3360 onclick，//定义节点click事件onRightClick: OnRightClick的回调函数。//在重命名前定义节点右键事件：的回调函数。//重新编辑节点成功前定义回调函数，一般用于编辑节点时判断输入的节点名称是否合法。//定义节点双击事件的回调函数onCheck: onCheck //定义节点的回调函数复选框选中或取消选中事件}，async3360 {enable: true，//设置启用异步加载类型： 'get '。//异步加载类型：post和getcontent type : ' application/json '，//定义ajax提交参数的参数类型，一般以JSON格式URL 3360'/design/get '，//定义数据请求路径autoparam3360 ['id=id '，Name=name'] //定义提交时参数的名称。提交{ 0 }时，节点属性在=符号前标识，后面是json数据中的参数名称；需要注意的是，在zTree的事件回调部分，基本上每个事件对应一个beforeXXX事件。例如，onClick事件对应一个beforeOnClick事件，主要用于控制是否允许执行相关事件。如果before事件返回false，则相应的相关事件将被取消。

1.2 zTree的数据格式zTree的每个节点都是一个treeNode对象，treeNode对象常用的属性和方法如下：

TreeNode: {name，//节点上显示的文字是否勾选，//节点是否勾选，在ztree配置中复选框启用时有效，//节点是否展开图标，//节点的图标iconpen，//节点展开后的图标iconclose，//节点折叠时的图标id，//节点的标识属性对应于启用简单数据格式时idKey对应的属性名称，不一定是id。如果在设置中定义了idkey :‘ZID’，那么这就是zidpid。//节点的parentId属性。命名规则与idchildren相同。//获取该节点的所有子节点，直接下属。要获取所有下级节点，需要编写递归来获取isparent。//确定该节点是否为父节点。在一般应用程序中，通常需要确定只有叶节点可以执行相关操作，或者在删除时确定下面有子节点时经常使用。GetPath() //获取节点的路径，即所有父节点，包括自身。此方法返回一个数组，该数组通常用于创建类似面包屑导航的内容。A-B-C} ZTree的数据源一般有两种：标准数据格式和简单数据格式。标准数据格式通过指定节点的chidren属性来构建层次关系，而简单数据格式根据id和pid属性来构建层次关系，我们在应用程序开发中会用到这些属性。标准数据格式

Var nodes=[{name: '父节点1 '，children: [{name3360 '子节点1'}，{name: '子节点2 ' }]}]；简单数据格式

Varnodes=[{id:1，pid:0，name: '父节点1'}，{id:11，pid33601，name: '子节点1'}，{id:12，pid33601，name: '子节点2注意，zTree的默认配置是不启用简单数据格式，简单数据格式的相关配置必须在设置中进行。

1.3 zTree的常用方法zTree的主要操作方法介绍如下获取zTree对象：vartreeobj=$ . fn . zTree . getztreeobj(' tree ')；添加节点：添加节点(父节点、索引、新节点、is slip)

parentNode:指定的ParentNode。如果添加根节点，请将parentnode设置为null

索引：插入新节点的位置(从0开始)。当index=-1时，它被插入到最后一个。该参数可以忽略

NewNodes:要添加的节点数据的JSON对象集，数据只需要满足zTree的节点数据所需的属性即可

无提示：为true时，添加节点后父节点不会展开，其他值或默认状态会自动展开

选中或取消选中所有节点：check all nodes(选中)；如果选中的参数为真，则全部选中；如果为假，则全部取消选中。选中或取消选中单个节点：选中节点(节点、选中、选中类型标志、回调标记)；节点：勾选要操作的节点：勾选为真；false未选中；checkeTypeFlag:表示当前节点的子节点和父节点在选中状态下链接；假的是没有联系的；callbackFlag:表示执行beforeOnCheck和OnCheck事件的回调函数；false表示不执行节点编辑(node );要使节点保持编辑状态，必须引用jquery.ztree.exedit扩展。展开或折叠所有节点：expandAll(展开)；Expand为true时展开所有节点，false时折叠所有节点。根据节点属性搜索节点：getnodesbyparam (key，value，parent node)；Key:属性名称值：属性值父节点：是否在指定节点下搜索；null表示搜索整个树。获取选中或未选中的节点集：getCheckedNodes(选中)；如果值为true，则表示获得了所有选中的节点集，如果值为false，则表示所有未选中的节点集都获得了其输入框的检查状态已更改的节点集：getChangeCheckedNodes()

2 zTree 2.0 ajax的常见操作请求数据并创建zTree

$(function () {var setting={//在这里，根据自己的需要，配置view : { selected multi : false }，data : { simpledata 3360 { enable : true } }。回调： { onclick : on signatureclick，onRightClick: OnRightClick，beforeRename: beforeRename，onCheck:onCheck } }；$ .ajax ({type:' get '，URL 3360 '/design/getdesigntreedata '，//Ajax请求地址success 3360 function(data){ $ . fn . z tree . init($(' # treedzo ')，setting，data)；//加载数据}，})；});背景代码如下。您可以根据需要返回任何您想要的数据，将其绑定到zTree，然后通过treeNode获取相应的值。属性名来实现一些接口逻辑操作。

public action result GetDesignTreeData(){ var result=_ designAppService。GetDesignTreeData()；ListModelTreeViewModel tree models=new ListModelTreeViewModel()；bool open=false结果中的变量设计。设计){如果(设计。ParentId==Guid。空)打开=真；else open=falsetreeModels。添加(新模型树视图模型(){ Id=design。Id.ToString()，PId=design。ParentId.ToString()，Name=design。名称，打开=打开，数据=设计。备注？'，视点=设计。视点？'，Checked=true })；}返回Json(treeModels，JsonRequestBehavior。allow get)；}2.1节点点击操作节点点击事件将捕获三个参数：事件对象e、zTree的唯一标识符treeId和当前选择的节点对象treeNode。根据实际需求，可以获取treeNode中包含的任意属性数据，并进行相关操作

onclick函数(e，treeid，treenode) {if (treenode。is parent)//如果不是叶节点，结束返回；alert(TreeNode . name)；//获取当前节点的相关属性数据并执行相关逻辑}；2.2节点复选框事件

正常情况下，我们会直接使用tree obj . getchecked nodes(true)；获取所有选中的节点，然后遍历所有选中的节点进行相关操作。当面对大量数据时，这种操作方法是不可取的。可以通过getChangeCheckedNodes()方法获取勾选状态发生变化的节点集，并对状态发生变化的节点进行相应的处理。

函数OnCheck(){ var treeObj=$。fn。ztree。getztreeObj(' TreeDemo ')；//获取树对象var nodes=TreeObj。getchangcheckednodes()；//获取勾选状态改变的节点var设计id=[]；定义变量状态=0;//定义初始勾选状态为未勾选如果(节点[0]。选中)状态=1;//如果状态改变节点为勾选状态，说明当前操作是从未勾选变为已勾选。 $.每个（节点，函数(一，项目){ designids。推送(项目。id)；//将状态改变的节点编号输出到数组项目。CheckEdold=item。已检查；//这句话很关键，将节点的初始状态置为当前状态。否则每次勾选操作获取状态改变节点时只会跟树初始化的状态相比较。 }) $.ajax({ type: 'Post '，URL : '/Design/GetRelationComponentIdsByDesigns '，data : { ' designIds ' : designIds })，success : function(data){ realbox CX .BatchAddSubClrInfoBegin()；$.每个(数据.结果，函数(I，项目){ if (status==1) //这里根据发生改变的节点是勾选还是为勾选进行相关逻辑操作RealBimOcx .AddSubClrInfo(项，255,255,0);else RealBimOcx .AddSubClrInfo(项，0,255,0);if(I % 100==0){ realboxcx .BatchAddSubClrInfoEnd()；RealBimOcx .BatchAddSubClrInfoBegin()；} })realboamcx .BatchAddSubClrInfoEnd()；} }) };2.3 实现zTree的右键增删改操作首先定义右键弹出面板

div id=' rMenu ' style=' z-index :100；'ul Li id=' m _ add ' onclick=' addTreeNode()；'新增节点/Li Li id=' m _ del ' onclick=' removeTreeNode()；'删除节点/Li Li id=' m _ edit ' onclick=' editTreeNode()；'style='边框-底部：1 px实心# ceece '编辑节点/lili id='m_left '升级/li li id='m_right '降级/li li id='m_up '上移/Li Li id=' m _ down ' style='边框-底部：1 px实心# cece '下移/Li Li id=' m _ reset ' onclick=' ReSETree()；'重置节点/Li Li id=' m _ open ' onclick=' treeOPEn()'展开所有/Li Li id=' m _ stop ' onclick=' TreeStOp()'收起所有/Li/ul/div

实现zTree右键单击事件回调函数

//右键单击回调函数函数OnRightClick(事件，treeId，treeNode) { $('#treeZo ').hide()；if(！treeNode事件。目标。标记名。tolowercase()！='button' $(event.target).父母(' a ').长度==0){ ztree。cancelselected node()；showRMenu('root '，event.clientX，event。客户关系)；//根据鼠标位置显示右键操作面板} else if (treeNode！树节点。nor){ ztree。selectnode(树节点)；showRMenu('node '，event.clientX，event。客户关系)；} $('#treeZo ').show()；} //根据节点类型，控制右键操作菜单哪些可用哪些不可用函数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 ').add CLaSS(' MBO der ')；} else { $('#m_del ').show()；$('#m_edit ').show()；$('#m_left ').show()；$('#m_right ').show()；$('#m_up ').show()；$('#m_down ').show()；$('#m_add ').移除CLaSS(' MBO der ')；} rMenu.css({ 'top': y 'px '，' left': x 'px '，' visibility ' : ' visible ' })；$(“正文”).bind('mousedown '，OnBodyMouseDown)；} //以藏右键面板函数hideRMenu(){ if(rMenu)rMenu。CSS({ '可视性' : '隐藏' })；$(“正文”).解除绑定(“mousedown”，OnBodyMouseDown)；} //单击页面其他位置隐藏右键面板函数onBodyMouseDown(事件){ if(！(事件。目标。id==' rMenu ' | | $(事件。目标).父母(' #rMenu ').长度0)){ rmenu。CSS({ '可视性' : '隐藏' })；} }新增节点

//添加节点函数addtreenode(){ hidermenu()；变量名称=新日期()。getTime()；//使用时间戳生成节点名，并确保节点名唯一。var new node={ name : name }；if(ztree . getselectednodes()[0]){ new node . checked=ztree . getselectednodes()[0]。已检查；new node . PID=ztree . getselectednodes()[0]。id；ztree . addnodes(ztree . getselectednodes()[0]，new node)；} else { zTree.addNodes(null，new node)；} var node=ztree . getnodebyparam(' name '，name，null)；//获取新添加的节点zTree.selectNode(节点)；//选择新增加的节点zTree.editName(节点)；//让新添加的节点处于编辑状态}编辑节点

函数editTreeNode(){ var nodes=ztree . getselectednodes()；//获取所选节点集if(nodes nodes . length 0){ var parent=nodes[0]。get parent node()；//获取父节点if (parent) {nodes [0]。PID=所选节点的parent.id//如果所选节点的父节点存在，则将当前节点的pid属性值设置为父节点} ztree.editname (nodes [0])的id；//保持所选节点处于编辑状态} hideRMenu()；//隐藏右侧面板}；节点编辑状态离开时触发的事件

//重命名前编辑并保存节点函数(tree id，treenode，newname，iscancel) {if (newname。length==0){//节点名称判断提示('不能为空。);返回false} else {$。ajax({ //数据仓库类型：' post '，url3360'/design/insertupdate '，data : { ' dto ' : { ' id ' : re node . id，Parentid ' : re node . PID，' name' :newname}})，success 3360 function(data){ if(data)。结果=='失败'){ layeralert('保存失败。' );返回false} else { TreeNode . id=data . result；//将返回的id赋给当前节点返回true} } });} };删除节点数据

函数removeTreeNode(){ hideRMenu()；var nodes=ztree . getselectednodes()；if(nodes . length 0){ if(nodes[0])。子节点[0]。children.length0) {alert('包含子级，无法删除。);} else {if (confirm )(此操作将同步删除关联数据，您确定要删除它吗？)==true) { $。ajax({ type: 'Post '，url: '/Design/Delete '，data: { 'id': nodes[0])。id }，success:函数(数据){ if(data . result==' Success '){ ztree . remove node(nodes[0])；} else {alert('删除失败。);} } });};} } };2.4一些总结我们通常使用树控件来授权或关联类似的操作。通常，首先会取消选中它们，然后根据所选的数据关联来选中树控件的复选框。当数据量较大时，大约会有上万条数据未被检查，通过js根据关联数据检查相关节点的操作会比较慢。这种情况下，建议通过后台的关联关系重新组织zTree需要的数据源，为每一条数据设置勾选属性(对应树节点)，然后转到前台页面。

$.ajax({ type: 'Get '，URL : '/Model/getrelationmodetreedata？design id=' treenode . id ' t=' new Date()，success:函数(数据){ //$。每个(data.result，function (i，item){//var node=model tree . getnodebyparam(' id '，item，null)；//modelTree.checkNode(node，true，true)；//});$.fn.zTree.init($('#treejian ')，settings 1，data . result)；//改为重载，比js循环检查快。} });有关ztree控件的更多信息，请参考主题《jQuery插件ztree使用汇总》

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。