zTree使用 bootstrap字體圖標

楔子

學習筆記
ztree bootstrap 字體圖標

demo

https://gitee.com/demo51/springboot-jsp/tree/v1.0

效果

在ztree展示的時候修改其 class

父節點在展開和摺疊的時候，class也會變動，因此 展開和摺疊也要變動

	<script type="text/javascript">
		function addDiyDom(treeId, treeNode) {
			var clasObj = $("#" + treeNode.tId + "_ico")
			clasObj.removeClass().addClass(treeNode.icon)
		}
		//雙擊後 圖標又會變回去
		function zTreeOnDblClick(event, treeId, treeNode) {
			alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");
		};

		function zTreeOnExpand(event, treeId, treeNode) {
			addDiyDom(treeId,treeNode)
		};

		function initZtree(tree, url) {
			$.ajax({
				contentType: "application/json;charset=UTF-8",
				//請求地址
				url: url,
				//數據，json字符串 data : JSON.stringify(list),
				//請求成功
				success: function(result) {
					console.log(result);
					var setting = {
						data: {
							simpleData: {
								enable: true,
								//pIdKey: "pid", //java返回來的本來是pId，結果js接收到變成pid小寫了|使用fastjson轉換
							},
						},
						view: {
							addDiyDom: addDiyDom,
							onDblClick: zTreeOnDblClick
						},
						callback: {
							onExpand: zTreeOnExpand, //展開
							onCollapse: zTreeOnExpand, //摺疊
						},
					};
					$.fn.zTree.init($("#" + tree), setting, result);
				},
				//請求失敗，包含具體的錯誤信息
				error: function(e) {
					console.log(e.status);
					console.log(e.responseText);
				}
			});
		}

		$(document).ready(function() {
			// layer.alert('內容');
			layer.msg('hello');
			initZtree('treeDemo', "${proPath}/menu/all/");
			initZtree('treeDemo2', "${proPath}/menu/allnew/");
		});
	</script>