ztree入门讲解以及树形列表的实现

zTree 是一个依靠 jQuery 实现的多功能 “树插件”， 而且拥有较好的浏览器兼容性，有着丰富的功能以及可以自定义样式，足以满足大部分业务的开发。
第一步先导入css及js文件

第二步在html页面创建ztree Div

第三步初始化ztree

var setting = {
view: {
dblClickExpand: false,//双击节点时，是否自动展开父节点的标识
showLine: true,//是否显示节点之间的连线
fontCss:{‘color’:‘black’,‘font-weight’:‘bold’},//字体样式函数
selectedMulti: true //设置是否允许同时选中多个节点
},
check:{
//chkboxType: { “Y”: “ps”, “N”: “ps” },
chkboxType: { “Y”: “”, “N”: “” },
chkStyle: “checkbox”,//复选框类型
enable: true //每个节点上是否显示 CheckBox
},
edit:{
enable: true,
editNameSelectAll: true,
showRemoveBtn : true,
showRenameBtn : true,
removeTitle : “remove”,
renameTitle : “rename”
},
data: {
simpleData: {//简单数据模式
enable:true,
idKey: “id”,
rootPId: null
}
},
callback: {
beforeExpand:zTreeBeforeExpand, // 用于捕获父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作
}
};
zTreeObj = $.fn.zTree.init($("#regionZTree"), setting, dominZTree);

dominZTree 数据结构

深入研究
https://blog.csdn.net/qq3892997/article/details/80306551

下面是我写的一个查询树的页面列表,不需要递归，后台直接调用查询方法即可
<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>

    <IFRAME ID="testIframe" Name="testIframe" FRAMEBORDER=0 SCROLLING=AUTO width=100% height=100%
          SRC="<%=request.getContextPath()%>/echarts.jsp"></IFRAME>
   
</div>

	<script type="text/javascript">
	 demoIframe = $("#testIframe");
 $(function() {
			var setting3 = {
				data : {
					simpleData : {
						  enable:true,
			                idKey: "id",
			                pIdKey: "pid",
			                rootPId: null
					}
				},
				view: {
					//支持html标签
					fontCss: getFont,
					nameIsHTML: true
				},
				callback: {
					  //点击之前触发   		treeId//树的名字   	treeNode 该节点对象	
					  //如果返回 false，zTree 将不会选中节点，也无法触发 onClick 事件回调函数
				        beforeClick: function (treeId, treeNode) {
				        	//alert(treeId);
				        	//alert(treeNode.iconSkin);
				        	
						//获取到树对象
				          var zTree = $.fn.zTree.getZTreeObj("tree3");
							//如果为顶级节点 
				          if (treeNode.isParent) {
				        	  //expandNode通过 zTree 对象执行此方法。
				        	  //展开 / 折叠 指定的节点
				            zTree.expandNode(treeNode);
				            return false;
				          } else {
						  //否则  打开路径文件
						  //页面的话  相当于下个节点  css js 路径下一级 否则会找不到
				            demoIframe.attr("src","<%=request.getContextPath()%>"+treeNode.file);
				            return true;
				          }
				        }
				},
			};
			var url = "<%=request.getContextPath()%>/tree/selecTreeList3.do";
			$.ajax({
				url:url,
				dataType:'json',
				success:function(data){
					//alert(data)
					var zNodes=data;
					$.fn.zTree.init($("#ztree3"), setting3, zNodes);	
				}
			})
		});
 //解决空值问题
 function getFont(treeId, node) {
		return node.font ? node.font : {};
	}
	</script>