首页
所有分类
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 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jQuery AJAX应用实例总结
May 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
温控(1) 脏读(2) 小喇叭开始广播了(1) 克隆(1) IC-R9500(1) 增删查改(1) 外键(1) S-2000(1) 微信(2) 小喇叭(1)
You might like
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
php下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
Script的加载方法小结
2011/01/12 Javascript
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
jQuery知识点整理
2015/01/30 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
python cookie反爬处理的实现
2020/11/01 Python
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
全球速卖通巴西站点：Aliexpress巴西
2016/08/24 全球购物
Craghoppers德国官网：户外和旅行服装
2020/02/14 全球购物
英国网上超市：Ocado
2020/03/05 全球购物
文艺晚会主持词
2014/03/24 职场文书
消防安全宣传标语
2014/06/07 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
公司开会通知
2015/04/20 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫