zTree学习记录

news/2024/7/10 23:26:05 标签: javascript, jquery

怎么使用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内置参数(请勿自己初始化、赋值)
    1. treeObj(zTree 容器的 jQuery 对象,便于操作)
    2. treeId(zTree 的唯一标识，初始化后，等于 用户定义的 zTree 容器的 id 属性值)
  • async(发送请求时的操作)
javascript">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(回调函数)
javascript">var setting = {
	//具体方法查看文档
	callback: {
		//节点被点击的事件回调函数
		onClick：function zTreeOnClick(event, treeId, treeNode) {
    		alert(treeNode.tId + ", " + treeNode.name);
		}
	}
};
  • check
    监听checkbox / radio（复选框或单选框）的状态说明、格式说明
  • data
javascript">var setting = {
	data: {
		keep: {
			//叶子节点属性锁，是否始终保持isParent = false,设置为 true，则所有isParent = false 的节点，都无法添加子节点。
			leaf: true,
			//父节点属性锁，是否始终保持 isParent = true,设置为 true，则所有 isParent = true 的节点，即使该节点的子节点被全部删除或移走，依旧保持父节点状态
			parent: true
		}
	}
};
  • edit
javascript">var setting = {
	edit: {
		//设置 zTree 是否处于编辑状态
		enable: true,
		//拖拽时父节点自动展开是否触发 onExpand 事件回调函数
		drag: {
			autoExpandTrigger: true
		}
	}
};
  • view
javascript">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="#" >&nbsp;&nbsp;<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="修改权限信息">&nbsp;&nbsp;<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="#" >&nbsp;&nbsp;<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="#" >&nbsp;&nbsp;<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="修改权限信息">&nbsp;&nbsp;<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="#">&nbsp;&nbsp;<i class="fas fa-times rbg "></i></a>';
							}
			
							s += '</span>';
							aObj.after(s);
						},
						removeHoverDom: function(treeId, treeNode){
							$("#btnGroup"+treeNode.tId).remove();
						}
					},

javascript">最重要：$.fn.zTree.init(obj, setting, zNodes);
obj-->$("#treeDemo"）--->展现 zTree 的 DOM 容器
setting--->zTree 的配置数据
zNodes--->zTree 的节点数据（如：json数据）

4、zTree怎么简单使用

javascript">//网页中有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);

图一

javascript">/*动态更新，从数据库中导入
  数据库设计(树形结构)继承关系驱动的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“树插件”写出可拖拽叶子节点的“树”

做一个最简单的：

javascript">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
在这里插入图片描述


http://www.niftyadmin.cn/n/1512301.html

相关文章

java中的?TE详解Jdk5.0新特性Generic Types (泛型)

java中的?TE详解Jdk5.0新特性Generic Types (泛型)

1. 介绍2.定义简单Java泛型 其实Java的泛型就是创建一个用类型作为参数的类。就象我们写类的方法一样&#xff0c;方法是这样的method(String str1,String str2 ),方法中参数str1、str2的值是可变的。而泛型也是一样的&#xff0c;这样写class Java_Generics<K,V>&#…
阅读更多...
用navicat for mysql添加一次外键的报错之旅

用navicat for mysql添加一次外键的报错之旅

对一张数据表添加外键 未注意栏位名与外栏位名的数据类型&#xff0c;结果直接报错error&#xff1a;3780&#xff0c;这说明两个表关联的列数据类型不一致&#xff0c;检查果然错了&#xff0c;我… 解决方法&#xff1a;将填在外栏位名的列数据类型与栏位名的列数据类型统一…
阅读更多...
在网页加载时给json数据动态添加字段，导致在更改该值的时候无效操作

在网页加载时给json数据动态添加字段，导致在更改该值的时候无效操作

问题虽然处理了&#xff0c;但目前自己的前端知识无法解释&#xff0c;欢迎各位大佬指教。 上代码&#xff1a; let info new Vue({el:"#user_info",data:{itemData:[{id: 1, value: 香蕉,hasSelected:false},{id: 2, value: 苹果,hasSelected:false},{id: 3, value…
阅读更多...
LayoutInflater介绍及例子

LayoutInflater介绍及例子

LayoutInflater介绍及例子 主要是利用LayoutInflater的inflate方法 相当于findViewById&#xff0c;只不过查找的是layout的资源 LayoutInflater mLayoutInflater (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE); linearLayout1 (LinearLayout) mLayou…
阅读更多...
javaweb项目问题记录(二)

javaweb项目问题记录(二)

1、怎么向mysql中加入boolean类型数据 MySQL有tinyint(1)类型&#xff0c;该类型只能存放0与1&#xff0c;与true与false相似&#xff0c;并且&#xff0c;当tinyint字段长度为1时&#xff0c;idea展示为boolean值 String typeNameobj.getClass().getName();//java.lang.Boo…
阅读更多...
初识Java JDK动态代理(AOP)

初识Java JDK动态代理(AOP)

代理模式的定义&#xff1a;为其他对象提供一种代理以控制对这个对象的访问。在某些情况下&#xff0c;一个对象不适合或者不能直接引用另一个对象&#xff0c;而代理对象可以在客户端和目标对象之间起到中介的作用。 1、什么是代理 当一个对象不能直接使用&#xff0c;可以在…
阅读更多...
.net后台弹出提示消息代码

.net后台弹出提示消息代码

提示对话框 页面不空白 跳转&#xff1a; Page.ClientScript.RegisterStartupScript(Page.GetType(), "message", "<script languagejavascript>alert(恭喜您&#xff0c;操作成功&#xff01;);window.locationSearchClientInfo.aspx</script>&qu…
阅读更多...
Oracle Top-N分析法

Oracle Top-N分析法

TOP-N分析法 TOP-N分析法就是通过TOP-N算法从研究对象中得到所需的N个数据&#xff0c;并从排序列表中选取最大或最小的N个数据&#xff0c;这就是一个TOP-N算法。 ROWNUM伪列&#xff08;虚拟出来的列&#xff09; Oracle中没有像MySql中limit函数以及SQLServer中的top关键字&…
阅读更多...
最新文章

Copyright @ 2022~2023