spring boot加thymleaf使用zTree

1，添加头文件

 <link rel="stylesheet" th:href="@{/zTree/css/zTreeStyle.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/zTree/css/demo.css}" type="text/css" />
    <script type="text/javascript" th:src="@{/zTree/js/jquery.ztree.core.js}"></script>
    <script type="text/javascript" th:src="@{/zTree/js/jquery.ztree.excheck.js}"></script>

还有一个jquary文件

2.添加操作数据的js

  <script type="text/javascript" th:inline="javascript" >
        /*<![CDATA[*/
        var zNode;
        var setting = {
            check: {
                enable: true,
                chkboxType: {"Y": "", "N": ""}
            },
            view: {
                dblClickExpand: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeClick: beforeClick,
                onCheck: onCheck
            }
        };
        function getTree() {
            $.post("users/assignjob", function (data) {
                zNode = data.data;
                for (var i = 0; i < zNode.length; i++) {
                    if (zNode[i].isParent == 0) {
                        zNode[i].open = true;
                        zNode[i].nocheck = true;
                    }

                $.fn.zTree.init($("#treeDemo"), setting, zNode[i]);}

            })
        }
        function beforeClick(treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.checkNode(treeNode, !treeNode.checked, null, true);
            return false;
        }

        function onCheck(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                nodes = zTree.getCheckedNodes(true),
                v = "";
            for (var i = 0, l = nodes.length; i < l; i++) {
                v += nodes[i].getParentNode().name + ":" + nodes[i].name + ",";

            }
            if (v.length > 0) v = v.substring(0, v.length - 1);
            var cityObj = $("#citySel");
            cityObj.attr("value", v);

        }

        function showMenu() {
            var cityObj = $("#citySel");
            var cityOffset = $("#citySel").offset();
            $("#menuContent").css({
                left: cityOffset.left + "px",
                top: cityOffset.top + cityObj.outerHeight() + "px"
            }).slideDown("fast");

            $("body").bind("mousedown", onBodyDown);
        }
        function hideMenu() {
            $("#menuContent").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }
        function onBodyDown(event) {
            if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
                hideMenu();
            }
        }

        $(document).ready(function () {
            getTree();

        });
        /*]]>*/
    </script>

3. html的body里面

    <lable for="citySel">部门及职位</lable>
                        <input id="citySel" type="text" readonly="true" style="width:120px;"
                               οnclick="showMenu();"/>
                        <a id="menuBtn" href="#" οnclick="showMenu(); return false;">select</a>

  <div id="menuContent" class="menuContent" style="display:none; position: absolute;">
                    <ul id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>
                </div>

4.Dao

package com.example.demo.Repository;

import com.example.demo.domain.Department;
import com.example.demo.domain.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;

import java.util.List;
import java.util.Set;

/**
 * @Author :zhanglu
 * @Description:
 * @Date :Created in 13:59 2017/11/6
 * @Modified By:
 */
@Mapper
public interface UserRepository  {
    @Select("SELECT * FROM t_user WHERE username= #{username}")
    User findByName(@Param("username") String username);
    @Select("SELECT * FROM t_user WHERE NAME = #{id}")
    User findById(@Param("id") Integer id);
    @Select("select r.rolename from t_user_role u,t_role r where  r.id=u.role_id and u.user_id=#{id}")
    Set<String> findRoleNameByUserId(Integer id);
    @Select("select d.id id,d.parent_did pId,d.department_name name from department d")
    List<Department> selectHeadquarters();
    void updateUser(User user);
}

4 遇到的问题

1)ncaught ReferenceError: jQuery is not defined

这个是jquary没有写在其他js文件前面的问题

2)只显示一个数据

  function getTree() {
            $.post("users/assignjob", function (data) {
                zNode = data.data;
                for (var i = 0; i < zNode.length; i++) {
                    if (zNode[i].isParent == 0) {
                        zNode[i].open = true;
                        zNode[i].nocheck = true;
                    }

                $.fn.zTree.init($("#treeDemo"), setting, zNode[i]);}

            })
        }

上面这个函数跳出循环后只传了一个参数

3）没有显示父节点

是因为后台自己在controle里面调试的时候，debug里面显示的pId，然后传值过去前端的时候显示的就是pid，问了大神说后台传值是传的pId，前段接受的就是小写了。大神说不可能。mmp，我当时一脸懵比。原来是后端调用的get，set方法问题

package com.example.demo.domain;

import lombok.Data;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

/**
 * @Author :zhanglu
 * @Description:
 * @Date :Created in 16:05 2017/11/15
 * @Modified By:
 */
@Entity
@Table(name = "department")
public @Data
class Department {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
        private int id;
        private String name;
        private int pId;
        private int isParent;
    public int getpId() {
        return pId;
    }

    public void setpId(int pId) {
        this.pId = pId;
    }
}

以前用的是@Data自动生成set，get方法。我的pId是第二个字母大写，比较特殊，所以生成方法时会出错。重写方法就可以了。要查看注解为我们生成的方法用逆向生成代码，查class。