zTree的使用

最近工程要用到樹形結構,就在網上找到了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

相關文章
相關標籤/搜索