ztree入門

時間 2019-12-10

標籤 ztree 入門简体版

原文原文鏈接

ztree入門

ztree可用於權限管理,機構部門等有層次的數據

準備工做
1. ztree官網
2. 點擊右上角的GitHub或者碼雲的地址將demo下載到本地
3. 在本地新建一個項目,將下載的文件中zTreeStyle.css,jquery-3.4.1.min.js,jquery.ztree.core.min.js放到項目中

靜態樹javascript

<!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"] }css
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. 寫完之後咱們看結果html
  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); //獲取選中節點的值 }java
    
    以上就是zTree的入門上述全部代碼可在個人GitHub上下載GitHub地址