首先介绍zTree: zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
1、使用zTree一般需要引入下面几个文件:
- <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-3.5.js"></script>
这些文件都可以在http://www.ztree.me下载到。
2、你需要在你的页面相关位置放上一个div
- <div class="zTreeDemoBackground left">
- <ul id="addressBook" class="ztree"></ul>
- </div>
3、其实树状结构是通过获取JSON。
- <SCRIPT type="text/javascript">
- <!--
- var setting = {
- data: {
- simpleData: {
- enable: true
- }
- },
- callback: {
- onClick: zTreeOnClick
- }
- };
- var unitinfos = $.parseJSON('${unitinfos}');
- for(var i=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;
- var groups = $.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(var j=0;j<groups.length;j++){
- groups[j].icon="${contextPath }/scripts/plugin/zTree/css/zTreeStyle/img/diy/2.png";
- }
- function zTreeOnClick(event, treeId, treeNode) {
- var url;
- if(treeNode.id=='600000'){
- url="/oa/sys/addressBook!listAddressBookByUnit.do?s_bodytype=2";
- }else if(treeNode.id=='600001'){
- url="/oa/sys/addressBook!listAddressBookByUnit.do?s_bodytype=3";
- }else if(treeNode.id=='600002'){
- url="/oa/sys/addressBook!listAddressBookByUnit.do?s_bodytype=4";
- }else if(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数据展示形式如下图。
最终在页面上的效果就是: