树形组件Ztree

tech2026-08-07 2

简介

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发，尤其是树状菜单、树状数据的Web显示、权限管理等等。

zTree 是开源免费的软件（MIT 许可证）。在开源的作用下，zTree 越来越完善，目前已经拥有了不少粉丝，并且今后还会推出更多的 zTree 扩展功能库，让 zTree 更加强大。

特点

● zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载

● 采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀

● 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器

● 支持 JSON 数据

● 支持静态和 Ajax 异步加载节点数据

● 支持任意更换皮肤 / 自定义图标（依靠css）

● 支持极其灵活的 checkbox 或radio 选择功能

● 提供多种事件响应回调

● 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟

● 在一个页面内可同时生成多个 Tree 实例

● 简单的参数配置实现灵活多变的功能

导入组件

案列

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ztree的demo</title> <link rel="stylesheet" href="plugins/ztree/css/zTreeStyle/zTreeStyle.css"> <script src="plugins/ztree/js/jquery-1.4.4.min.js"></script> <script src="plugins/ztree/js/jquery.ztree.all-3.5.js"></script> <SCRIPT LANGUAGE="JavaScript"> var zTreeObj; // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解） var setting = { data: { simpleData: { enable: true, //开启了简单的json结构 idKey: "id", pIdKey: "pId", rootPId: 0 } }, check: { enable: true //开启了树形节点上复选框 } }; // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解） /* 标准的json数据结构 var zNodes = [ {name:"test1", children:[ {name:"test1_1"}, {name:"test1_2",children:[{name:"test1_2_1"},{name:"test1_2_2"}]}]}, {name:"test2", children:[ {name:"test2_1"}, {name:"test2_2"}]} ];*/ var zNodes=[ {id:"1",name:"test1",pId:"0"}, {id:"2",name:"test2",pId:"0"}, {id:"11",name:"test1_1",pId:"1"}, {id:"12",name:"test1_2",pId:"1"}, {id:"21",name:"test2_1",pId:"2"}, {id:"22",name:"test2_2",pId:"2",checked:true}, {id:"121",name:"test1_2_1",pId:"12"} ] $(document).ready(function(){ zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); zTreeObj.expandAll(true); //展开树形节点 }); // 获取勾选的数据节点的id 组成一个字符串中间用逗号隔开 1,2,3,4,---->在后台中使用逗号分隔成数组 function save() { let idsStr=""; let checkedNodes = zTreeObj.getCheckedNodes(true); for (let i = 0; i < checkedNodes.length; i++) { if((checkedNodes.length-1)==i){ //判断是否是最后一个节点。如果是不再拼接最后一个逗号了 idsStr+= checkedNodes[i].id; }else{ idsStr+= checkedNodes[i].id +","; } } alert(idsStr); } </SCRIPT> </head> <body> <div> <button onclick="save()">保存</button> <ul id="treeDemo" class="ztree"></ul> </div> </body> </html>

最新回复(0)