分享说明：
项目需要树状视图形式展示后台返回的数据;并实现点击节点将节点信息添加到右侧的ul中;待后续提交获取使用;选择了能够实现异步加载节点信息的zTree插件,事实也证明这个插件足够强大,能够满足几乎所有需求;刚接触时看了很多人的分享,结合官方api文档,终于实现了功能,现将我学习的总结也分享出去.
效果介绍;除了zTree默认的效果;使用api增加了一些实用的操作;包括手风琴效果;点击父节点展开效果;点击节点文字关联复选框效果;一级子节点数量展示效果.
外部引入资源
html部分代码
- 已选择
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");
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");
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[i]+"");
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文档 代码运行需在服务器环境下运行;
最终栗子效果图
以上这篇zTree jQuery 树插件的使用(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。
