廣州這幾天的天氣異常寒冷，前幾天搞一個系統需要實現菜單管理，而菜單管理頁則需要涉及到給用戶授權訪問菜單，因此需要選擇相應的可訪問成員，之前在基於elementui的後臺管理系統中用過它的樹圖組件，覺得挺不錯的，因此決定自己封裝一個jquery的ztree成員管理樹圖，在這淘寶雙十二的夜晚，閒暇之餘記錄下自己的學習點滴------------前言
源碼地址：https://github.com/applebring/zTree-plugin
運行：目前爲靜態數據，直接運行index.html即可
插件功能：可實現對左側樹圖節點的搜索，可實現選擇左側樹圖成員到右側框中，可實現右側數據的刪除，可實現數據的初始化
基本界面如下：
直接上代碼，註釋也已經很清晰
HTML:
<BODY>
<h1>基於zTree樹部門成員選擇器插件</h1>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<div class="input-search">
<input type="text" placeholder="輸入關鍵字查詢" id="filter-text" class="empty" /><span style="color:red;font-size:12px;position:absolute;left:0;right:0;top:40px;display:none;" class="no-data">查找不到結果~</span>
</div>
<div class="tree-content">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
<div class="right">
<ul class="choose-content">
</ul>
</div>
</div>
<script type="text/javascript" src="./resources/libs/jQuery/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="./resources/libs/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="./resources/libs/zTree_v3/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="./resources/libs/zTree_v3/js/dir-tree.js"></script>
</BODY>
JAVASCRIPT（ps：搜索關鍵字可根據需要搜索zNode相應字段，本次搜索是通過name字段搜索，如需搜索到父級文字可搜索zNodes中的searchdata字段）
$(function () {
page.init();
});
var page = (function () {
var treeInit = function () {
/*
渲染數組到右側
arr: 渲染的數組
*/
function renderData(arr) {
}
/*主要功能：將點擊事件與checked事件關聯，判斷是否最後一個元素，如果是，將最後一個元素放入渲染數組，再將數組渲染到右側
eventjs event 對象
treeIdString 對應 zTree 的 treeId，便於用戶操控
treeNodeJSON 被點擊的節點 JSON 數據對象
*/
function checkChangeFn(event, treeId, treeNode) {
var rightArr = [];
var checkedNode = zTree.getCheckedNodes(true);
$.each(checkedNode, function (i, item) {
if (!item.isParent) {/*item.isLastNode判斷結點是否爲最後一個結點*/
rightArr.push(item);
}
});
var rhtml = "";
$.each(rightArr, function (i, item) {
rhtml += "<li data-item='" + JSON.stringify(item) + "'><span>" + item.name + "</span><span class='close'>x</span></li>";
});
$(".choose-content").html(rhtml);
}
/*
高亮樣式設置
*/
function getFontCss(treeId, treeNode) {
return (!!treeNode.highlight) ? { color: "#A60000", "font-weight": "bold" } : { color: "#333", "font-weight": "normal" };
}
var setting = {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
view: {
fontCss: getFontCss
},
callback: {
onClick: function (event, treeId, treeNode) {
//將點擊事件與複選框事件關聯
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.checkNode(treeNode, !treeNode.checked, true);
checkChangeFn(event, treeId, treeNode);
var curSelect = $("#treeDemo").find(".curSelectedNode");//控制選中項背景樣式
treeNode.checked == true ? (curSelect.hasClass("unactive") ? curSelect.removeClass("unactive") : '') : curSelect.addClass("unactive");
},
onCheck: checkChangeFn
}
};
var zNodes = [
{ id: 1, pId: 0, name: "集團", open: true, checked: false,searchdata:"集團" },
{ id: 11, pId: 1, name: "一汽", open: true, checked: false,searchdata:'集團一汽' },
{ id: 111, pId: 11, name: "一汽子成員1", checked: false,searchdata:'集團一汽一汽子成員1' },
{ id: 112, pId: 11, name: "一汽子成員2", checked: false,searchdata:'集團一汽一汽子成員2' },
{ id: 12, pId: 1, name: "二汽", open: true, checked: false,searchdata:'集團二汽' },
{ id: 121, pId: 12, name: "二汽子成員1", checked: false,searchdata:'集團二汽二汽子成員1' },
{ id: 122, pId: 12, name: "二汽子成員2", checked: false,searchdata:'集團二汽二汽子成員2' },
{ id: 2, pId: 0, name: "集團 2", checked: true, open: true,searchdata:'' },
{ id: 21, pId: 2, name: "一汽", checked: true,searchdata:'' },
{ id: 22, pId: 2, name: "二汽", open: true, checked: false,searchdata:'' },
{ id: 221, pId: 22, name: "二汽1", checked: true,searchdata:'' },
{ id: 222, pId: 22, name: "二汽2", checked: true,searchdata:'' },
{ id: 23, pId: 2, name: "三汽", checked: false,searchdata:'' }
];
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//初始化數據，調用樹圖check事件
zTree.setting.callback.onCheck();
//清空搜索框內容
$("#filter-text").val("");
};
//組件初始化；
var componentInit = function () {
//右側選框刪除事件
$(".choose-content").on("click", ".close", function () {
var tId = $(this).parent("li").data("item").tId;
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//通過id找到節點，改變狀態
zTree.checkNode(zTree.getNodeByTId(tId), false, true);
//移除元素
$(this).parent("li").remove();
});
/*
搜索樹節點，如果找到則高亮顯示，沒找到提示
*/
function updateNodes(highlight, nodeList) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
if($("#filter-text").val()!=""){zTree.expandAll(false);}//先摺疊所有節點，再展開相應的節點
for (var i = 0, l = nodeList.length; i < l; i++) {
nodeList[i].highlight = highlight;
zTree.expandNode(nodeList[i].getParentNode(), true, false, false); //將搜索到的節點的父節點展開
zTree.updateNode(nodeList[i]);
}
}
function searchNode() {
var filter = $("#filter-text").val();
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var filterArr = zTree.getNodesByParamFuzzy("name", filter, null);;
if (filter === ""){updateNodes(false,filterArr);$(".no-data").css("display","none");return;};
if(filter!=""&&filterArr.length==0){$(".no-data").css("display","block");}else{$(".no-data").css("display","none");}
updateNodes(true, filterArr);
}
/*輸入框添加輸入監聽*/
$("#filter-text").on("propertychange", searchNode).on("input", searchNode);
};
return {
init: function () {
treeInit();
componentInit();
}
}
})();
由於最近項目也趕，手頭活多，這是個不規範的插件，自己後續將進一步將其按照插件規範封裝成一個規範插件，完善並更新到git上，要是需要用到的朋友請直接到git上下載源碼運行~如有錯誤之處，也歡迎指出~要是有感興趣的朋友想封裝下，也歡迎來互相交流下~