目的:自己最近做了一个ztree 的demo,中间遇到不少麻烦,现在写出来一个为了自己以后忘了可以回顾,还可以给其他小伙伴参考。
案例整体环境使用的 springmvc框架,ztree节点的数据来自数据库获取。
demo:
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../static/css/zTreeStyle/zTreeStyle.css" > </head> <body> <div data-options="region:'east',iconCls:'icon-reload',border:true,title:'East',split:true,collapsible:true" style="width:100px;"></div> <div data-options="region:'west',title:'人力资源管理系统',split:true" style="width:150px;"> <div class="content_wrap"> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> </div> </div> <script src="../static/webFrame/Ztree/js/jquery-1.4.4.min.js"></script> <script src="../static/webFrame/Ztree/js/jquery.ztree.all-3.5.js"></script> <script src="../static/webFrame/Ztree/js/jquery.ztree.core-3.5.js"></script> <script src="../static/webFrame/Ztree/js/jquery.ztree.excheck-3.5.js"></script> <script src="../static/webFrame/Ztree/js/jquery.ztree.exedit-3.5.js"></script> <script src="../static/JavaScript/firstPage.js"></script> </body> </html>
js:
$(document).ready(function(){ var setting = { view: { selectedMulti: false }, check: { enable: false }, data: { simpleData: { enable: true } }, edit: { enable: false }, callback:{ } }; var zTree; var treeNodes; $(function(){ $.ajax({ async : false, cache:false, type: 'POST', dataType : "json", url: '../../../ManageSystem/api/MenuController/getMenuAllData',//请求的action路径 error: function () {//请求失败处理函数 alert('请求失败'); }, success:function(data){ //请求成功后处理函数。 treeNodes = data; //把后台封装好的简单Json格式赋给treeNodes zTree = $.fn.zTree.init($("#treeDemo"),setting, treeNodes); } }); }); });
后台控制层:
@RequestMapping(value = "/getMenuAllData") @ResponseBody public List<Map<String,Object>> getMenuAllData(){ return menuService.getMenuAllData(); }
具体后台从数据库中抓数据忽略。基本这样ztree树结构就可以显示出来。
注意的事项:做demo之前看了网上其他几个demo,发现好多实现起来都遇到点问题。这里我想说下我遇到的问题及解决办法。
1.使用ajax调用后台,发现后台数据查询出来前端获取不到数据报406错误,查了下发现使用@ResponseBody需要引入夹包和配置,jar包就是
配置文件:
<mvc:annotation-driven> <mvc:message-converters> <!--客户端json数据到后台对象中或后端对象数据到客户端json数据中--> <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"> <property name="objectMapper"> <bean class="com.fasterxml.jackson.databind.ObjectMapper" > <property name="dateFormat"> <bean class="java.text.SimpleDateFormat"> <constructor-arg type="java.lang.String" value="yyyy-MM-dd HH:mm:ss" /> </bean> <!-- <bean class="com.fasterxml.jackson.databind.util.StdDateFormat"> </bean> --> </property> </bean> </property> </bean> </mvc:message-converters>
</mvc:annotation-driven>
这些配置好基本可以使前端获取到数据了。
2.前端获取了数据但是页面显示undefind.
查询ztree 的api发现前端树获取的参数是不能随便修改的必须是id,pId,name,url这几个参数,否者显示不出来
下面是我做出来的效果:
具体后面对树的操作看看api 就可以了。