首页
所有分类
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 相关文章推荐
jquery实现提示语淡入效果
May 05 jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
如何在vue 中引入使用jquery
Nov 10 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) 收音机(62) 长波(3) 保养(1) Harman Kardon(1) 短波(8) 怀旧期刊(1) 电台频率(32) 无线电(12) 广播(8)
You might like
生成缩略图
2006/10/09 PHP
国内php原创论坛
2006/10/09 PHP
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
python实现音乐下载的统计
2018/06/20 Python
Python语言快速上手学习方法
2018/12/14 Python
python读取各种文件数据方法解析
2018/12/29 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
行政工作个人的自我评价
2014/02/13 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
2014年团队工作总结
2014/11/24 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
创业计划书之服装
2019/10/07 职场文书