zTree jQuery 树插件的使用(实例讲解)
程序员文章站
2022-04-28 23:34:56
分享说明:
项目需要树状视图形式展示后台返回的数据;并实现点击节点将节点信息添加到右侧的ul中;待后续提交获取使用;选择了能够实现异步加载节点信息的ztree插件,事实也...
分享说明:
项目需要树状视图形式展示后台返回的数据;并实现点击节点将节点信息添加到右侧的ul中;待后续提交获取使用;选择了能够实现异步加载节点信息的ztree插件,事实也证明这个插件足够强大,能够满足几乎所有需求;刚接触时看了很多人的分享,结合官方api文档,终于实现了功能,现将我学习的总结也分享出去.
效果介绍;除了ztree默认的效果;使用api增加了一些实用的操作;包括手风琴效果;点击父节点展开效果;点击节点文字关联复选框效果;一级子节点数量展示效果.
外部引入资源
<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部分代码
<div 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> </div>
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<addnodesarray.length;i++){ $("#ulright").find("li[title="+addnodesarray[i]+"]").animate({ width:"0%", height:0 },function(){ $(this).css("display","none"); $(this).remove(); }) //还原背景颜色 $("#treedemo").find("a[title="+addnodesarray[i]+"]").css("backgroundcolor",""); } } } }, } }; //ztree的节点信息;可一次性全部加载;可试试异步请求 var znodes = [{ name: "数据表",//名称 id: 4,//id,子元素的pid isparent:true,//是否为父节点,默认为false pid:0//父节点id;data中的rootpid; },{ name: "测试表", id: 1, isparent:true, pid:0 },{ name: "信息表", id: 2, isparent:true, pid:0 },{ name: "作废表", id: 3, isparent:true, pid:0 }]; $(document).ready(function() { //初始化ztree; ztree容器的jquery对象/ 配置/ 节点 $.fn.ztree.init($("#treedemo"), setting, znodes); });
后台php代码;本人纯前端,后台代码只会简单的写写;
<?php $pid = $_post['id']; if($pid == 4){ $array = array('{"name":"数据表_一","id":"1_1","pid":"0"}','{"name":"数据表_二","id":"1_2","pid":"0"}','{"name":"数据表_三","id":"1_3","pid":"0"}','{"name":"数据表_四","id":"1_4","pid":"0"}','{"name":"数据表_五","id":"1_5","pid":"0"}'); }else if($pid == 1){ $array = array('{"name":"测试表_一","id":"2_1","pid":"1"}','{"name":"测试表_二","connect":"测试表_一","id":"2_2","pid":"1"}','{"name":"测试表_三","id":"2_3","pid":"1"}','{"name":"测试表_四","id":"2_4","pid":"1"}','{"name":"测试表_五","id":"2_5","pid":"1"}'); }else if($pid == 2){ $array = array('{"name":"信息表_一","id":"3_1","pid":"3"}','{"name":"信息表_二","id":"3_2","pid":"3"}','{"name":"信息表_三","id":"3_3","pid":"3"}','{"name":"信息表_四","id":"3_4","pid":"3"}','{"name":"信息表_五","id":"3_5","pid":"3"}','{"name":"信息表_五_一","id":"3_5_1","pid":"3_5"}','{"name":"信息表_五_二","id":"3_5_2","pid":"3_5"}','{"name":"信息表_三_一","id":"3_3_1","pid":"3_3"}','{"name":"信息表_三_二","id":"3_3_2","pid":"3_3"}','{"name":"信息表_三_三","id":"3_3_3","pid":"3_3"}'); }else if($pid == 3){ $array = array('{"name":"作废表_一","id":"4_1","pid":"3"}','{"name":"作废表_二","id":"4_2","pid":"3"}','{"name":"作废表_三","id":"4_3","pid":"3"}'); } echo json_encode($array);
js代码大部分都有注释;详细api可在ztree官网查看 进入官方api文档 代码运行需在服务器环境下运行;
最终栗子效果图
以上这篇ztree jquery 树插件的使用(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
上一篇: 思想复杂的人真是伤不起
下一篇: JS实现瀑布流布局