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>