ztree入门

weixin_30505485

于 2019-07-04 21:28:00 发布

阅读量92

点赞数 1

文章标签： json 数据库 javascript ViewUI

原文链接：http://www.cnblogs.com/JaminYe/p/11135031.html

版权

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>

效果图

动态树(从数据库取数据)
1. 表设计,以省市地级城市举例(id:主键,name:城市名,pid:所属城市id)
2. 回到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"> SELECT IFNULL(COUNT( 1 ),0) FROM city WHERE pid =#{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为空首次进入赋值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. 写完以后我们看结果
  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://www.cnblogs.com/JaminYe/p/11135031.html

weixin_30505485

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ztree入门

ztree入门ztree可用于权限管理,机构部门等有层次的数据准备工作ztree官网点击右上角的GitHub或者码云的地址将demo下载到本地在本地新建一个项目,将下载的文件中zTreeStyle.css,jquery-3.4.1.min.js,jquery.ztree.core.min.js放到项目中静态树 <!DOCTYPE html> <html xm...
复制链接

扫一扫