首先介绍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数据展示形式如下图。
最终在页面上的效果就是:
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。