|
收藏闪存小组博问

KwFruit

园龄：4年9个月粉丝：2关注：1

zTree树形组件异步加载数据

最近公司项目中要用到树形组件，开始用的layui，后来发现layui的树形组件不支持异步加载，在网上查发现实现起来很复杂。而公司项目中也有ztree的css，js,于是就选择了ztree。

先来个普通的，总结分4步（引入js,css就不说了）

1，在body里给个实体

?
1
<ui id="tree" class="ztree"></ui>

2，配置setting(setting是什么先不管，反正一定要配)

        var setting = {
            check: {
                    enable: true
                   },   
    };

3，准备父节点的数据

?
1
2
3
4
5
6
//isParent 为true 代表这个为父节点，可以把这个去掉或者改为false看看效果
var zNodes=[
        {"name":"长沙","id":1,isParent:true},
        {"name":"常德","id":2,isParent:true},
        {"name":"株洲","id":3,isParent:true}
];

4，实例化　　

 

?
1
2
3
4
5
6
//在整个页面执行完后  实例化
  $(function(){
          //三个值，第一步的id   第二步的setting ,第三步的zNodes,注意不要写错了
       $.fn.zTree.init($("#tree"),setting,zNodes)
   })
    

 

5，整个代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO - reAsyncChildNodes</TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css"><br>       <!--看这里  引入下面这个后就不是默认的皮肤了-->
    <link rel="stylesheet" href="css/metroStyle/metroStyle.css" type="text/css">
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.ztree.core.js"></script>
    <!--  <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
      <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
    <SCRIPT type="text/javascript">
         
        var setting = {
            check: {
                enable: true
            },  
};
   $(function(){
       $.fn.zTree.init($("#demo"),setting,zNodes)
   })
     
 
 
    var zNodes=[
        {"name":"长沙","id":1,isParent:true},
        {"name":"常德","id":2,isParent:true},
        {"name":"株洲","id":3,isParent:true}
    ];
    </SCRIPT>
 
</HEAD>
 
<BODY>
<ui id="demo" class="ztree"></ui>
</BODY>
</HTML>

6，效果

没有加<link rel="stylesheet" href="css/metroStyle/metroStyle.css" type="text/css">是这个效果 这个样式是ztree给的

加了是这个效果
 

重点来了 异步加载  在普通的基础上加了 2个回调函数

1，准备父节点的数据，先要给一级的父节点一个初始值(这里就是前面的3 4 步)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$.ajax({
            url : 你的url,
            type : "post",
            data : {你的参数},
            dataType : "json",
            success : function(data){
                  
                for(var i=0;i<data.data.length;i++){
        //因为后台没有带 isParent这个参数，而一级节点肯定是父节点就加了给参数
                    data.data[i].isParent=true;
                     
                };
                 
                               //这里直接传参实列化
                $.fn.zTree.init($("#tree"), setting, data.data);   
             
            },error:function(err) {
            }
        });

2，配置setting

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var setting = {
               //异步加载需要做的设置
               async:{
                   enable:true,
                   //异步请求服务器地址
                   url: ,
                    //向服务器传参
                  //这里有个坑 我找了好久 首先这个id是父节点有的，例如 父节点id:1
                //如果服务器接数据 数url?id=?  的话就直接
                 //autoParam:["id"],
                 //而如果接据是 url?parentNum=?
              //其实这个parentNum的值就是父节点id的值就用下面这种方式
                   autoParam:["id=parentNum"],
                //下这个回调函数一定要加，相当于 ajax的 success{}方法
               //从这个回调得带服务器返回的数据
                   dataFilter: ajaxDataFilter
               },
               check: {
                    //true / false 分别表示 显示 / 不显示 复选框或单选框
                 enable: true,  
                 autoCheckTrigger: true, 
              //勾选框类型(checkbox 或 radio）checkbox：为复选   radio单选   
                              //单选为什么要用复选了
                                chkStyle: "radio",
                 chkboxType : { "Y": "ps", "N": "ps" }
                    },
               //回调函数，取选中的值
                callback:{   
                                 //选中或取消选中触发的事件
                      onCheck:zTreeOnClick  
                   }
            };

3，相当于ajax的回调函数　　dataFilter: ajaxDataFilter

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//zTree异步加载回调函数
     function ajaxDataFilter(treeId, parentNode, responseData) {
                //可以打印这几个数据就明白了
                 //如果返回的数据有值
         if (responseData.data) {
            for(var i =0; i < responseData.data.length; i++) {
                //不等于三 代表是父类  一样拼接isParent 
                     // 这里做了个校验，因为公司数据就三个节点  所以只让前面2个为父节点
                if(parentNode.level!=1){responseData.data[i].isParent = true;
                        }
            }
          }
                 //这个return 的数据  就是直接注入到异步加载时 子节点的数据
          return responseData.data;
      };

4，事件回调取值　点击事件触发的函数，不会知道是什么数据   打印就完事了

?
1
2
3
4
5
6
7
8
9
10
11
function zTreeOnClick(event, treeId, treeNode) {       //第二步
         console.log(treeNode);
    var treeObj = $.fn.zTree.getZTreeObj("tree"),
           nodes = treeObj.getCheckedNodes(true),
           v = "";
       for (var i = 0; i < nodes.length; i++) {
 
      
           console.log("节点id:" + nodes[i].id + "节点名称" + v); //获取选中节点的值
       }
   }

5，完整代码　　

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO - reAsyncChildNodes</TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="css/metroStyle/metroStyle.css" type="text/css">
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.ztree.core.js"></script>
    <!--  <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
      <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
      <script >
      $(function(){
        var setting = {
               //异步加载需要做的设置
               async:{
                   enable:true,
                   //异步请求服务器地址
                   url: ,
                    //向服务器传参
                  //这里有个坑 我找了好久 首先这个id是父节点有的，例如 父节点id:1
                //如果服务器接数据 数url?id=?  的话就直接
                 //autoParam:["id"],
                 //而如果接据是 url?parentNum=?
              //其实这个parentNum的值就是父节点id的值就用下面这种方式
                   autoParam:["id=parentNum"],
                //下这个回调函数一定要加，相当于 ajax的 success{}方法
               //从这个回调得带服务器返回的数据
                   dataFilter: ajaxDataFilter
               },
               check: {
                    //true / false 分别表示 显示 / 不显示 复选框或单选框
                 enable: true,  
                 autoCheckTrigger: true, 
              //勾选框类型(checkbox 或 radio）checkbox：为复选   radio单选   
                              //单选为什么要用复选了
                                chkStyle: "radio",
                 chkboxType : { "Y": "ps", "N": "ps" }
                    },
               //回调函数，取选中的值
                callback:{   
                                 //选中或取消选中触发的事件
                      onCheck:zTreeOnClick  
                   }
            };
        //zTree异步加载回调函数
        function ajaxDataFilter(treeId, parentNode, responseData) {
            if (responseData.data) {
               for(var i =0; i < responseData.data.length; i++) {
                   //不等于三 代表是父类
                   if(parentNode.level!=1){responseData.data[i].isParent = true;
                           }
               }
             }
             return responseData.data;
         };
          
          function zTreeOnClick(event, treeId, treeNode) {       //第二步
                console.log(treeNode);
              var treeObj = $.fn.zTree.getZTreeObj("tree"),
                     nodes = treeObj.getCheckedNodes(true),
                     v = "";
                 for (var i = 0; i < nodes.length; i++) {
  
                     $("#hiddeInput").val(nodes[i].name);
              //       console.log("节点id:" + nodes[i].id + "节点名称" + v); //获取选中节点的值
                 }
             }
  
  
          window.getChoseId=function () {
             return     $("#hiddeInput").val();
          }
           
          
     $.ajax({
             url : 你的url,
             type : "post",
             data : {你的参数},
             dataType : "json",
             success : function(data){
                   
                 for(var i=0;i<data.data.length;i++){
                      
                     data.data[i].isParent=true;
                      
                 };
                  
                 $.fn.zTree.init($("#tree"), setting, data.data);  
              
             },error:function(err) {
             }
         });
  
      
 })
  
      
  
 </script>
 
</HEAD>
 
<BODY>
<input id="hiddeInput" type="hidden" value=""/>
<ui id="tree" class="ztree"></ui>
</BODY>
</HTML>

　最后 API  地址：　http://www.treejs.cn/v3/main.php#_zTreeInfo

本文作者：KwFruit

本文链接：https://www.cnblogs.com/mangoubiubiu/p/13688430.html

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   KwFruit  阅读(995)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起