首先介绍zTree：zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

1、使用zTree一般需要引入下面几个文件：

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

这些文件都可以在http://www.ztree.me下载到。

2、你需要在你的页面相关位置放上一个div

<divclass="zTreeDemoBackgroundleft"><ulid="addressBook"class="ztree"></ul></div>

3、其实树状结构是通过获取JSON。

<SCRIPTtype="text/javascript"><!--varsetting={data:{simpleData:{enable:true}},callback:{onClick:zTreeOnClick}};varunitinfos=$.parseJSON('${unitinfos}');for(vari=0;i<unitinfos.length;i++){if(unitinfos[i].pId=="0"){unitinfos[i].icon="${contextPath}/scripts/plugin/zTree/css/zTreeStyle/img/diy/1_open.png";}else{unitinfos[i].icon="${contextPath}/scripts/plugin/zTree/css/zTreeStyle/img/diy/2.png";}}unitinfos[0].open=true;vargroups=$.parseJSON('${groups}');unitinfos.push({"id":"600000","pId":"0","name":"客户","icon":"${contextPath}/scripts/plugin/zTree/css/zTreeStyle/img/diy/1_open.png"});unitinfos.push({"id":"600001","pId":"0","name":"供应商","icon":"${contextPath}/scripts/plugin/zTree/css/zTreeStyle/img/diy/1_open.png"});unitinfos.push({"id":"600002","pId":"0","name":"人才信息库","icon":"${contextPath}/scripts/plugin/zTree/css/zTreeStyle/img/diy/1_open.png"});for(varj=0;j<groups.length;j++){groups[j].icon="${contextPath}/scripts/plugin/zTree/css/zTreeStyle/img/diy/2.png";}functionzTreeOnClick(event,treeId,treeNode){varurl;if(treeNode.id=='600000'){url="/oa/sys/addressBook!listAddressBookByUnit.do?s_bodytype=2";}elseif(treeNode.id=='600001'){url="/oa/sys/addressBook!listAddressBookByUnit.do?s_bodytype=3";}elseif(treeNode.id=='600002'){url="/oa/sys/addressBook!listAddressBookByUnit.do?s_bodytype=4";}elseif(treeNode.remark=='group'){url="/oa/sys/addressBook!listAddressBookByGroup.do?s_groupid="+treeNode.id;}else{url="/oa/sys/addressBook!listAddressBookByUnit.do?s_unitcode="+treeNode.id+"&s_bodytype=1";}$("#addressBookListByUnit").attr("action",url).submit();};$(document).ready(function(){$.fn.zTree.init($("#addressBook"),setting,unitinfos.concat(groups));});</SCRIPT>

其中

$(document).ready(function(){$.fn.zTree.init($("#addressBook"),setting,unitinfos.concat(groups));});

中的#addressBook就是定位到第二步中的id为addressbook的ul中。上面代码的JSON数据展示形式如下图。

最终在页面上的效果就是：