本文已参加「新人创作礼」活动,一起开启掘金创作之路

ztree入门

ztree可用于权限管理,机构部门等有层次的数据

准备工作
1. ztree官网
2. 点击右上角的GitHub或者码云的地址将demo下载到本地
3. 在本地新建一个项目,将下载的文件中zTreeStyle.css,jquery-3.4.1.min.js,jquery.ztree.core.min.js放到项目中

静态树

 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
 <title>demo</title>
 <meta name="content-type" content="text/html; charset=UTF-8">
 <!-- ztree的css 必备 -->
 <link rel="stylesheet" th:href="@{/css/zTreeStyle.css}">
 <!-- ztree提供的demo的css 可有可无 -->
 <link rel="stylesheet" th:href="@{/css/demo.css}">
 <!-- jq 必备放在ztree的js前-->
 <script type="text/javascript" th:src=@{/js/jquery-3.4.1.min.js}></script>
 <!-- ztree的js 必备 -->
 <script type="text/javascript" th:src=@{/js/jquery.ztree.core.min.js}></script>
 </head>
 <body>
     <script type="text/javascript">
         //配置
         var setting = {
         };
         //节点
         var zNodes = [
             {   //节点名
                 name : "水果",
                 //是否展开
                 open : false,
                 //是否是父级
                 isParent : true,
                 //子级
                 children : [
                     {
                         name : "苹果",
                         open : false,
                         children : [ {
                             name : "红富士",
                             open : false
                         } ]
                     }, {
                         name : "梨子",
                         open : false,
                         children : [ {
                             name : "砀山梨",
                             open : false
                         } ]
                     }
                 ]
             } ];
         //等待document对象加载完填充数据
         $(document).ready(function() {
             //init方法(容器,zTree配置,zTree节点数据)
             $.fn.zTree.init($("#tree"), setting, zNodes)
         });
     </script>
     <!-- 树 -->
     <ul id="tree" class="ztree" style="width: 260px;overflow: auto;"></ul>
 </body>
 </html>

效果图

回到ztree,在api中ztree提供了异步加载的方式

我们在setting中添加异步加载的配置 //异步加载 async : { //是否开启 enable : true, //数据类型 dataType : "json", //请求地址 url : "/city/treeList", //自动提交父节点属性的参数 autoParam:["id"] } 4. 我们在controller层返回json数据

写sql语句cityDao.xml

<mapper namespace="com.xbsoft.ztree.dao.CityDao">
    <!-- 字段 -->
    <sql id="cityColumns">
        a.id as "id",
        a.pid as "pid",
        a.name as "name"
    </sql>
    <!-- 查询所有 -->
    <select id="findList" resultType="com.xbsoft.ztree.entity.City">
        select
        <include refid="cityColumns" />
        from city a where pid=#{id}
    </select>
    <!-- 查询子节点个数 -->
    <select id="childCount" resultType="int">
        SELECT
        IFNULL(COUNT( 1 ),0)
        FROM
        city
        WHERE
        pid =#{id}
    </select>
</mapper>

2. 写一个工具类 treeNode

    ```java
    public class TreeNode {
    /**
    * 节点id
    *
    */
    private String id;
    /**
    * 节点名
    *
    *
    */
    private String name;
    /**
    * 节点父id
    */
    private String pid;
    /**
    * 是否为父类
    */
    private boolean isParent;
    /**
    * 是否被选中
    */
    private boolean checked;
    /**
    *Getter和Setter方法省略
    */
    }
	 ```
3. controller
    ```java
    @RequestMapping("treeList")
    @ResponseBody
    public String treeList(TreeNode treeNodeParent) {
        // 判断如果id为空 首次进入赋值0
        if (treeNodeParent.getId() == null) {
        treeNodeParent.setId("0");
        }
        // 用于保存节点对象
        List<TreeNode> list = new ArrayList<TreeNode>();
        // 从数据库查询所有返回city对象集合
        List<City> cityList = cityService.findList(treeNodeParent);
        // 遍历逐个赋值
        for (int i = 0; i < cityList.size(); i++) {
        TreeNode treeNode = new TreeNode();
        treeNode.setId(cityList.get(i).getId());
        treeNode.setName(cityList.get(i).getName());
        treeNode.setPid(cityList.get(i).getPid());
        // 判断是否有子节点
        treeNode.setIsParent(cityService.childCount(treeNode) > 0 ? true : false);
        list.add(treeNode);
        }
        // 使用json工具转换为json字符串这里使用的是json-lib也可以使用alibaba的fastJson
        return JSONArray.fromObject(list).toString();
    }
    ```
4. 写完以后我们看结果
	![在这里插入图片描述](https://img-blog.csdnimg.cn/20190712210341442.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg5MTczMQ==,size_16,color_FFFFFF,t_70)
5. 在此基础上我们添加复选框 引入复选框的js`jquery.ztree.excheck.min.js`
6. 在setting中添加check:{enable:true} 即可
7. 如何获取选中的节点的信息: 在setting 中添加回调事件callback:{onCheck:oncheck}
8. 写个函数onCheck
    ```js
    function onCheck(e, treeId, treeNode) {
    //获得树对象
    var treeObj = $.fn.zTree.getZTreeObj("tree");
    //获得被选中的节点
    nodes = treeObj.getCheckedNodes(true);
    //用于存放节点id
    var l = "";
    //遍历节点
    for (var i = 0; i < nodes.length; i++) {
        //拼接节点id用,分割
        l = nodes[i].id + "," + l
      }
       //输出在控制台
        console.log(l); //获取选中节点的值
    }
    ```
### 以上就是zTree的入门 上述所有代码可在我的GitHub上下载[GitHub地址](https://github.com/JaminYe/ztree)