ztree詳解

本文轉載自查看原文 2019-06-11 15:58 1186 ztree

1、添加樣式、js

如果想要hideNodes、showNodes等方法，必須加入

如果不需要那些hideNodes、showNodes等方法以只添加一個js，代替上面的三個js

2、html設置一個div、ul，注意ul的class是固定的ztree

</ul>

</div>

3、寫js操作數據

1、setting配置詳情
var setting = {
//顯示
view: {
selectedMulti: false, //在復制的時候，是否允許選中多個節點。true為支持，按下ctrl鍵生效，false不支持。
dblClickExpand: false, //雙擊的時候是否切換展開狀態。true為切換，false不切換
fontCss: setFontCss_ztree //設置節點的顏色
},
//增刪改，移動復制
edit: {
enable: true, //如果enable為flase，那么樹就不能移動了
showRemoveBtn: true, //是否顯示樹的刪除按鈕
showRenameBtn: true, //是否顯示數的重命名按鈕
isSimpleData : true, //數據是否采用簡單 Array 格式，默認false
treeNodeKey : "id", //在isSimpleData格式下，當前節點id屬性
treeNodeParentKey : "parentId",//在isSimpleData格式下，當前節點的父節點id屬性
showLine : true, //是否顯示節點間的連線
removeTitle: "刪除節點",//刪除Logo的提示
renameTitle: "編輯節點",//修改Logo的提示
//拖拽
drag: {
isCopy: true,//能夠復制
isMove: true,//能夠移動
prev: false,//不能拖拽到節點前
next: false,//不能拖拽到節點后
inner: true//只能拖拽到節點中
}
},
//異步
async: {
enable: true, //開啟異步加載
type:"get",
url:holly.getPath() + "/rest/treeCode/showZtreeSyncRest",
contentType:"application/json",
autoParam: ["id"], //異步加載數據，自動添加id參數，會自動獲取當前節點的id值
dataFilter:filter, //過濾，跟easy-ui中的loadFilter方法一樣。
otherParam: { "id":"1", "code_name":"固網測試"}//提交的時候就會提交參數id=1&code_name=固網測試
},
data:{
key:{
name:"codeName" //節點顯示的值
},
//
simpleData:{
enable:true,//如果為true，可以直接把從數據庫中得到的List集合自動轉換為Array格式。而不必轉換為json傳遞
idKey:"id",//節點的id
pIdKey:"parentId",//節點的父節點id
rootPId:null
}
},
//回調函數
callback: {
beforeDrag: beforeDrag,//拖拽之前
beforeDrop: beforeDrop,//拖拽結束
onDrop: zTreeOnDrop,//拖拽結束后
//onDrag: zTreeOnDrag,//拖拽的時候
beforeRemove: zTreeBeforeRemove,//刪除節點前
onRemove: zTreeOnRemove,//節點刪除之后
beforeEditName: zTreeBeforeEditName,//進行編輯之前
//beforeRename: zTreeBeforeRename,//重命名節點之前
//onRename: zTreeOnRename,//重命名之后
onClick: zTreeOnClick,//點擊
onRightClick: zTreeOnRightClick,//右鍵
onAsyncSuccess: zTreeOnAsyncSuccess//異步加載
//beforeExpand: beforeExpand,//展開節點前
//onAsyncSuccess: onAsyncSuccess,//異步數據加載成功的回調
//onAsyncError: onAsyncError //異步數據加載錯誤后回調
}
};
2、zTree回調方法
//對得到的json數據進行過濾，加載樹的時候執行
function filter(treeId, parentNode, responseData) {
var contents = (responseData.content)?responseData.content:responseData;
//當第一次加載的時候只顯示一級節點，但是要讓別人知道對應一級節點下是否有數據，那么就需要設置isParent,為true可以展開，下面有數據。
//我這里是由於異步加載數據，只加載根節點以及一級節點。那么一級節點下還有子節點，所以設置isParent顯示還有子節點的效果
if(contents.length >0){
for(var i= 0 ; i <contents.length;i++){
//是否是葉子節點
var isParent = contents[i].isParent;
if(isParent == false){
isParent = true;
}else{
isParent = false;
}
contents[i].isParent = isParent;
}
}
return contents;
};
//節點異步加載完成后顯示形狀
//加載樹的默認顯示根節點，以及一級節點，每次異步加載數據都會執行這個方法，也就是有請求都會異步
function zTreeOnAsyncSuccess(event, treeId, msg) {
try {
var treeObj = $.fn.zTree.getZTreeObj("busTree");
//獲取所有節點
var nodes = treeObj .getNodes();
for(var i = 0;i<nodes.length;i++){
//展開一級節點
treeObj .expandNode(nodes[i], true);
}
} catch (err) {
holly.showError("數據異常", err);
}
}
//設置一個標識，是為了解決點擊的時候，執行異步。顯示所有的以及節點，以及一級節點下的所有節點
注意：如果你是異步只加載了根節點和一級節點，那么增刪改的時候，得到的異步結果，會獲取不到該節點的子節點，只有zTreeOnAsyncSuccess方法執行完后，才能夠取到子節點的信息。所以在Eclipse中run執行和debugger執行得到不同的結果。因為run運行數據還沒接受到。
/* var firstAsyncSuccessFlag = 0;
function zTreeOnAsyncSuccess(event, treeId, msg) {
if (firstAsyncSuccessFlag == 0 ) {
try {
var treeObj = $.fn.zTree.getZTreeObj("busTree");
var selectedNode = zTree.getSelectedNodes();
//獲取整個json節點
var nodes = zTree.getNodes();
//展開根節點下的第一個節點
treeObj.expandNode(nodes[0], true);
//把根節點下的所有節點轉換為數組
var childNodes = zTree.transformToArray(nodes[0]);
//展開根節點下的第一個節點的第一節節點
treeObj .expandNode(childNodes[1], true);
//選中根節點下的第一個節點
treeObj .selectNode(childNodes[1]);
firstAsyncSuccessFlag = 1;
} catch (err) {
holly.showError("數據異常", err);
}
}
}*/
//初始化樹
zTree = $.fn.zTree.init($("#busTree"), setting);
//獲取樹
var treeObj = $.fn.zTree.getZTreeObj("busTree");
//異步刷新整個樹，不推薦使用
treeObj.reAsyncChildNodes(null, "refresh");
//新增的時候局部刷新，刷新子節點
treeObj.reAsyncChildNodes(zTree.getSelectedNodes().childNodes,"refresh");
//修改的節點的時候，更改節點信息
//1、設置節點值
treeObj.getSelectedNodes()[0].codeName = $("#treeRootCodeName").val();
treeObj.getSelectedNodes()[0].codeValue = $("#treeRootCodeValue").val();
treeObj.SelectedNodes()[0].remark = $("#treeRootRemark").val();
//2、更新節點信息
treeObj.updateNode(zTree.getSelectedNodes()[0]);
//搜索功能：
1、根據查詢的結果，顯示對應樹形結構。注意這里只能是對應查找幾級節點的信息，還有待優化。
//根據code_name模糊查詢
function searchByValue(){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//經過transformToArray轉換后是一個Array數組，數組里的每個元素都是object對象，這個對象里包含了node的21個屬性。
var nodes = zTree.transformToArray(zTree.getNodes()[0].children);
var key=$("#codeName").val();
//空格回車符不做查詢直接顯示全部
if(/^\s*$/.test(key)){
//updateNodes(false);
zTree.showNodes(nodes);
return;
}
//首先隱藏
zTree.hideNodes(nodes);
var nodeList=zTree.getNodesByParamFuzzy("CODE_NAME", key); //模糊匹配
//把得到的節點放到filterNodes臨時數組中
var filterNodes=[];
for(var i=0;i<nodeList.length;i++){
//這里只能是級別是2的
if(nodeList[i].level==2) {
filterNodes.push(nodeList[i]);
}
}
//顯示
zTree.showNodes(filterNodes);
//取得每一個節點的父節點，進行展示
for(var i=0;i<filterNodes.length;i++){
//主要是找不到父節點的問題
var parentNode = filterNodes[i].getParentNode();
//展開當前節點的父節點下的所有節點
zTree.expandNode(parentNode, true, false, false);
//顯示所有父節點
zTree.showNode(parentNode);
}
}
2、搜索變色功能，但是會顯示全部信息，查詢到的結果會顯示不同的顏色
//展開所有節點
function expand_ztree(treeId){
var treeObj = $.fn.zTree.getZTreeObj(treeId);
treeObj.expandAll(true);
}
//節點沒有父節點，展開，有父節點隱藏
function close_ztree(treeId){
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var nodes = treeObj.transformToArray(treeObj.getNodes());
var nodeLength = nodes.length;
for (var i = 0; i < nodeLength; i++) {
if (nodes[i].PARENT_ID == null) {
//根節點：展開
treeObj.expandNode(nodes[i], true, true, false);
} else {
//非根節點：收起
treeObj.expandNode(nodes[i], false, true, false);
}
}
}
//查詢的onclick時間
function searchByValue(){
searchByFlag_ztree("treeDemo","codeName");
}
//得到查詢結果，並進行設置樣式和展開
function searchByFlag_ztree(treeId, searchConditionId){
//<1>.搜索條件
var searchCondition = $('#' + searchConditionId).val();
// <2>.得到模糊匹配搜索條件的節點數組集合
var highlightNodes = new Array();
if (searchCondition != "") {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
//模糊查詢
highlightNodes = treeObj.getNodesByParamFuzzy("CODE_NAME", searchCondition, null);
}
// <3>.高亮顯示並展示【指定節點】
highlightAndExpand_ztree(treeId, highlightNodes);
}
//展開，並顯示不同顏色
function highlightAndExpand_ztree(treeId, highlightNodes){
var treeObj = $.fn.zTree.getZTreeObj(treeId);
// <1>. 先把全部節點更新為普通樣式
var treeNodes = treeObj.transformToArray(treeObj.getNodes());
var nodes = treeObj.transformToArray(treeObj.getNodes()[0].children);
for (var i = 0; i < treeNodes.length; i++) {
treeNodes[i].highlight = false;
treeObj.updateNode(treeNodes[i]);
}
//<2>.收起樹, 只展開根節點下的一級節點
close_ztree(treeId);
// <3>.把指定節點的樣式更新為高亮顯示，並展開
if (highlightNodes != null) {
for (var i = 0; i < highlightNodes.length; i++) {
//高亮顯示節點，並展開
highlightNodes[i].highlight = true;
treeObj.updateNode(highlightNodes[i]);
//高亮顯示節點的父節點的父節點....直到根節點，並展示
var parentNode = highlightNodes[i].getParentNode();
var parentNodes = getParentNodes_ztree(treeId, parentNode);
//展開
treeObj.expandNode(parentNodes, true, false, true);
treeObj.expandNode(parentNode, true, false, true);
//設置顏色
setFontCss_ztree("",highlightNodes[i]);
}
}
}
//遞歸查找父節點
function getParentNodes_ztree(treeId, node){
if (node != null) {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var parentNode = node.getParentNode();
return getParentNodes_ztree(treeId, parentNode);
} else {
return node;
}
}
//設置顏色
function setFontCss_ztree(treeId, treeNode) {
if (treeNode.PARENT_ID == null) {
//根節點
return {color:"#333", "font-weight":"bold"};
} else if (treeNode.isParent == false){
//葉子節點
return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#660099", "font-weight":"normal"};
} else {
//父節點
return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
}
}
//點擊的時候判斷節點有沒有數據，以便於datadrid是否請求后台刷新
if(treeNodes.isParent){
datagrid刷新
}else{
提示
}
//獲取過濾之外的所有數據
var filterNodes = treeObj.getNodesByFilter(filters);
function filters(node) {
return (node.highlight == true);
}
//獲取過濾的所有數據
treeObj.getNodesByParamFuzzy("CODE_NAME", searchCondition, null);
//當焦點放在節點上顯示新增Logo
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
var addStr = " <span class='button add' id='addBtn_" + treeNode.tId
+ "' title='新增節點' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.tId);
if (btn) btn.bind("click", function(){
//彈出easy-ui新增對話框
treeBusinessManager.newTreeDialog();
return false;
});
};
//當鼠標不在節點的時候，自動隱藏新增按鈕
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
};
//獲取某個節點下的所有節點
//需求：當只能在葉子節點上添加數據的時候，但是展現的時候，需要如果點擊葉子節點顯示葉子節點的數據，點擊節點顯示該節點下的所有葉子節點的信息。
//注意：這里數據用，區分id，是為了去后台進行in查詢
function getAllChildNodes(treeNode) {
var treeObj = $.fn.zTree.getZTreeObj("sheetTree");//獲取ztree
var childNodes = treeObj.transformToArray(treeNode);//把該節點的下的所有數據轉換為數組
var nodes = new Array();
var j = 0;
for(i = 0; i < childNodes.length; i++) {
//只有保存葉子節點的數據
if(!childNodes[i].isParent){
nodes[j] = childNodes[i].id;
//nodes.join(",");
j++;
}
}
return nodes;
}
//獲取該節點下的所有子節點
getChildNodes:function(treeNode,result){
if (treeNode.isParent) {
var childrenNodes = treeNode.children;
if (childrenNodes) {
for (var i = 0; i < childrenNodes.length; i++) {
result += ',' + childrenNodes[i].id;
result = sheetShareManager.getChildNodes(childrenNodes[i], result);
}
}
}
return result;
}
//刷新節點
function refreshNode(id) {
var treeObj = $.fn.zTree.getZTreeObj("busTree");
var node = treeObj.getNodeByParam("id", id, null);
if (node) {
treeObj.reAsyncChildNodes(node, "refresh");
} else {
setTimeout(function() {
refreshNode(id);
}, 10);
}
}
//刷新父節點
function refreshParentNode(id) {
var treeObj = $.fn.zTree.getZTreeObj("busTree");
var node = treeObj.getNodeByParam("id", id, null);
var pNode = node.getParentNode();
if (pNode) {
refreshNode(pNode.id);
} else {
refreshNode("0");
}
}
//刪除根節點的時候，銷毀整棵樹
$.fn.zTree.destroy("busTree");
//修改節點名，判斷是否為空，或者超出限制
function zTreeBeforeRename(treeId, treeNode, newName, isCancel) {
if (newName.length>10||newName.trim().length<=0) {
toastr.error("填寫信息不符合規則!");
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
treeObj.cancelEditName();
return false;
}
return true;
}
function zTreeOnRename(event, treeId, treeNodes, isCancel) {
//真正觸發的時候為undefiend。觸發不成功的時候，為true
if(isCancel == undefined){
//修改操作
}
}
//右鍵顯示新增，修改，刪除（與easy-ui整體類似）
//右鍵，填出編輯框
function zTreeOnRightClick(event, treeId, treeNode) {
var treeObj = $.fn.zTree.getZTreeObj("busTree");
//設置選中右鍵節點
treeObj.selectNode(treeNode);
//這里可以為為div添加click事件，進行新增，修改，刪除操作。
注意：設置選中節點，才能去對應的操作方法中獲取選中的幾點
（var treeObj = $.fn.zTree.getZTreeObj("busTree");
var nodes = treeObj.getSelectedNodes();）
$('#configure-tree-menu').menu('show',{left: event.pageX,top: event.pageY});
};
//刪除節點的時候需要注意
//由於數據是異步加載的，所以不僅需要進行數據刪除，還需要進行邏輯刪除。否則數據沒有及時的回顯，那么樹的狀態isParent還沒改變。
for (var i=0, l=nodes.length; i < l; i++) {
treeObj.removeNode(nodes[i]);
}
//在onBeforeRemove中操作，異步的判斷
//在數據操作成功之后
var treeObj = $.fn.zTree.getZTreeObj("busTree");
treeObj.selectNode(treeNode);
var nodes = treeObj.getSelectedNodes();
for (var i=0, l=nodes.length; i < l; i++) {
treeObj.removeNode(nodes[i]);//默認是false，如果設置為true,那么就會觸發onRemove函數
}
//html中的menu
<div id="configure-tree-menu" class="easyui-menu" style="width:150px;">
<div id="configureAdd" data-options="iconCls:'icon-add'">新增節點</div>
<div id="configureEdit" data-options="iconCls:'icon-edit'">編輯節點</div>
<div id="configureDelete" data-options="iconCls:'icon-remove'">刪除節點</div>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 zTree插件setting配置詳解 zTree ztree之expandNode() 關於ztree雙擊【zTree】 zTree使用的小例子【zTree】zTree展開樹節點【二】zTree checkbox ztree的使用樹插件 ztree 的基本用法 ztree checkbox父子聯動