分享说明：
项目需要树状视图形式展示后台返回的数据;并实现点击节点将节点信息添加到右侧的ul中;待后续提交获取使用;选择了能够实现异步加载节点信息的zTree插件,事实也证明这个插件足够强大,能够满足几乎所有需求;刚接触时看了很多人的分享,结合官方api文档,终于实现了功能,现将我学习的总结也分享出去.
效果介绍;除了zTree默认的效果;使用api增加了一些实用的操作;包括手风琴效果;点击父节点展开效果;点击节点文字关联复选框效果;一级子节点数量展示效果.
外部引入资源
}
/**/
.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;
}
//点击节点<a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a>和勾选节点前面的复选框逻辑相同;
//直接在onClick里面<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>onCheck<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>;并传入所需参数
zTree.setting.callback.onCheck(e,treeNode);
},//点击复选框事件
onCheck: function(e,treeNode) {
//<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>右侧ul内所有li<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>;用于比较当前选择复选框在右侧是否一斤存在
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或<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>
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");
//非选中状态,<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>
}else{
//将右侧的次节点对应的li<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>
$("#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","");
}
//选中的是父节点;<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>所有子节点(非父节点),判断复选框状态加入到右侧ul或<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>
}else{
//<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>递归<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>;<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>所有非父级子节点数组集合
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,{
name: "作废表",id: 3,pid:0
}];
$(document).ready(function() {
//初始化zTree; zTree容器的jquery对象/ 配置/ 节点
$.fn.zTree.init($("#treeDemo"),setting,zNodes);
});
if($pId == 4){
$array = array('{"name":"数据表_一","id":"1_1","pid":"0"}','{"name":"数据表_二","id":"1_2",'{"name":"数据表_三","id":"1_3",'{"name":"数据表_四","id":"1_4",'{"name":"数据表_五","id":"1_5","pid":"0"}');
}else if($pId == 1){
$array = array('{"name":"测试表_一","id":"2_1","pid":"1"}','{"name":"测试表_二","connect":"测试表_一","id":"2_2",'{"name":"测试表_三","id":"2_3",'{"name":"测试表_四","id":"2_4",'{"name":"测试表_五","id":"2_5","pid":"1"}');
}else if($pId == 2){
$array = array('{"name":"信息表_一","id":"3_1","pid":"3"}','{"name":"信息表_二","id":"3_2",'{"name":"信息表_三","id":"3_3",'{"name":"信息表_四","id":"3_4",'{"name":"信息表_五","id":"3_5",'{"name":"信息表_五_一","id":"3_5_1","pid":"3_5"}','{"name":"信息表_五_二","id":"3_5_2",'{"name":"信息表_三_一","id":"3_3_1","pid":"3_3"}','{"name":"信息表_三_二","id":"3_3_2",'{"name":"信息表_三_三","id":"3_3_3","pid":"3_3"}');
}else if($pId == 3){
$array = array('{"name":"作废表_一","id":"4_1",'{"name":"作废表_二","id":"4_2",'{"name":"作废表_三","id":"4_3","pid":"3"}');
}
echo json_encode($array);
js代码大部分都有注释;详细api可在zTree官网查看 进入官方api文档 代码运行需在服务器环境下运行;
最终栗子效果图
以上这篇zTree jQuery 树插件的使用(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/jquery/36156.html