首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

zTree jQuery 树插件的使用(实例讲解)

Posted in jQuery onSeptember 25, 2017

分享说明：

项目需要树状视图形式展示后台返回的数据;并实现点击节点将节点信息添加到右侧的ul中;待后续提交获取使用;选择了能够实现异步加载节点信息的zTree插件,事实也证明这个插件足够强大,能够满足几乎所有需求;刚接触时看了很多人的分享,结合官方api文档,终于实现了功能,现将我学习的总结也分享出去.

效果介绍;除了zTree默认的效果;使用api增加了一些实用的操作;包括手风琴效果;点击父节点展开效果;点击节点文字关联复选框效果;一级子节点数量展示效果.

外部引入资源

<link rel="stylesheet" href="./zTree_v3-master/css/zTreeStyle/zTreeStyle.css" rel="external nofollow" >
<script type="text/javascript" src="./jquery-1.9.1.js"></script>
<script type="text/javascript" src="./zTree_v3-master/js/jquery.ztree.all.min.js"></script>

html部分代码

<div class="box">
    <ul id="treeDemo" class="ztree"></ul>
    <ul id="ulright">
      <li style="text-align: center;background-color: #ddd;border-bottom: 1px dashed">已选择</li>
    </ul>
  </div>

css代码

ul,li,body{
    margin: 0;
    padding: 0;
  }
  .ztree li span.node_name {
    font-size: 16px;
  }
  .box{
    width: 500px;
    margin:10px auto;
    border:3px solid #ccc;
    padding: 20px;
    border-bottom: none;
  }
  #treeDemo{
    width: 200px;
    display: inline-block;
    background-color: #f1f1f1;
    min-height: 200px;
  }
  #ulright{
    width: 200px;
    margin-left: 50px;
    min-height: 200px;
    border:1px solid #ccc;
    display: inline-block;
    vertical-align: top;
    background-color: #eeeee8;
  }
  #ulright li{
    width: 100%;
    height: 30px;
    list-style: none;
    line-height: 30px;
    margin-bottom: 3px;
    background-color: #00b6ba;
    padding-left: 10px;
    box-sizing: border-box;

  }


  /**/
  .ztree li a.curSelectedNode{
    background-color: transparent;
    border:#00b6ba;
  }
  .ztree li span.node_name{
    font-size: 18px;
    line-height: 18px;
    color: #000;
  }
  .ztree li a{
    padding: 5px;
    vertical-align: middle;
  }
  .ztree li a:hover{
    text-decoration: none;
  }
  .ztree li span.button.chk{
    margin: 9px 3px;
  }

js代码

//递归找到所有节点(非父节点)
function getAllChildrenNodes(treeNode,result){
   if (treeNode.isParent) {
    var childrenNodes = treeNode.children;
    if (childrenNodes) {
      for (var i = 0; i < childrenNodes.length; i++) {
        if(!childrenNodes[i].children){
          result.push(childrenNodes[i].name);
        }
        result = getAllChildrenNodes(childrenNodes[i], result);
      }
    }
  }
  return result;
}
var parames = 3;
//zTree的所有配置
var setting = {
  //zTree 的唯一标识，初始化后，等于 用户定义的 zTree 容器的 id 属性值。
  treeId:"",
  //zTree 容器的 jQuery 对象，主要功能：便于操作,内部参数,不可修改
  treeObj:null,
  //异步请求数据配置;当父节点没有子节点时;点击此父节点会触发请求
  async:{
    //打开此功能
    enable: true,
    url:"./zTreeDemoV9.0SimpleFromV10.0.php",
    type:"post",
    //发送的父级id的字段定义;如修改,遵循格式autoParam: ["id=parentId"]
    autoParam: ["id"],
    //其他需要提交的参数["name","topic","key","ss"]转换后格式为name=topic&key=ss
    otherParam:["json",parames || 1,"test","2"],
    dataType:"json",
    contentType: "application/x-www-form-urlencoded",
    //ajax请求后的数据预处理函数
    dataFilter: function(treeId,parentNode,responseData){
      for(var i=0;i<responseData.length;i++){
        responseData[i] = JSON.parse(responseData[i])
      }
      return responseData;
    }
  },
  //数据配置
  data: {
    simpleData: {
      enable: true,
      idKey: "id", //修改默认的ID为自己的id
      pIdKey: "pid", //修改默认父级ID为自己数据的父级id
      rootPId: 0 //根节点的父节点id
    }
  },
  //视图配置
  view: {
    //是否显示节点前的图标
    showIcon: false,
    //节点上a标签的样式
    fontCss: {
    }
  },
  //选框配置
  check: {
    //启用复选框
    enable: true,
    //chkStyle:"radio"
    //复选框父子级选择联动设置
    chkboxType: { "Y": "ps", "N": "ps" }
  },
  //事件配置
  callback: {
    //点击复选框之前的事件
    beforeCheck:function(treeId, treeNode){//如果节点是父节点,并且勾选时没有子节点,则不允许勾选;针对父节点没有展开,则没有异步加载子节点,此情况禁止点击父节点全选子节点的操作
      if(treeNode.isParent && !treeNode.children){
        return false;
      }
    },
    //回调错误事件
    onAsyncError: function(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown){
      alert("初始化节点数据失败,请稍后重试");
    },
    //回调成功事件
    onAsyncSuccess: function(event, treeId, treeNode, resData){
      var zTree = $.fn.zTree.getZTreeObj("treeDemo");
      console.log("数据加载成功");
      var count = (treeNode.children.length);
      //加载成功后;在节点后面显示此父节点下有几个一级子节点
      $(".ztree").find("a[title="+treeNode.name+"]").find("span[class='node_name']").html(treeNode.name+"<span>("+count+")</span>");
    },
    //父节点展开时的事件
    onExpand: function(event, treeId, treeNode){
      //zTree对象
      var zTree = $.fn.zTree.getZTreeObj("treeDemo");
      //获取点击的id
      var nowId = treeNode.id;
      //获取所有节点
      var allNodes = zTree.getNodes();
      //获取点击节点的层级
      var level = treeNode.level;
      //定义过滤函数;获取节点层级与点击节点层级相同并且为父节点的节点
      function filter(node) {
        return (node.level == treeNode.level && node.isParent);
      }
      //获得点击节点同级的父节点的集合
      var sameLevelNodes = zTree.getNodesByFilter(filter);
      //遍历同级节点集合
      for(var i=0;i<sameLevelNodes.length;i++){
        //将非被点击父节点收起;实现手风琴效果
        if(sameLevelNodes[i].id != nowId){
          zTree.expandNode(sameLevelNodes[i], false, true, true);
        }
      }
    },
    //点击事件
    onClick: function(e, treeId, treeNode, clickFlag) {
      //tree实例
      var zTree = $.fn.zTree.getZTreeObj("treeDemo");
      //点击文字关联复选框
      //如果不是父节点,则关联,或者是父节点,但展开状态位true是,也关联;
      if(!treeNode.isParent || (treeNode.isParent && treeNode.open)){
        zTree.checkNode(treeNode, !treeNode.checked, true);//点击文字关联复选框
      }
      //点击文字展开当前节点
      zTree.expandNode(treeNode, true, true, true);
      // zTree.reAsyncChildNodes(treeNode, "refresh");//强行异步加载(存在子节点也进行加载)
      //手风琴效果;直接调用onExpand
      zTree.setting.callback.onExpand(e, treeId, treeNode);

      //点击节点名称和勾选节点前面的复选框逻辑相同;
      //直接在onClick里面调用onCheck函数;并传入所需参数
      zTree.setting.callback.onCheck(e, treeId, treeNode);
    },
    //点击复选框事件
    onCheck: function(e, treeId, treeNode) {
      //获取右侧ul内所有li标签;用于比较当前选择复选框在右侧是否一斤存在
      var rightLi = $("#ulright").find("li");
      //选中的是底层节点;
      if(!treeNode.isParent){
        //选中状态,加入到右侧
        if(treeNode.checked){
          //遍历右侧li,如果选中的已经存在;return
          for(var i=0;i<rightLi.length;i++){
            if($(rightLi[i]).attr("title") == treeNode.name){
              return;
            }
          }
          // 创建li 追加li
          var addLi = $("<li title="+treeNode.name+"><span></span>");
          addLi.find("span").text(treeNode.name);
          addLi.animate({
            width:"100%",
            height:"30"
          },400)
          addLi.appendTo($("#ulright"));
          //如果点击的节点存在connect字段;判断复选框状态加入到右侧ul或删除
          if(treeNode.connect){
            //遍历右侧li,如果选中的已经存在;return
            for(var i=0;i<rightLi.length;i++){
              if($(rightLi[i]).attr("title") == treeNode.connect){
                return;
              }
            }
             // 创建li 追加li
            var addLi = $("<li title="+treeNode.connect+"><span></span>");
              addLi.find("span").text(treeNode.connect);
              addLi.animate({
                width:"100%",
                height:"30"
              },400)
            addLi.appendTo($("#ulright"));
          }
          //将被勾选的节点背景颜色更改
          $("#treeDemo").find("a[title="+treeNode.name+"]").css("backgroundColor","#00b6ba");
        //非选中状态,删除
        }else{
          //将右侧的次节点对应的li删除
          $("#ulright").find("li[title="+treeNode.name+"]").animate({
            width:"0%",
            height:"0"
          },400,function(){
            $("#ulright").find("li[title="+treeNode.name+"]").remove();
          })
          //取消此节点的背景颜色
          $("#treeDemo").find("a[title="+treeNode.name+"]").css("backgroundColor","");
        }
      //选中的是父节点;获取所有子节点(非父节点),判断复选框状态加入到右侧ul或删除
      }else{
        //调用递归函数;获取所有非父级子节点数组集合
        var addNodesArray = getAllChildrenNodes(treeNode,[]);
        //是选中状态,加入到右侧ul
        if(treeNode.checked){
          //定义存储右侧li的数组
          var rightLiArray = [];
          $("#ulright li").each(function(i,v){
            rightLiArray.push($(v).attr("title"))
          })
          rightLiArray = rightLiArray.slice(1);
          //遍历勾选的数组集合
          for(var i=0;i<addNodesArray.length;i++){
            //判断此节点是否在右侧ul内;不存在则加入
            if(rightLiArray.indexOf(addNodesArray[i]) == -1){
              //创建li 追加li
              var addLi = $("<li title="+addNodesArray[i]+"><span>"+addNodesArray[i]+"</span>");
              addLi.animate({
                width:"100%",
                height:30
              },400)
              addLi.appendTo($("#ulright"));
            }
            //将节点背景颜色修改
            $("#treeDemo").find("a[title="+addNodesArray[i]+"]").css("backgroundColor","#00b6ba");
          }
        //是非选中状态,删除
        }else{
          //遍历节点,执行删除操作
          for(var i=0;i<addNodesArray.length;i++){
            $("#ulright").find("li[title="+addNodesArray[i]+"]").animate({
              width:"0%",
              height:0
            },function(){
              $(this).css("display","none");
              $(this).remove();
            })
            //还原背景颜色
            $("#treeDemo").find("a[title="+addNodesArray[i]+"]").css("backgroundColor","");
          }
        }
      }
    },
  }

};
//zTree的节点信息;可一次性全部加载;可试试异步请求
var zNodes = [{
      name: "数据表",//名称
      id: 4,//id,子元素的pid
      isParent:true,//是否为父节点,默认为false
      pid:0//父节点id;data中的rootPId;
    },{
      name: "测试表",
      id: 1,
      isParent:true,
      pid:0
    },{
      name: "信息表",
      id: 2,
      isParent:true,
      pid:0
    },{
      name: "作废表",
      id: 3,
      isParent:true,
      pid:0
    }];
$(document).ready(function() {
  //初始化zTree; zTree容器的jquery对象/ 配置/ 节点
  $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

后台php代码;本人纯前端,后台代码只会简单的写写;

<?php

$pId = $_POST['id'];

if($pId == 4){
  $array = array('{"name":"数据表_一","id":"1_1","pid":"0"}','{"name":"数据表_二","id":"1_2","pid":"0"}','{"name":"数据表_三","id":"1_3","pid":"0"}','{"name":"数据表_四","id":"1_4","pid":"0"}','{"name":"数据表_五","id":"1_5","pid":"0"}');
}else if($pId == 1){
  $array = array('{"name":"测试表_一","id":"2_1","pid":"1"}','{"name":"测试表_二","connect":"测试表_一","id":"2_2","pid":"1"}','{"name":"测试表_三","id":"2_3","pid":"1"}','{"name":"测试表_四","id":"2_4","pid":"1"}','{"name":"测试表_五","id":"2_5","pid":"1"}');
}else if($pId == 2){
  $array = array('{"name":"信息表_一","id":"3_1","pid":"3"}','{"name":"信息表_二","id":"3_2","pid":"3"}','{"name":"信息表_三","id":"3_3","pid":"3"}','{"name":"信息表_四","id":"3_4","pid":"3"}','{"name":"信息表_五","id":"3_5","pid":"3"}','{"name":"信息表_五_一","id":"3_5_1","pid":"3_5"}','{"name":"信息表_五_二","id":"3_5_2","pid":"3_5"}','{"name":"信息表_三_一","id":"3_3_1","pid":"3_3"}','{"name":"信息表_三_二","id":"3_3_2","pid":"3_3"}','{"name":"信息表_三_三","id":"3_3_3","pid":"3_3"}');
}else if($pId == 3){
  $array = array('{"name":"作废表_一","id":"4_1","pid":"3"}','{"name":"作废表_二","id":"4_2","pid":"3"}','{"name":"作废表_三","id":"4_3","pid":"3"}');
}

echo json_encode($array);

js代码大部分都有注释;详细api可在zTree官网查看 进入官方api文档 代码运行需在服务器环境下运行;

最终栗子效果图

zTree jQuery 树插件的使用(实例讲解)

以上这篇zTree jQuery 树插件的使用(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

zTree jQuery 树插件的使用(实例讲解)

- Author -

_只影向谁去

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 #jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 #jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 #jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 #jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 #jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 #jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 #jQuery
mt-swipe(1) 相对路径(1) exists(2) 相对路径 (1) openpyxl(1) REST(1) Mint UI(1) 慢日志(1) 面向对象(3) cmd(1)
You might like
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
PHP连接access数据库
2015/03/27 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
javascript学习笔记（六）数据类型和JSON格式
2014/10/08 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
机器学习python实战之决策树
2017/11/01 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
python实现图片文件批量重命名
2020/03/23 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
JSP和EJB可以共享HttpSession么？EJB里面可以改变session里面的内容
2013/06/05 面试题
GC是什么？为什么要有GC？
2013/12/08 面试题
夜大毕业生自我鉴定
2013/10/31 职场文书
护理专业学生的求职信范文
2013/12/11 职场文书
xxx同志考察材料
2014/02/07 职场文书
党支部承诺书范文
2014/03/28 职场文书
奶茶店创业计划书
2014/08/14 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
指导老师鉴定意见
2015/06/05 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
详解Javascript实践中的命令模式
2021/05/05 Javascript