js树形控件—zTree使用,右键出现菜单
https://blog.csdn.net/qq_35934094/article/details/80852989
https://www.cnblogs.com/leechenxiang/p/5952959.html
https://www.jianshu.com/p/99d24aab74a5
详见官网:http://www.treejs.cn/v3/main.php#_zTreeInfo
右键出现菜单:https://www.likecs.com/show-204406515.html
看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,一些小功能做起来比较繁琐,几个功能做了一个月,当然了有能力的关系,也有插件易用度的关系.
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。zTree 是开源免费的软件(MIT 许可证)。
注:MIT许可证(The MIT License)是许多软件授权条款中,被广泛使用的其中一种。与其他常见的软件授权条款(如GPL、LGPL、BSD)相比,MIT是相对宽松的软件授权条款。MIT许可证之名源自麻省理工学院(Massachusetts Institute of Technology, MIT),又称“X条款”(X License)或“X11条款”(X11 License)
1 zTree的基本使用
1.0 zTree的创建
在页面中添加对zTree的js及css引用,由于zTree基于JQuery,JQuery的引用是必须的。
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv=
"content-type"
content=
"text/html; charset=UTF-8"
>
<link rel=
"stylesheet"
href=
"zTreeStyle/zTreeStyle.css"
type=
"text/css"
>
<script type=
"text/javascript"
src=
"jquery-1.4.2.js"
></script>
<script type=
"text/javascript"
src=
"jquery.ztree.core-3.x.js"
></script>
<SCRIPT LANGUAGE=
"JavaScript"
>
var
zTreeObj;
var
setting = {};
// zTree 的参数配置,后面详解
var
zNodes = [
// zTree 的数据属性,此处使用标准json格式
{
name:
"test1"
, open:
true
, children: [
{ name:
"test1_1"
}, { name:
"test1_2"
}]
},
{
name:
"test2"
, open:
true
, children: [
{ name:
"test2_1"
}, { name:
"test2_2"
}]
}
];
$(document).ready(
function
() {
zTreeObj = $.fn.zTree.init($(
"#treeDemo"
), setting, zNodes);
//初始化zTree,三个参数一次分别是容器(zTree 的容器 className 别忘了设置为 "ztree")、参数配置、数据源
});
</SCRIPT>
</HEAD>
<BODY>
<div>
<ul id=
"treeDemo"
class=
"ztree"
></ul>
</div>
</BODY>
</HTML>
1.1 zTree的配置
zTree的配置采用Json格式,按照配置的类型分为view(可视界面相关配置)、data(数据相关配置)、check(复选框相关配置)、callback(各类事件的回调函数配置)、async(zTree异步加载配置),一下是我们经常会使用到的一些配置及说明,其他详细配置可以参考zTree官方API文档的详细介绍。
var
setting = {
view: {
selectedMulti:
true
,
//设置是否能够同时选中多个节点
showIcon:
true
,
//设置是否显示节点图标
showLine:
true
,
//设置是否显示节点与节点之间的连线
showTitle:
true
,
//设置是否显示节点的title提示信息
},
data: {
simpleData: {
enable:
false
,
//设置是否启用简单数据格式(zTree支持标准数据格式跟简单数据格式,上面例子中是标准数据格式)
idKey:
"id"
,
//设置启用简单数据格式时id对应的属性名称
pidKey:
"pId"
//设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构
}
},
check:{
enable:
true
//设置是否显示checkbox复选框
},
callback: {
onClick: onClick,
//定义节点单击事件回调函数
onRightClick: OnRightClick,
//定义节点右键单击事件回调函数
beforeRename: beforeRename,
//定义节点重新编辑成功前回调函数,一般用于节点编辑时判断输入的节点名称是否合法
onDblClick: onDblClick,
//定义节点双击事件回调函数
onCheck: onCheck
//定义节点复选框选中或取消选中事件的回调函数
},
async: {
enable:
true
,
//设置启用异步加载
type:
"get"
,
//异步加载类型:post和get
contentType:
"application/json"
,
//定义ajax提交参数的参数类型,一般为json格式
url:
"/Design/Get"
,
//定义数据请求路径
autoParam: [
"id=id"
,
"name=name"
]
//定义提交时参数的名称,=号前面标识节点属性,后面标识提交时json数据中参数的名称
}
};
treeNode: {
name,
//节点显示的文本
checked,
//节点是否勾选,ztree配置启用复选框时有效
open,
//节点是否展开
icon,
//节点的图标
iconOpen,
//节点展开式的图标
iconClose,
//节点折叠时的图标
id,
//节点的标识属性,对应的是启用简单数据格式时idKey对应的属性名,并不一定是id,如果setting中定义的idKey:"zId",那么此处就是zId
pId,
//节点parentId属性,命名规则同id
children,
//得到该节点所有孩子节点,直接下级,若要得到所有下属层级节点,需要自己写递归得到
isParent,
//判断该节点是否是父节点,一般应用中通常需要判断只有叶子节点才能进行相关操作,或者删除时判断下面是有子节点时经常用到。
getPath()
//得到该节点的路径,即所有父节点,包括自己,此方法返回的是一个数组,通常用于创建类似面包屑导航的东西A-->B-->C
}
标准数据格式