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

基于jQuery ztree实现表格风格的树状结构

Posted in jQuery onAugust 31, 2018

zTree 简介

    zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

    zTree 是开源免费的软件（MIT 许可证）。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去，可以进行捐助。

  • zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
  • 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
  • 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
  • 支持 JSON 数据
  • 支持静态 和 Ajax 异步加载节点数据
  • 支持任意更换皮肤 / 自定义图标（依靠css）
  • 支持极其灵活的 checkbox 或 radio 选择功能
  • 提供多种事件响应回调
  • 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
  • 在一个页面内可同时生成多个 Tree 实例
  • 简单的参数配置实现 灵活多变的功能

先来一张完成图:

基于jQuery ztree实现表格风格的树状结构

原理很简单：利用zTree的addDiyDom方法，自定义每个DOM节点，在原来的节点后面加一些div，再利用css样式使它看起来像个表格。

基于jQuery ztree实现表格风格的树状结构 

zTree官方api： http://www.treejs.cn/v3/api.php

下面是完整代码（更新于2017-7-30 08:56 ）

demo.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Demo by dq</title>
  <meta http-equiv="X-UA-Compatible" content="IE=11;IE=10;IE=9;IE=8;"/>
  <!--引入文件： 1、zTree默认css样式 2、jquery 3、zTree js-->
  <link href="https://cdn.bootcss.com/zTree.v3/3.5.29/css/zTreeStyle/zTreeStyle.min.css" rel="external nofollow" rel="stylesheet">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/zTree.v3/3.5.29/js/jquery.ztree.all.min.js"></script>
</head>
<style>
  /*按钮*/
  .icon_div {
    display: inline-block;
    height: 25px;
    width: 35px;
    background: url(http://c.csdnimg.cn/public/common/toolbar/images/f_icon.png) no-repeat 12px -127px;
  }
  .icon_div a {
    display: inline-block;
    width: 27px;
    height: 20px;
    cursor: pointer;
  }
  /*end--按钮*/
  /*ztree表格*/
  .ztree {
    padding: 0;
    border: 2px solid #CDD6D5;
  }
  .ztree li a {
    vertical-align: middle;
    height: 30px;
  }
  .ztree li > a {
    width: 100%;
  }
  .ztree li > a,
  .ztree li a.curSelectedNode {
    padding-top: 0px;
    background: none;
    height: auto;
    border: none;
    cursor: default;
    opacity: 1;
  }
  .ztree li ul {
    padding-left: 0px
  }
  .ztree div.diy span {
    line-height: 30px;
    vertical-align: middle;
  }
  .ztree div.diy {
    height: 100%;
    width: 20%;
    line-height: 30px;
    border-top: 1px dotted #ccc;
    border-left: 1px solid #eeeeee;
    text-align: center;
    display: inline-block;
    box-sizing: border-box;
    color: #6c6c6c;
    font-family: "SimSun";
    font-size: 12px;
    overflow: hidden;
  }
  .ztree div.diy:first-child {
    text-align: left;
    text-indent: 10px;
    border-left: none;
  }
  .ztree .head {
    background: #5787EB;
  }
  .ztree .head div.diy {
    border-top: none;
    border-right: 1px solid #CDD2D4;
    color: #fff;
    font-family: "Microsoft YaHei";
    font-size: 14px;
  }
  /*end--ztree表格*/
</style>
<body>
<div class="layer">
  <div id="tableMain">
    <ul id="dataTree" class="ztree">
    </ul>
  </div>
</div>
<script>
  var zTreeNodes;
  var setting = {
    view: {
      showLine: false,
      showIcon: false,
      addDiyDom: addDiyDom
    },
    data: {
      simpleData: {
        enable: true
      }
    }
  };
  /**
   * 自定义DOM节点
   */
  function addDiyDom(treeId, treeNode) {
    var spaceWidth = 15;
    var liObj = $("#" + treeNode.tId);
    var aObj = $("#" + treeNode.tId + "_a");
    var switchObj = $("#" + treeNode.tId + "_switch");
    var icoObj = $("#" + treeNode.tId + "_ico");
    var spanObj = $("#" + treeNode.tId + "_span");
    aObj.attr('title', '');
    aObj.append('<div class="diy swich"></div>');
    var div = $(liObj).find('div').eq(0);
    switchObj.remove();
    spanObj.remove();
    icoObj.remove();
    div.append(switchObj);
    div.append(spanObj);
    var spaceStr = "<span style='height:1px;display: inline-block;width:" + (spaceWidth * treeNode.level) + "px'></span>";
    switchObj.before(spaceStr);
    var editStr = '';
    editStr += '<div class="diy">' + (treeNode.CONTACT_USER == null ? ' ' : treeNode.CONTACT_USER) + '</div>';
    var corpCat = '<div title="' + treeNode.CORP_CAT + '">' + treeNode.CORP_CAT + '</div>';
    editStr += '<div class="diy">' + (treeNode.CORP_CAT == '-' ? ' ' : corpCat ) + '</div>';
    editStr += '<div class="diy">' + (treeNode.CONTACT_PHONE == null ? ' ' : treeNode.CONTACT_PHONE ) + '</div>';
    editStr += '<div class="diy">' + formatHandle(treeNode) + '</div>';
    aObj.append(editStr);
  }
  /**
   * 查询数据
   */
  function query() {
    var data = [{"CONTACT_USER":"张三","CONTACT_PHONE":"18888888888","addFlag":true,"ORG_ID":1,"id":"o1","pId":"onull","open":true,"name":"单位1","modFlag":true,"CORP_CAT":"港口-天然液化气,港口-液化石油气","TYPE":"org","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部门1","addFlag":true,"CONTACT_PHONE":null,"SECTOR_ID":1,"ORG_ID":1,"id":"s1","pId":"o1","name":"部门1","modFlag":true,"PARENT_ID":null,"CORP_CAT":"港口-天然液化气","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部门12","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":2,"ORG_ID":1,"id":"s2","pId":"s1","name":"部门12","modFlag":true,"PARENT_ID":1,"CORP_CAT":"港口-集装箱","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部门13","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":3,"ORG_ID":1,"id":"s3","pId":"s1","name":"部门13","modFlag":true,"PARENT_ID":1,"CORP_CAT":"港口-集装箱","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部门24","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":4,"ORG_ID":1,"id":"s4","pId":"s2","name":"部门24","modFlag":true,"PARENT_ID":2,"CORP_CAT":"港口-集装箱","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部门35","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":5,"ORG_ID":1,"id":"s5","pId":"s3","name":"部门35","modFlag":true,"PARENT_ID":3,"CORP_CAT":"港口-集装箱","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部门22","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":8,"ORG_ID":1,"id":"s8","pId":"s2","name":"部门22","modFlag":true,"PARENT_ID":2,"CORP_CAT":"-","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部门23","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":9,"ORG_ID":1,"id":"s9","pId":"s2","name":"部门23","modFlag":true,"PARENT_ID":2,"CORP_CAT":"-","TYPE":"sector","delFlag":true},{"CONTACT_USER":"打撒","SECTOR_NAME":"不爱的是分散","addFlag":true,"CONTACT_PHONE":"1231231","SECTOR_ID":21,"ORG_ID":1,"id":"s21","pId":"o1","name":"不爱的是分散","modFlag":true,"PARENT_ID":null,"CORP_CAT":"港口-天然液化气","TYPE":"sector","delFlag":true},{"CONTACT_USER":"111","SECTOR_NAME":"test","addFlag":true,"CONTACT_PHONE":"222","SECTOR_ID":29,"ORG_ID":1,"id":"s29","pId":"s2","name":"test","modFlag":true,"PARENT_ID":2,"CORP_CAT":"港口-集装箱","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"22","addFlag":true,"CONTACT_PHONE":null,"SECTOR_ID":38,"ORG_ID":1,"id":"s38","pId":"o1","name":"22","modFlag":true,"PARENT_ID":null,"CORP_CAT":"-","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部门9","addFlag":true,"CONTACT_PHONE":null,"SECTOR_ID":61,"ORG_ID":1,"id":"s61","pId":"o1","name":"部门9","modFlag":true,"PARENT_ID":null,"CORP_CAT":"港口-天然液化气","TYPE":"sector","delFlag":true},{"CONTACT_USER":"sara","SECTOR_NAME":"流星雨","addFlag":true,"CONTACT_PHONE":"11111111111","SECTOR_ID":141,"ORG_ID":1,"id":"s141","pId":"s1","name":"流星雨","modFlag":true,"PARENT_ID":1,"CORP_CAT":"-","TYPE":"sector","delFlag":true},{"CONTACT_USER":"流星","SECTOR_NAME":"1级部门","addFlag":true,"CONTACT_PHONE":"11111111111","SECTOR_ID":142,"ORG_ID":1,"id":"s142","pId":"o1","name":"1级部门","modFlag":true,"PARENT_ID":null,"CORP_CAT":"港口-天然液化气","TYPE":"sector","delFlag":true},{"CONTACT_USER":"11","SECTOR_NAME":"11","addFlag":true,"CONTACT_PHONE":"11111111111","SECTOR_ID":145,"ORG_ID":1,"id":"s145","pId":"s1","name":"11","modFlag":true,"PARENT_ID":1,"CORP_CAT":"港口-集装箱","TYPE":"sector","delFlag":true},{"CONTACT_USER":"ff","SECTOR_NAME":"fff","addFlag":true,"CONTACT_PHONE":"11","SECTOR_ID":146,"ORG_ID":1,"id":"s146","pId":"s1","name":"fff","modFlag":true,"PARENT_ID":1,"CORP_CAT":"港口-油码头","TYPE":"sector","delFlag":true},{"CONTACT_USER":"1","SECTOR_NAME":"1","addFlag":true,"CONTACT_PHONE":"1","SECTOR_ID":161,"ORG_ID":1,"id":"s161","pId":"o1","name":"1","modFlag":true,"PARENT_ID":null,"CORP_CAT":"港口-天然液化气","TYPE":"sector","delFlag":true}];
    //初始化列表
    zTreeNodes = data;
    //初始化树
    $.fn.zTree.init($("#dataTree"), setting, zTreeNodes);
    //添加表头
    var li_head = ' <li class="head"><a><div class="diy">名称</div><div class="diy">联系人</div><div class="diy">主管行业</div>' +
      '<div class="diy">联系方式</div><div class="diy">操作</div></a></li>';
    var rows = $("#dataTree").find('li');
    if (rows.length > 0) {
      rows.eq(0).before(li_head)
    } else {
      $("#dataTree").append(li_head);
      $("#dataTree").append('<li ><div style="text-align: center;line-height: 30px;" >无符合条件数据</div></li>')
    }
  }
  /**
   * 根据权限展示功能按钮
   * @param treeNode
   * @returns {string}
   */
  function formatHandle(treeNode) {
    var htmlStr = '';
    htmlStr += '<div class="icon_div"><a class="icon_view" title="查看" href="javascript:view(\'' + treeNode.id + '\')" rel="external nofollow" ></a></div>';
    htmlStr += '<div class="icon_div"><a class="icon_edit" title="修改" href="javascript:edit(\'' + treeNode.id + '\')" rel="external nofollow" ></a></div>';
    htmlStr += '<div class="icon_div"><a class="icon_add" title="添加子部门" href="javascript:addSector(\'' + treeNode.id + '\')" rel="external nofollow" ></a></div>';
    htmlStr += '<div class="icon_div"><a class="icon_del" title="删除" href="javascript:del(\'' + treeNode.id + '\')" rel="external nofollow" ></a></div>';
    return htmlStr;
  }
  $(function () {
    //初始化数据
    query();
  })
</script>
</body>
</html>

总结

以上所述是小编给大家介绍的基于jQuery ztree实现表格风格的树状结构，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

基于jQuery ztree实现表格风格的树状结构

- Author -

duqian42707

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

jQuery 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery实现计算器功能
Oct 19 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 #jQuery
jQuery实现的简单手风琴效果示例
Aug 29 #jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 #jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 #jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 #jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 #jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 #jQuery
巴基斯坦购物网站(2) 秘鲁购物网站(1) 摩纳哥购物网站(1) 菲律宾购物网站(13) 缅甸购物网站(1) 卡塔尔购物网站(3) 捷克购物网站(26) 北美洲购物网站(1) 匈牙利购物网站(11) 越南购物网站(9)
You might like
一段php加密解密的代码
2006/10/09 PHP
php 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
codeigniter框架批量插入数据
2014/01/09 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
小程序转发探索示例
2019/02/19 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
Python 2与Python 3版本和编码的对比
2017/02/14 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
对numpy中轴与维度的理解
2018/04/18 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
Python 支持向量机分类器的实现
2020/01/15 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
党支部公开承诺践诺书
2014/03/28 职场文书
学生打架检讨书
2014/10/20 职场文书
欢迎词怎么写
2015/01/23 职场文书
社区党支部承诺书
2015/04/29 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android