ztree的使用

目的：自己最近做了一个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 就可以了。

猜你喜欢