根据id调整目录结构

需求

根据数据的id给下面通讯录做目录结构调整，把个list结构的目录做成分级嵌套样式。

参考资料

http://www.treejs.cn/v3/api.php

代码实现

导入必要的head

<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>

按既定的格式编写脚本

<SCRIPT type="text/javascript">
    //这里是约定好配置
		var setting = {
			data: {
				simpleData: {
					enable: true
				}
			}
		};
		//数据${userOrgList}是后端传来的list，用foreach遍历list
		var arr = new Array();
		<c:forEach items="${userOrgList}" var="userOrg" varStatus="status">
		var module = {
		    //id是指当前节点的id
			id:"${userOrg.org.orderID}"
			//是指父节点的id
			,pId:"${userOrg.org.orderID}".substring(0,"${userOrg.org.orderID}".length-5)
			,name:"${userOrg.org.orgName}"
			//这里实现跳转
			,url:"mobileContactsAction.struts?actionType=getUserList&orgID=${userOrg.org.orgID}&orgName=${userOrg.org.orgName}"
		}
		arr.push(module)
		</c:forEach>
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, arr);
		});
</SCRIPT>

body主体

<div class="items-li items-new">
				<ul id="treeDemo" class="ztree"></ul>
			<p class="more-tips">没有更多了</p>
        </div>

实现的效果

关于字体、图标、边框等样式就在zTreeStyle.css调整既可以
设置原始页面跳转,在jquery.ztree.core.js中，把"_blank"修改成"_self"