最近工程要用到樹形結構,就在網上找到了jquery插件ztree,成功的知足了需求。
需求詳見如上圖
1.從後臺獲取欄目樹數據
2.初始化欄目樹時,層級所有展開
3.支持搜索,點擊"查找"按鈕以後,1>展開搜索到的欄目;2>將搜索到的結果標紅
4.欄目支持多選,下面還有個肯定按鈕,將選中的欄目樹id傳送給後臺
直接上樣例,很詳細的說明
1.ztree官方文檔地址
ztree官網地址
注意查看demo演示與api文檔,很詳細,幾乎能夠知足全部常見需求。
2.代碼樣例
`<!DOCTYPE html>javascript
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>ztree demo 2</title> <!--<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"> --> <link rel="stylesheet" type="text/css" href="./css/demo.css"> <link rel="stylesheet" type="text/css" href="./css/zTreeStyle/zTreeStyle.css"> <style> body { background-color: white; margin: 0; padding: 0; text-align: left; }php
div, p, table, th, td { list-style: none; margin: 0; padding: 0; color: #333; font-size: 12px; font-family: dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif; } #testIframe { margin-left: 10px; } </style> <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="./js/bootstrap.min.js"></script> <script type="text/javascript" src="./js/jquery.ztree.core.js"></script> <script type="text/javascript" src="./js/jquery.ztree.excheck.js"></script> <SCRIPT LANGUAGE="JavaScript"> var zTree; var demoIframe; var setting = { check: { enable: true, //父子節點聯動 chkboxType: { "Y": "ps", "N": "ps" } }, view: { nameIsHTML: true, fontCss: setFontCss }, data: { simpleData: { enable: true, idKey: "id", pIdKey: "pId", rootPId: "" } }, callback: { onCheck: onCheckMethod } }; var zNodes = [ { id: 1, pId: 0, name: "一級欄目1", open: true }, { id: 100, pId: 1, name: "一級欄目1/二級欄目1", open: true }, { id: 101, pId: 1, name: "一級欄目1/二級欄目2", open: true }, { id: 2, pId: 0, name: "一級欄目2", open: true }, { id: 200, pId: 2, name: "一級欄目2/二級欄目1", open: true }, { id: 201, pId: 2, name: "一級欄目2/二級欄目2", open: true }, { id: 201001, pId: 201, name: "一級欄目2/二級欄目2/小敏", open: true }, { id: 3, pId: 0, name: "產品一級", open: true }, { id: 301, pId: 3, name: "產品一級/小敏", open: true }, { id: 4, pId: 0, name: "新聞", open: true }, { id: 401, pId: 4, name: "新聞/輿論", open: true }, { id: 401001, pId: 401, name: "新聞/輿論/小敏", open: true }, { id: 5, pId: 0, name: "大數據", open: true }, { id: 501, pId: 5, name: "大數據/小敏", open: true }, ]; $(document).ready(function(){ var t = $("#tree"); t = $.fn.zTree.init(t, setting, zNodes); demoIframe = $("#testIframe"); demoIframe.bind("load", loadReady); //var zTree = $.fn.zTree.getZTreeObj("tree"); //zTree.selectNode(zTree.getNodeByParam("id", 1)); }); function loadReady() { var bodyH = demoIframe.contents().find("body").get(0).scrollHeight, htmlH = demoIframe.contents().find("html").get(0).scrollHeight, maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH), h = demoIframe.height() >= maxH ? minH : maxH; if(h < 530) h = 530; demoIframe.height(h); } /** * 展開樹 * [@param](https://my.oschina.net/u/2303379) treeId */ function expand_ztree(treeId) { var treeObj = $.fn.zTree.getZTreeObj(treeId); treeObj.expandAll(true); } /** * 收起樹:只展開根節點下的一級節點 * [@param](https://my.oschina.net/u/2303379) treeId */ 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].id == '0') { //根節點:展開 treeObj.expandNode(nodes[i], true, true, false); } else { //非根節點:收起 treeObj.expandNode(nodes[i], false, true, false); } } } /** * 搜索樹,高亮顯示並展現【模糊匹配搜索條件的節點s】 * [@param](https://my.oschina.net/u/2303379) treeId * [@param](https://my.oschina.net/u/2303379) searchConditionId 文本框的id */ function search_ztree(treeId, searchConditionId) { //1.先清空全部節點的高亮 //2.在搜索 searchByFlag_ztree(treeId, searchConditionId,""); } /** * 搜索樹,高亮顯示並展現【模糊匹配搜索條件的節點s】 * [@param](https://my.oschina.net/u/2303379) treeId * @param searchConditionId 搜索條件Id * @param flag 須要高亮顯示的節點標識 */ function searchByFlag_ztree(treeId, searchConditionId, flag) { //<1>.搜索條件 var searchCondition = $('#' + searchConditionId).val(); console.log(searchCondition); //<2>.獲得模糊匹配搜索條件的節點數組集合 var highlightNodes = new Array(); if(searchCondition != "") { var treeObj = $.fn.zTree.getZTreeObj(treeId); highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null); } //<3>.高亮顯示並展現【指定節點s】 highlightAndExpand_ztree(treeId, highlightNodes, searchCondition, flag); } /** * 高亮顯示並展現【指定節點s】 * @param treeId * @param highlightNodes 須要高亮顯示的節點數組 * @param flag 須要高亮顯示的節點標識 */ function highlightAndExpand_ztree(treeId, highlightNodes, tx, flag) { var treeObj = $.fn.zTree.getZTreeObj(treeId); //<1>. 先把所有節點更新爲普通樣式 var treeNodes = treeObj.transformToArray(treeObj.getNodes()); 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++) { if(flag != null && flag != "") { if(highlightNodes[i].flag == flag) { //高亮顯示節點,並展開 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); } } else { //高亮顯示節點,並展開 //highlightNodes[i].checked = true; //var t = highlightNodes[i].name; //t = t.replace(eval("/" + tx + "/gi"), "<span style='background-color: yellow;color:red'>" + tx + "</span>"); //highlightNodes[i].name = t; //treeObj.updateNode(highlightNodes[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); } } } } /** * 遞歸獲得指定節點的父節點的父節點....直到根節點 */ function getParentNodes_ztree(treeId, node) { if(node != null) { var treeObj = $.fn.zTree.getZTreeObj(treeId); var parentNode = node.getParentNode(); if(parentNode != null){ return getParentNodes_ztree(treeId, parentNode); }else{ return node; } } } /** * 設置樹節點字體樣式 */ function setFontCss_ztree(treeId, treeNode) { if(treeNode.id == 0) { //根節點 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" }; } } //統計已勾選節點 function onCheckMethod(treeId, treeNode) { var treeObj=$.fn.zTree.getZTreeObj("tree"); nodes=treeObj.getCheckedNodes(true); var v=''; for(var i=0;i<nodes.length;i++){ v = v+nodes[i].name+","; console.log("節點id:"+nodes[i].id+"節點name:"+v); } } function setCheck() { var zTree = $.fn.zTree.getZTreeObj("tree"), py = $("#py").attr("checked")? "p":"", sy = $("#sy").attr("checked")? "s":"", pn = $("#pn").attr("checked")? "p":"", sn = $("#sn").attr("checked")? "s":"", type = { "Y":py + sy, "N":pn + sn}; zTree.setting.check.chkboxType = type; showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };'); } var code; function showCode(str) { if (!code) code = $("#code"); code.empty(); code.append("<li>"+str+"</li>"); } //高亮顯示 function setFontCss(treeId, treeNode) { return (!!treeNode.highlight) ? {color:"#FF0000", "font-weight":"bold","font-size":"14px"} : {color:"#000", "font-weight":"normal"}; }; </SCRIPT>
</head> <body> <div style="clear: both;"> <input type="text" id="ser" value="check"/> <input type="button" value="查找" onclick="search_ztree('tree', 'ser')"/> </div> <ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul> </body> </html>` css
以下是處理zTree初始化時默認選中某些節點
思路:確定是在初始化的時候,設置某些節點選中
var articleTagslist = "所有節點"; var _modifyArticleTags = $("#modifyArticleTags").val(); var setting = { check: { enable: true }, view: { nameIsHTML: true, fontCss: setFontCss }, data: { simpleData: { enable: true, idKey: "id", rootPId: "" } }, callback: { onCheck:onCheckMethod } }; t = $.fn.zTree.init($("#tree"), setting, articleTagslist); var menuIds = _modifyArticleTagsHide.split(','); for(var i = 0; i < menuIds.length; i++) { var node = t.getNodeByParam("id", menuIds[i]); if(node != null) { //選中 t.checkNode(node, true) } } articleTagNameGlobal = _modifyArticleTags;
html