大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

分享说明:

创新互联建站服务项目包括武安网站建设、武安网站制作、武安网页制作以及武安网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,武安网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到武安省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

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

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

外部引入资源



html部分代码

    • 已选择

    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("+count+")");
        },
        //父节点展开时的事件
        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");
              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");
                  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[i]+"");
                  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

    后台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 树插件的使用(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持创新互联。


    名称栏目:zTreejQuery树插件的使用(实例讲解)
    本文URL:http://dzwzjz.com/article/jscgph.html
    在线咨询
    服务热线
    服务热线:028-86922220
    TOP