2023年6月22日发(作者：)

jQuery树形控件zTree使⽤⼩结0 zTree简介

树形控件的使⽤是应⽤开发过程中必不可少的。zTree 是⼀个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最⼤优点。

0.0 zTree的特点 •最新版的zTree将核⼼代码按照功能进⾏了分割，不需要的代码可以不⽤加载，如普通使⽤只需要加载核⼼的，需要使⽤勾选功能加载，需要使⽤编辑功能加载 •采⽤了延迟加载技术，上万节点轻松加载，即使在 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⽂件：是完整的js库，可单纯加载此⽂件实现所有zTree功能，、k、、是对ztree按照功能进⾏的分割，分别对应基本功能、复选功能、编辑功能、显隐功能。

1 zTree的基本使⽤1.0 zTree的创建在页⾯中添加对zTree的js及css引⽤，由于zTree基于JQuery，JQuery的引⽤是必须的。

运⾏结果如下

1.1 zTree的配置zTree的配置采⽤Json格式，按照配置的类型分为view（可视界⾯相关配置）、data（数据相关配置）、check（复选框相关配置）、callback（各类事件的回调函数配置）、async（zTree异步加载配置），⼀下是我们经常会使⽤到的⼀些配置及说明，其他详细配置可以参考zTree官⽅API⽂档的详细介绍。

var setting = { view: { selectedMulti: true, //设置是否能够同时选中多个节点 showIcon: true, //设置是否显⽰节点图标 showLine: true, //设置是否显⽰节点与节点之间的连线 showTitle: true, //设置是否显⽰节点的title提⽰信息 }, data: { simpleData: { enable: false, //设置是否启⽤简单数据格式（zTree⽀持标准数据格式跟简单数据格式，上⾯例⼦中是标准数据格式） idKey: "id", //设置启⽤简单数据格式时id对应的属性名称 pidKey: "pId" //设置启⽤简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构 } }, check:{ enable: true //设置是否显⽰checkbox复选框 }, callback: { onClick: onClick, //定义节点单击事件回调函数 onRightClick: OnRightClick, //定义节点右键单击事件回调函数 beforeRename: beforeRename, //定义节点重新编辑成功前回调函数，⼀般⽤于节点编辑时判断输⼊的节点名称是否合法 onDblClick: onDblClick, //定义节点双击事件回调函数 onCheck: onCheck //定义节点复选框选中或取消选中事件的回调函数 }, async: { 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: { name, //节点显⽰的⽂本 checked, //节点是否勾选，ztree配置启⽤复选框时有效 open, //节点是否展开 icon, //节点的图标 iconOpen, //节点展开式的图标 iconClose, //节点折叠时的图标 id, //节点的标识属性，对应的是启⽤简单数据格式时idKey对应的属性名，并不⼀定是id,如果setting中定义的idKey:"zId",那么此处就是zId pId, //节点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 = $.eeObj("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); 使节点处于编辑状态，必须引⽤ 扩展。 展开或折叠全部节点：expandAll(expand); expand为true是展开所有节点，为false是折叠所有节点。 根据节点属性查找结点：getNodesByParam(key,value, parentNode); key:属性名 value:属性值 parentNode:是否在指定节点下查找，为null表⽰整个树查找。 获取被勾选或未被勾选的节点集合：getCheckedNodes(checked); checked为true表⽰获取所有被勾选的节点集合，为false表⽰所有未被勾选的节点集合 获取输⼊框勾选状态被改变的节点集合：getChangeCheckedNodes()2 zTree的常⽤操作2.0 ajax请求数据并创建zTree

$(function () { var setting = { //此处根据⾃⼰需要进⾏配置 view: { selectedMulti: false }, data: { simpleData: { enable: true } }, callback: { onClick: onDesignTreeClick, onRightClick: OnRightClick, beforeRename: beforeRename, onCheck：onCheck } }; $.ajax({ type: "Get", url: "/Design/GetDesignTreeData", //ajax请求地址 success: function (data) { $.($("#treeZo"), setting, data); //加载数据 }, }); });后台代码如下，可以根据需要返回你想要的任何数据，绑定到zTree上，然后通过treeNode.属性名取到对应的值，实现⼀些界⾯逻辑操作。

public ActionResult GetDesignTreeData() { var result = _ignTreeData(); List treeModels = new List(); bool open = false; foreach (var design in s) { if (Id == ) open = true; else open = false; (new ModelTreeViewModel() { Id = ng(), PId = ng(), Name = , Open = open, Data = s ?? "", ViewPoint = int ?? "", Checked = true }); } return Json(treeModels, et); }2.1 节点单击操作 节点单击事件会捕获事件对象e，zTree的唯⼀标识treeId，当前选中的节点对象treeNode三个参数。根据实际需求可获取treeNode中包含的任何属性数据，进⾏相关操作

function onClick(e, treeId, treeNode) { if (nt) //如果不是叶⼦结点，结束 return; alert(); //获取当前结点上的相关属性数据，执⾏相关逻辑 };

2.2 节点复选框事件

⼀般情况下我们会直接使⽤ckedNodes(true);获取所有选中的节点，然后遍历所有选中的节点进⾏相关操作，当⾯对⼤数据量时，这种操作⽅法便不可取，可通过getChangeCheckedNodes()⽅法获取勾选状态被改变的节点集合，值针对状态改变的节点做相应处理。function onCheck() { var treeObj = $.eeObj("treeDemo"); //获取树对象 var nodes = ngeCheckedNodes(); //获取勾选状态改变的节点 var designIds = []; var status = 0; //定义初始勾选状态为未勾选 if (nodes[0].checked) status = 1; //如果状态改变节点为勾选状态，说明当前操作是从未勾选变为已勾选。 $.each(nodes, function (i, item) { (); //将状态改变的节点id输出到数组 dOld = d; //这句话很关键，将节点的初始状态置为当前状态。否则每次勾选操作获取状态改变节点时只会跟树初始化的状态相⽐较。 }) $.ajax({ type: "Post", url: "/Design/GetRelationComponentIdsByDesigns", data: { "designIds": designIds }, success: function (data) { ddSubClrInfoBegin(); $.each(, function (i, item) { if (status == 1) //这⾥根据发⽣改变的节点是勾选还是为勾选进⾏相关逻辑操作。 ClrInfo(item, 255, 255, 0); else ClrInfo(item, 0, 255, 0); if (i % 100 == 0) { ddSubClrInfoEnd(); ddSubClrInfoBegin(); } }) ddSubClrInfoEnd(); } }) };2.3 实现zTree的右键增删改操作⾸先定义右键弹出⾯板

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

//右键单击回调函数 function OnRightClick(event, treeId, treeNode) { $("#treeZo").hide(); if (!treeNode && rCase() != "button" && $().parents("a").length == 0) { SelectedNode(); showRMenu("root", X, Y); //根据⿏标位置显⽰右键操作⾯板 } else if (treeNode && !) { Node(treeNode); showRMenu("node", X, Y); } $("#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'); } else { $("#m_del").show(); $("#m_edit").show(); $("#m_left").show(); $("#m_right").show(); $("#m_up").show(); $("#m_down").show(); $("#m_add").removeClass('mboder'); } ({ "top": y + "px", "left": x + "px", "visibility": "visible" }); $("body").bind("mousedown", onBodyMouseDown); } //以藏右键⾯板 function hideRMenu() { if (rMenu) ({ "visibility": "hidden" }); $("body").unbind("mousedown", onBodyMouseDown); } //单击页⾯其他位置 隐藏右键⾯板 function onBodyMouseDown(event) {

if (!( == "rMenu" || $().parents("#rMenu").length > 0)) { ({ "visibility": "hidden" }); } }新增节点

//增加节点 function addTreeNode() { hideRMenu(); var name = new Date().getTime(); //利⽤时间戳⽣成节点名称，保证节点名称唯⼀ var newNode = { name: name }; if (ectedNodes()[0]) { d = ectedNodes()[0].checked; = ectedNodes()[0].id; es(ectedNodes()[0], newNode); } else { es(null, newNode); } var node = eByParam("name", name, null); //得到新增加的节点 Node(node); //选中新增加的节点 me(node); //让新增加的节点处于编辑状态 }编辑节点function editTreeNode() { var nodes = ectedNodes(); //得到选中节点集合 if (nodes && > 0) { var parent = nodes[0].getParentNode(); //得到选中节点的⽗节点 if (parent) { nodes[0].pid = ; //如果选中节点⽗节点存在，将当前结点的pid属性值设置为⽗节点的id } me(nodes[0]); //让选中节点处于编辑状态 } hideRMenu(); //隐藏右键⾯板 };节点编辑状态离开时触发事件

//编辑并保存节点 function beforeRename(treeId, treeNode, newName, isCancel) { if ( == 0) { //节点名称判断 alert("不能为空。"); return false; } else { $.ajax({ //数据⼊库 type: "Post", url: "/Design/InsertOrUpdate", data: { "dto": { "Id": , "ParentId": , "Name": newName } }, succes: function (data) { if ( == "Faild") { layerAlert("保存失败。"); return false; } else { = ; //将返回的id赋值给当前结点 return true; } } }); } };删除节点数据

function removeTreeNode() { hideRMenu(); var nodes = ectedNodes(); if (nodes && > 0) { if (nodes[0].children && nodes[0]. > 0) { alert("包含下级，⽆法删除。"); } else { if (confirm("该操作会将关联数据同步删除，是否确认删除？") == true) { $.ajax({ type: "Post", url: "/Design/Delete", data: { "id": nodes[0].id }, success: function (data) { if ( == "Success") { Node(nodes[0]); } else { alert("删除失败。"); } } }); }; } } };2.4 ⼀些总结 我们通常使⽤到树形控件做授权或关联类似的操作，⼀般会先全部取消勾选，然后根据选中的数据关联对树控件的复选框进⾏选中操作，在⼤数据量时，⼤约⼏万条数据，全部取消勾选+根据关联数据勾选相关节点这个操作通过js执⾏会很慢，这种情况建议在后台通过关联关系重新组织zTree需要的数据源，对每条数据（对应树节点）设置checked属性，然后再前台页⾯重新加载树，这种操作速度要快得多。

$.ajax({ type: "Get", url: "/Model/GetRelationModelTreeData?designId=" + + "&t=" + new Date(), success: function (data) { //$.each(, function (i, item) { // var node = eByParam("id", item, null); // ode(node, true, true); //}); $.($("#treejian"), setting1, ); //改为重新加载，⽐js循环勾选速度要快。 } });更多关于ztree控件的内容，请参考专题以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。