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

分享说明：

项目需要树状视图形式展示后台返回的数据;并实现点击节点将节点信息添加到右侧的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 树插件的使用(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。