spring boot加thymleaf使用zTree

来源：互联网发布：网络系统集成工程师编辑：程序博客网时间：2024/05/22 04:32

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;"                               onclick="showMenu();"/>                        <a id="menuBtn" href="#" onclick="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: */@Mapperpublic 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 @Dataclass 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。

阅读全文

0 0