项目需要树状视图形式展示后台返回的数据;并实现点击节点将节点信息添加到右侧的ul中;待后续提交获取使用;选择了能够实现异步加载节点信息的ztree插件,事实也证明这个插件足够强大,能够满足几乎所有需求;刚接触时看了很多人的分享,结合官方api文档,终于实现了功能,现将我学习的总结也分享出去.效果介绍;除了ztree默认的效果;使用api增加了一些实用的操作;包括手风琴效果;点击父节点展开效果;点击节点文字关联复选框效果;一级子节点数量展示效果.本文就为大家带来一篇ztree jquery 树插件的使用(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
外部引入资源
<link rel="stylesheet" href="./ztree_v3-master/css/ztreestyle/ztreestyle.css" rel="external nofollow" > <script type="text/javascript" src="./jquery-1.9.1.js"></script> <script type="text/javascript" src="./ztree_v3-master/js/jquery.ztree.all.min.js"></script>
html部分代码
<p class="box">     <ul id="treedemo" class="ztree"></ul>     <ul id="ulright">       <li style="text-align: center;background-color: #ddd;border-bottom: 1px dashed">已选择</li>     </ul>   </p>
css代码
ul,li,body{     margin: 0;     padding: 0;   }   .ztree li span.node_name {     font-size: 16px;   }   .box{     width: 500px;     margin:10px auto;     border:3px solid #ccc;     padding: 20px;     border-bottom: none;   }   #treedemo{     width: 200px;     display: inline-block;     background-color: #f1f1f1;     min-height: 200px;   }   #ulright{     width: 200px;     margin-left: 50px;     min-height: 200px;     border:1px solid #ccc;     display: inline-block;     vertical-align: top;     background-color: #eeeee8;   }   #ulright li{     width: 100%;     height: 30px;     list-style: none;     line-height: 30px;     margin-bottom: 3px;     background-color: #00b6ba;     padding-left: 10px;     box-sizing: border-box;   }   /**/   .ztree li a.curselectednode{     background-color: transparent;     border:#00b6ba;   }   .ztree li span.node_name{     font-size: 18px;     line-height: 18px;     color: #000;   }   .ztree li a{     padding: 5px;     vertical-align: middle;   }   .ztree li a:hover{     text-decoration: none;   }   .ztree li span.button.chk{     margin: 9px 3px;   }
js代码
//递归找到所有节点(非父节点) function getallchildrennodes(treenode,result){    if (treenode.isparent) {     var childrennodes = treenode.children;     if (childrennodes) {       for (var i = 0; i < childrennodes.length; i++) { if(!childrennodes[i].children){ result.push(childrennodes[i].name); } result = getallchildrennodes(childrennodes[i], result); } } } return result; } var parames = 3; //ztree的所有配置 var setting = { //ztree 的唯一标识，初始化后，等于 用户定义的 ztree 容器的 id 属性值。 treeid:"", //ztree 容器的 jquery 对象，主要功能：便于操作,内部参数,不可修改 treeobj:null, //异步请求数据配置;当父节点没有子节点时;点击此父节点会触发请求 async:{ //打开此功能 enable: true, url:"./ztreedemov9.0simplefromv10.0.php", type:"post", //发送的父级id的字段定义;如修改,遵循格式autoparam: ["id=parentid"] autoparam: ["id"], //其他需要提交的参数["name","topic","key","ss"]转换后格式为name=topic&key=ss otherparam:["json",parames || 1,"test","2"], datatype:"json", contenttype: "application/x-www-form-urlencoded", //ajax请求后的数据预处理函数 datafilter: function(treeid,parentnode,responsedata){ for(var i=0;i<responsedata.length;i++){ responsedata[i] = json.parse(responsedata[i]) } return responsedata; } }, //数据配置 data: { simpledata: { enable: true, idkey: "id", //修改默认的id为自己的id pidkey: "pid", //修改默认父级id为自己数据的父级id rootpid: 0 //根节点的父节点id } }, //视图配置 view: { //是否显示节点前的图标 showicon: false, //节点上a标签的样式 fontcss: { } }, //选框配置 check: { //启用复选框 enable: true, //chkstyle:"radio" //复选框父子级选择联动设置 chkboxtype: { "y": "ps", "n": "ps" } }, //事件配置 callback: { //点击复选框之前的事件 beforecheck:function(treeid, treenode){//如果节点是父节点,并且勾选时没有子节点,则不允许勾选;针对父节点没有展开,则没有异步加载子节点,此情况禁止点击父节点全选子节点的操作 if(treenode.isparent && !treenode.children){ return false; } }, //回调错误事件 onasyncerror: function(event, treeid, treenode, xmlhttprequest, textstatus, errorthrown){ alert("初始化节点数据失败,请稍后重试"); }, //回调成功事件 onasyncsuccess: function(event, treeid, treenode, resdata){ var ztree = $.fn.ztree.getztreeobj("treedemo"); console.log("数据加载成功"); var count = (treenode.children.length); //加载成功后;在节点后面显示此父节点下有几个一级子节点 $(".ztree").find("a[title="+treenode.name+"]").find("span[class='node_name']").html(treenode.name+"<span>(+count+)</span>);     },     //父节点展开时的事件     onexpand: function(event, treeid, treenode){       //ztree对象       var ztree = $.fn.ztree.getztreeobj(treedemo);       //获取点击的id       var nowid = treenode.id;       //获取所有节点       var allnodes = ztree.getnodes();       //获取点击节点的层级       var level = treenode.level;       //定义过滤函数;获取节点层级与点击节点层级相同并且为父节点的节点       function filter(node) {         return (node.level == treenode.level && node.isparent);       }       //获得点击节点同级的父节点的集合       var samelevelnodes = ztree.getnodesbyfilter(filter);       //遍历同级节点集合       for(var i=0;i<samelevelnodes.length;i++){ //将非被点击父节点收起;实现手风琴效果 if(samelevelnodes[i].id != nowid){ ztree.expandnode(samelevelnodes[i], false, true, true); } } }, //点击事件 onclick: function(e, treeid, treenode, clickflag) { //tree实例 var ztree = $.fn.ztree.getztreeobj("treedemo"); //点击文字关联复选框 //如果不是父节点,则关联,或者是父节点,但展开状态位true是,也关联; if(!treenode.isparent || (treenode.isparent && treenode.open)){ ztree.checknode(treenode, !treenode.checked, true);//点击文字关联复选框 } //点击文字展开当前节点 ztree.expandnode(treenode, true, true, true); // ztree.reasyncchildnodes(treenode, "refresh");//强行异步加载(存在子节点也进行加载) //手风琴效果;直接调用onexpand ztree.setting.callback.onexpand(e, treeid, treenode); //点击节点名称和勾选节点前面的复选框逻辑相同; //直接在onclick里面调用oncheck函数;并传入所需参数 ztree.setting.callback.oncheck(e, treeid, treenode); }, //点击复选框事件 oncheck: function(e, treeid, treenode) { //获取右侧ul内所有li标签;用于比较当前选择复选框在右侧是否一斤存在 var rightli = $("#ulright").find("li"); //选中的是底层节点; if(!treenode.isparent){ //选中状态,加入到右侧 if(treenode.checked){ //遍历右侧li,如果选中的已经存在;return for(var i=0;i<rightli.length;i++){ if($(rightli[i]).attr("title") == treenode.name){ return; } } // 创建li 追加li var addli = $("<li title="+treenode.name+"><span></span>);           addli.find(span).text(treenode.name);           addli.animate({             width:100%,             height:30           },400)           addli.appendto($(#ulright));           //如果点击的节点存在connect字段;判断复选框状态加入到右侧ul或删除           if(treenode.connect){             //遍历右侧li,如果选中的已经存在;return             for(var i=0;i<rightli.length;i++){ if($(rightli[i]).attr("title") == treenode.connect){ return; } } // 创建li 追加li var addli = $("<li title="+treenode.connect+"><span></span>);               addli.find(span).text(treenode.connect);               addli.animate({                 width:100%,                 height:30               },400)             addli.appendto($(#ulright));           }           //将被勾选的节点背景颜色更改           $(#treedemo).find(a[title=+treenode.name+]).css(backgroundcolor,#00b6ba);         //非选中状态,删除         }else{           //将右侧的次节点对应的li删除           $(#ulright).find(li[title=+treenode.name+]).animate({             width:0%,             height:0           },400,function(){             $(#ulright).find(li[title=+treenode.name+]).remove();           })           //取消此节点的背景颜色           $(#treedemo).find(a[title=+treenode.name+]).css(backgroundcolor,);         }       //选中的是父节点;获取所有子节点(非父节点),判断复选框状态加入到右侧ul或删除       }else{         //调用递归函数;获取所有非父级子节点数组集合         var addnodesarray = getallchildrennodes(treenode,[]);         //是选中状态,加入到右侧ul         if(treenode.checked){           //定义存储右侧li的数组           var rightliarray = [];           $(#ulright li).each(function(i,v){             rightliarray.push($(v).attr(title))           })           rightliarray = rightliarray.slice(1);           //遍历勾选的数组集合           for(var i=0;i<addnodesarray.length;i++){ //判断此节点是否在右侧ul内;不存在则加入 if(rightliarray.indexof(addnodesarray[i]) == -1){ //创建li 追加li var addli = $("<li title="+addnodesarray[i]+"><span>+addnodesarray[i]+</span>);               addli.animate({                 width:100%,                 height:30               },400)               addli.appendto($(#ulright));             }             //将节点背景颜色修改             $(#treedemo).find(a[title=+addnodesarray[i]+]).css(backgroundcolor,#00b6ba);           }         //是非选中状态,删除         }else{           //遍历节点,执行删除操作           for(var i=0;i 后台php代码;本人纯前端,后台代码只会简单的写写;
js代码大部分都有注释;详细api可在ztree官网查看 进入官方api文档 代码运行需在服务器环境下运行;
最终栗子效果图
相关推荐：
实例详解jquery 利用ztree实现树形表格
jquery之ztree实现右键收藏功能
jquery中ztree树插件使用分享
以上就是实例详解ztree jquery 树插件的使用的详细内容。