zTree学习笔记之入门

时间 2019-12-06

标签 ztree 学习笔记入门繁體版

原文原文链接

ZTREE的官网例子和JS地址：http://code.google.com/p/jquerytree/。javascript

首先，要在JSP中引入js文件和css文件css

Java代码

<script type="text/javascript" src="jquery.ztree-2.6.js"></script>
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">

Js代码java

var zTree1;
var setting;
setting = {
editable: false,
checkable: false,
showIcon : false,
edit_renameBtn : false,
edit_removeBtn : false,
callback: {
//点击触发的方法
rightClick: zTreeOnRightClick,
mouseDown: zTreeOnMouseDown,
click: zTreeOnClick
}
};
方法：
function zTreeOnRightClick(event, treeId, treeNode) {
if (null == treeNode) {
return false;
}
var level = treeNode.level;
clickedId = treeNode.id;
if (level == 0) {
zTree1.selectNode(treeNode);
showRMenu("root", event.clientX, event.clientY);
} else if (level == 1) {
zTree1.selectNode(treeNode);
showRMenu("region", event.clientX, event.clientY);
} else if (level == 2) {
zTree1.selectNode(treeNode);
showRMenu("point", event.clientX, event.clientY);
} else if(level == 3) {
zTree1.selectNode(treeNode);
showRMenu("device", event.clientX, event.clientY);
}
}
节点：
var zNodes = [
{id:000, name:"监控点列表", open:true,
nodes: ${strTree}
• (json类型的数据格式是：id:””,nodes:[若是有和外边同样],name:””)
• 例子：
• [{"id":"1",
• "nodes":[ {"id":"1","nodes":[],"name":"mp1"},
 {"id":"2","nodes":[],"name":"mp2"},
 {"id":"3","nodes":[],"name":"mp3"}],
"name":"region1"},
{"id":"2",
"nodes":[ {"id":"4","nodes":[],"name":"mp4"},
{"id":"5","nodes":[],"name":"mp5"}],
"name":"region2"},
}
];
zTree1 = $("#treeDemo").zTree(setting, zNodes);

1、如下是ZTREE的一些经常使用的方法和方法返回值：node

一、zTree.getNodes() jquery

获取所有节点数据，无论是否采用简单数据模式（isSimpleData = true），都返回树形结构的 JSON 数据json

Getnodes()的返回值形式代码

[
{"id":1, "name":"test1", "nodes":[
{"id":11, "name":"test11", "nodes":[
{"id":111, "name":"test111"}
]},
{"id":12, "name":"test12"}
]},
......
];

二、zTree. getNodeByParam(key, value) 数据结构

根据节点数据的属性精确搜索知足条件的的 JSON 数据对象,若是有多个一样属性值的节点，则只返回第一个找到的节点。google

三、zTree.getNodesByParam(key, value, parentNode)spa

获取某个节点下key=value的节点数据。code

四、zTree.getNodesByParamFuzzy(key, value[, parentNode])

根据节点数据的属性模糊搜索指定节点 parentNode 下面的子节点中key=value的 JSON 数据对象集合。当parentNode为空时，搜索所有节点。

五、zTree.addNodes(parentNode, newNodes, isSilent)

参数：

parentNode：指定的父节点，若是增长根节点，请设置 parentNode 为 null 便可。

newNodes ： Array(JSON)类型，须要增长的节点数据 JSON 对象集合，支持将节点的n级子节点一次性增长，只须要符合zTree的节点数据结构便可。

isSilent ： Boolean类型，设定增长节点后是否展开其父节点。isSilent = true 时，不展开父节点，其余值或缺省状态都自动展开。

六、zTree.removeNode(treeNode)

删除某个节点。

七、zTree.getSelectedNode()

获取 zTree 当前被选中的节点数据 JSON 对象。

八、zTree.transformToArray(treeNodes)(这个方法我也不是很理解，感受是将选定的节点转换成一个Array)

将 zTree 使用的标准格式转换为简单 Array 格式，便于将数据返回给后台

九、zTree.selectNode(treeNode)

选中某个节点。

十、zTree.getNodeByTId(tID)

根据某个节点数据的 tId 属性获取该获取该节点的 JSON 数据对象

十一、 zTree.moveNode(targetNode, treeNode, moveType)

将某节点移动到其余节点下

targetNode ：指定移动到的目标节点 JSON 数据，若是移入根节点，请设置 targetNode 为 null 便可

treeNode ：指定被移动的节点 JSON 数据

moveType ：指定移动到目标节点的相对位置("inner"：成为子节点（默认值），"before"：成为同级前一个节点，"after"：成为同级后一个节点)

2、setting的属性：

一、 expandSpeed 展开、折叠效果 'fast'(default) 、 'slow'、 ''三种，其中 '' 表示展开、折叠效果关

二、 setting1.isSimpleData = false;

setting1.treeNodeKey = "id";

setting1.treeNodeParentKey = "pId";

isSimpleData = false时须要传json数据，=true时须要传array数据

三、showLine 是否显示节点之间的连线。

四、editable 是否容许节点移动。

五、dragCopy 拖拽节点时进行复制。

六、dragMove 拖拽节点时进行移动。

3、事件监控

一、 beforeClick()

二、 beforeDblclick()

三、 beforeRightClick()

四、 beforeMouseDown()

五、 beforeMouseUp()

六、 beforeChange()

七、 beforeDrag()

八、 confirmDragOpen()

九、 beforeDrop()

十、beforeRename()

十一、confirmRename()

十二、beforeRemove()

1三、beforeExpand()

1四、beforeCollapse()