ztree入门

ztree可用于权限管理,机构部门等有层次的数据
  1. 准备工作
    1. ztree官网
    2. 点击右上角的GitHub或者码云的地址将demo下载到本地
    3. 在本地新建一个项目,将下载的文件中zTreeStyle.css,jquery-3.4.1.min.js,jquery.ztree.core.min.js放到项目中
  2. 静态树 
     <!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入门-编程知识网
    1. 回到ztree,在api中ztree提供了异步加载的方式
  3. 我们在setting中添加异步加载的配置
    //异步加载 async : { //是否开启 enable : true, //数据类型 dataType : "json", //请求地址 url : "/city/treeList", //自动提交父节点属性的参数 autoParam:["id"] }
    4. 我们在controller层返回json数据
    1. 写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">SELECTIFNULL(COUNT( 1 ),0)FROMcityWHEREpid =#{id}</select>
</mapper>
    2. 写一个工具类 treeNode 
      public class TreeNode {
/**
* 节点id
*
*/
private String id;
/**
* 节点名
*
*
*/
private String name;
/**
* 节点父id
*/
private String pid;
/**
* 是否为父类
*/
private boolean isParent;
/**
* 是否被选中
*/
private boolean checked;
/**
*Getter和Setter方法省略
*/
}
    3. controller 
      @RequestMapping("treeList")
@ResponseBody
public String treeList(TreeNode treeNodeParent) {// 判断如果id为空 首次进入赋值0if (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的fastJsonreturn JSONArray.fromObject(list).toString();
}
    4. 写完以后我们看结果
      ztree入门-编程知识网
    5. 在此基础上我们添加复选框 引入复选框的jsjquery.ztree.excheck.min.js
    6. 在setting中添加check:{enable:true} 即可
    7. 如何获取选中的节点的信息: 在setting 中添加回调事件callback:{onCheck:oncheck}
    8. 写个函数onCheck 
      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)

​