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()

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。