怎么使用zTree“树插件”写出可拖拽叶子节点的“树”
此文章用于记录学习zTree插件的心得,如文章有错误欢迎指出。
实现了解什么是zTree
1、什么是 zTree“树插件”
zTree“树插件”是一款基于jQuery、为编写多功能树结构、属于开源免费的软件。
zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6
下也能基本做到秒杀 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器 支持 JSON 数据 支持静态 和
Ajax 异步加载节点数据 支持任意更换皮肤 / 自定义图标（依靠css） 支持极其灵活的 checkbox 或 radio 选择功能
提供多种事件响应回调 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽 在一个页面内可同时生成多个 Tree 实例
简单的参数配置实现 灵活多变的功能
2、怎么下载 zTree
zTree官网(http://www.treejs.cn/v3/main.php#_zTreeInfo)
3、zTree有哪些常用参数
setting配置
- zTree内置参数(请勿自己初始化、赋值)
- treeObj(zTree 容器的 jQuery 对象,便于操作)
- treeId(zTree 的唯一标识，初始化后，等于 用户定义的 zTree 容器的 id 属性值)
- async(发送请求时的操作)
var setting = {
async: {
//是否开启异步加载模式,默认值：false
enable: true,
//Ajax 获取数据的 URL地址
url: "http://host/getNode.php",
//自动(auto)提交父节点属性的参数
autoParam: ["id", "name"],
//Ajax 提交参数的数据类型,默认值："application/x-www-form-urlencoded"
contentType: "application/json",
//Ajax 获取的数据类型，默认值："text"其余类型参考ajax
dataType: "application/json",
//Ajax 请求提交的静态参数键值对
otherParam: ["id", "1", "name", "test"],
//Ajax 的 http 请求模式,默认为"Post"
type: "get"
}
};
补充：
x-www-form-urlencoded对表单进行操作，application/json传值格式为key：value
- callback(回调函数)
var setting = {
//具体方法查看文档
callback: {
//节点被点击的事件回调函数
onClick：function zTreeOnClick(event, treeId, treeNode) {
alert(treeNode.tId + ", " + treeNode.name);
}
}
};
- check
监听checkbox / radio（复选框或单选框）的状态说明、格式说明 - data
var setting = {
data: {
keep: {
//叶子节点属性锁，是否始终保持isParent = false,设置为 true，则所有isParent = false 的节点，都无法添加子节点。
leaf: true,
//父节点属性锁，是否始终保持 isParent = true,设置为 true，则所有 isParent = true 的节点，即使该节点的子节点被全部删除或移走，依旧保持父节点状态
parent: true
}
}
};
- edit
var setting = {
edit: {
//设置 zTree 是否处于编辑状态
enable: true,
//拖拽时父节点自动展开是否触发 onExpand 事件回调函数
drag: {
autoExpandTrigger: true
}
}
};
- view
var setting = {
view: {
//用于在节点上固定显示用户自定义控件
selectedMulti: false,
addDiyDom: function(treeId, treeNode){
var icoObj = $("#" + treeNode.tId + "_ico");
i f ( treeNode.icon ) {
icoObj.removeClass("button ico_docu ico_open").addClass(treeNode.icon).css("background","");
}
},
//用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
addHoverDom: function(treeId, treeNode){
var aObj = $("#" + treeNode.tId + "_a");
aObj.attr("href", "javascript:;");
if (treeNode.editNameFlag || $("#btnGroup"+treeNode.tId).length>0) return;
var s = '<span id="btnGroup'+treeNode.tId+'">';
if ( treeNode.level == 0 ) {
s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#" > <i class="fas fa-plus rbg "></i></a>';
} else if ( treeNode.level == 1 ) {
s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#" title="修改权限信息"> <i class="fas fa-edit rbg "></i></a>';
if (treeNode.children.length == 0) {
s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#" > <i class="fas fa-times rbg "></i></a>';
}
s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#" > <i class="fas fa-plus rbg "></i></a>';
} else if ( treeNode.level == 2 ) {
s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#" title="修改权限信息"> <i class="fas fa-edit rbg "></i></a>';
s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="#"> <i class="fas fa-times rbg "></i></a>';
}
s += '</span>';
aObj.after(s);
},
removeHoverDom: function(treeId, treeNode){
$("#btnGroup"+treeNode.tId).remove();
}
},
最重要：$.fn.zTree.init(obj, setting, zNodes);
obj-->$("#treeDemo"）--->展现 zTree 的 DOM 容器
setting--->zTree 的配置数据
zNodes--->zTree 的节点数据（如：json数据）
4、zTree怎么简单使用
//网页中有json数据时
var b =[{"id":1,"pid":0,"name":"1","children":[
{"id":1,"pid":0,"name":"2",}]},
{"id":1,"pid":0,"name":"3","children":[
{"id":1,"pid":0,"name":"4",}]}
];
var setting ={
async: {
enable: true
}
}
$.fn.zTree.init($("#treeDemo"), setting, b);
/*动态更新，从数据库中导入
数据库设计(树形结构)继承关系驱动的Schema设计
还可以使用基于左右值编码的Schema设计
先创建数据表 pid=0为最顶层父元素
id name pid
1 1 0
2 2 1
3 3 0
4 4 3
*/
//从上表就可以看出，name=2是name=1的子元素
//后端传过来的json数据
/*[{“id”=1， “name”=1， “pid”=0， isParent=true},
{{“id”=2， “name”=2， “pid”=1， isParent=false},
{{“id”=3， “name”=3， “pid”=0， isParent=true}
{{“id”=4， “name”=4， “pid”=3， isParent=false}]
isParent为true，代表为父节点*/
//记得导入zTree的css文件与js文件、jquery
<link rel="stylesheet" href="../ztree/zTreeStyle.css">
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="../ztree/jquery.ztree.all-3.5.min.js"></script>
var setting = {
view: {
selectedMulti: false
},
async: {
enable: true,
url:"query.do",
autoParam:["pid"]
}
};
//发送请求后，treeObj获取到了值在query.do中
$.fn.zTree.init($("#treeDemo"), setting);
五、怎么使用zTree“树插件”写出可拖拽叶子节点的“树”
做一个最简单的：
var setting = {
/*拖拽功能，必须设置 setting.edit 中的各个属性
拖拽功能的事件回调函数，必须设置 setting.callback.beforeDrag / onDrag / beforeDrop / onDrop 等属性*/
edit:{
enable: true,
removeTitle: setRemoveTitle,
renameTitle: setRenameTitle,
editNameSelectAll: true,
showRemoveBtn: setRemoveBtn,
showRenameBtn: setRenameBtn,
drag: {
//关闭复制
isCopy : false,
//开启移动
isMove : true,
//移动到目标节点前面
prev : true,
//移动到目标节点后面
next : false,
//移动到目标节点里面，成为子节点
inner :false,
maxShowNodeNum: 3
}
},
data: {
keep: {
leaf: true,
parent: true
},
simpleData: {
enable: true
}
},
async: {
enable: true
},
callback: {
beforeDrag:zTreeBeforeDrag,
onDrag:zTreeOnDrag,
beforeDrop:zTreeBeforeDrop,
onDrop:zTreeOnDrop,
beforeDragOpen: true,
beforeEditName: zTreeBeforeEditName
},
view: {
addHoverDom: true,
removeHoverDom: true,
selectedMulti: false,
showLine: false,
showIcon: true
}
};
//禁止修改父节点的名称
function zTreeBeforeEditName(treeId, treeNode) {
return !treeNode.isParent;
}
//编辑节点的title提示
function setRenameTitle(treeId, treeNode) {
return treeNode.isParent ? "编辑父节点名称":"编辑叶子节点名称";
}
//删除节点的title提示
function setRemoveTitle(treeId, treeNode) {
return treeNode.isParent ? "删除父节点":"删除叶子节点";
}
//删除按钮
function setRemoveBtn(treeId, treeNode) {
return true;
}
//父节点没有编辑按钮
function setRenameBtn(treeId, treeNode) {
return !treeNode.isParent;
}
function zTreeBeforeDrag(treeId, treeNodes) {
console.log(treeNodes);
return true;
};
function zTreeOnDrag(event, treeId, treeNodes) {
console.log(treeNodes.length);
};
//禁止将节点拖拽成为根节点
function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType) {
return !(treeNodes == null || (moveType != "inner" && !treeNodes.parentTId));
};
function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
console.log(targetNode.length+","+(targetNode ? (targetNode.id+","+targetNode.name):"isRoot"));
};
var d = [
{"id":1,"pid":0,"seqno":0,"name":"系统权限菜单","children":[
{"id":2,"pid":1,"seqno":0,"name":"控制面板","children":[]},
{"id":6,"pid":1,"seqno":1,"name":"消息管理","checked":false,"children":[]},
{"id":7,"pid":1,"seqno":1,"name":"权限管理","children":[
{"id":8,"pid":7,"seqno":1,"name":"用户管理","children":[]},
{"id":9,"pid":7,"seqno":1,"name":"角色管理","children":[]},
{"id":10,"pid":7,"seqno":1,"name":"许可管理","children":[]}]},
{"id":11,"pid":1,"seqno":1,"name":"资质管理","children":[
{"id":12,"pid":11,"seqno":1,"name":"分类管理","children":[]},
{"id":13,"pid":11,"seqno":1,"name":"资质管理","children":[]}]},
{"id":15,"pid":1,"seqno":1,"name":"流程管理","children":[]},
{"id":16,"pid":1,"seqno":1,"name":"审核管理","children":[
{"id":17,"pid":16,"seqno":1,"name":"实名认证人工审核""children":[]}]}]}];
$.fn.zTree.init($("#treeDemo"), setting, d);
拖拽时没有拖拽的背景，怎么办
我出现这个问题的原因是该背景被覆盖
到ztree\zTreeStyle.css 下ul.ztree.zTreeDragUL设置一个z-index
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
