jQuery中zTree树插件使用分享
jquery
分享
分享说明:
项目需要树状视图形式展示后台返回的数据;并实现点击节点将节点信息添加到右侧的ul中;待后续提交获取使用;选择了能够实现异步加载节点信息的zTree插件,事实也证明这个插件足够强大,能够满足几乎所有需求;刚接触时看了很多人的分享,结合官方api文档,终于实现了功能,现将我学习的总结也分享出去.
效果介绍;除了zTree默认的效果;使用api增加了一些实用的操作;包括手风琴效果;点击父节点展开效果;点击节点文字关联复选框效果;一级子节点数量展示效果.
外部引入资源
1 <link rel="stylesheet" href="./zTree_v3-master/css/zTreeStyle/zTreeStyle.css"> 2 <script type="text/javascript" src="./jquery-1.9.1.js"></script> 3 <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文档 代码运行需在服务器环境下运行;
最终栗子效果图
以上是jQuery中zTree树插件使用分享的详细内容。更多信息请关注PHP中文网其他相关文章！
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
刺客信条阴影：贝壳谜语解决方案
3 周前
By DDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前
By DDD
在哪里可以找到原子中的起重机控制钥匙卡
3 周前
By DDD
<🎜>：死铁路 - 如何完成所有挑战
4 周前
By DDD
Atomfall指南：项目位置，任务指南和技巧
1 个月前
By DDD
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
夸克网盘怎么分享到百度网盘？
Mar 14, 2024 pm 04:40 PM
夸克网盘和百度网盘都是很便利的存储工具，不少的用户们都在询问这两款软件互通吗？夸克网盘怎么分享到百度网盘？下面就让本站来为用户们来仔细的介绍一下夸克网盘的文件怎么保存到百度网盘方法吧。 夸克网盘的文件怎么保存到百度网盘方法 1、想要知道怎么把夸克网盘的文件转到百度网盘，首先在夸克网盘上下载需要保存的文件，然后打开百度网盘客户端后，选择压缩文件要保存的文件夹，双击打开该文件夹。 2、打开该文件夹后，点击窗口左上角区域的“上传”。 3、在电脑中找到需要上传的压缩文件，点击选
网易云音乐怎么分享到微信朋友圈_网易云音乐分享到微信朋友圈教程
Mar 25, 2024 am 11:41 AM
1、首先我们进入到网易云音乐中，然后在软件首页界面中，点击进入到歌曲的播放界面中。2、然后在歌曲播放界面中，找到右上方的分享功能按钮，如下图红框所示位置，点击选择分享的渠道;在分享渠道中，点击底部的“分享至”选项，然后选择第一个“微信朋友圈”，即可将内容分享至微信朋友圈。
百度网盘怎么分享文件给好友
Mar 25, 2024 pm 06:52 PM
近期，百度网盘安卓客户端迎来了全新的8.0.0版本，这一版本不仅带来了众多变化，还增添了诸多实用功能。其中，最为引人注目的便是文件夹共享功能的增强。现在，用户可以轻松邀请好友加入，共同分享工作和生活中的重要文件，实现更加便捷的协作与共享。那么究竟该如何分享给好友自己需要分享的文件呢，下文中本站小编就将为大家带来详细内容介绍，希望能帮助到大家！1）打开百度云APP，首先点击在首页中选择相关的文件夹，然后再点击界面右上角的【...】图标；（如下图）2）随后点击“共享成员”一栏中的【+】，最后在勾选所
jQuery中如何使用PUT请求方式？
Feb 28, 2024 pm 03:12 PM
jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u
解决Discuz微信分享无法显示的问题
Mar 09, 2024 pm 03:39 PM
标题：解决Discuz微信分享无法显示的问题，需要具体代码示例随着移动互联网的发展，微信成为了人们日常生活中不可或缺的一部分。在网站开发中，为了提升用户体验和扩大网站的曝光度，很多站点会集成微信分享功能，让用户能够方便地分享网站的内容到朋友圈或者微信群中。然而，有时候在使用Discuz等开源论坛系统时，会遇到微信分享无法显示的问题，这给用户体验带来了一定的困
jQuery小技巧：快速修改页面所有a标签的文本
Feb 28, 2024 pm 09:06 PM
标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：<
使用jQuery修改所有a标签的文本内容
Feb 28, 2024 pm 05:42 PM
标题：使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库，被广泛用于处理DOM操作。在网页开发中，经常会遇到需要修改页面上链接标签（a标签）的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标，并提供具体的代码示例。首先，我们需要在页面中引入jQuery库。在HTML文件中添加以下代码：
分享惠普打印机驱动的两种安装方法
Mar 13, 2024 pm 05:16 PM
惠普打印机是很多办公室内必备的打印设备，在电脑上安装打印机驱动，可以完美解决打印机无法连接等等问题。那么惠普打印机驱动怎么安装？下面小编就给大家介绍两个惠普打印机驱动程序安装方法。 第一种方法：官网下载驱动 1、在搜索引擎中搜索惠普中国官网，在支持一栏中，选择【软件与驱动程序】。 2、选择【打印机】分类，在搜索框中输入你的打印机型号，点击【提交】，即可查找到你的打印机驱动。 3、根据你电脑的系统选择对应的打印机，win10即选择win10系统的驱动。 4、下载成功后，在文件夹中找到
