jQuery 利用ztree实现树形表格的实例代码


Posted in jQuery onSeptember 27, 2017

最近公司的项目中要做一个树形表格,因为之前一直在用ztree实现基本的树形结构,理所当然的首先想到利用ztree来做。

网上找了一下别人做的树形表格,有使用ztree的,也有使用treeTable的,但效果都不太好,于是参考使用ztree的做法自己做了一个,贴出来供大家参考,请看注释说明,效果如下所示。

jQuery 利用ztree实现树形表格的实例代码

<!DOCTYPE HTML>
<html>
 <head>
 <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>
<style>
 body {
  overflow: auto;
 }
 .ztree *{
  font-family: "微软雅黑","宋体",Arial, "Times New Roman", Times, serif;
 }
 .ztree {
  padding: 0;
  border-left: 1px solid #E3E3E3;
  border-right: 1px solid #E3E3E3;
  border-bottom: 1px solid #E3E3E3;
 }
 .ztree li a {
  vertical-align: middle;
  height: 32px;
  padding: 0px;
 }
 .ztree li > a {
  width: 100%;
 }
 .ztree li a.curSelectedNode {
  padding-top: 0px;
  background-color: #FFE6B0;
  border: 1px #FFB951 solid;
  opacity: 1;
  height: 32px;
 }
 .ztree li ul {
  padding-left: 0px
 }
 .ztree div.divTd span {
  line-height: 30px;
  vertical-align: middle;
 }
 .ztree div.divTd {
  height: 100%;
  line-height: 30px;
  border-top: 1px solid #E3E3E3;
  border-left: 1px solid #E3E3E3;
  text-align: center;
  display: inline-block;
  color: #6c6c6c;
  overflow: hidden;
 }
 .ztree div.divTd:first-child {
  text-align: left;
  text-indent: 10px;
  border-left: none;
 }
 .ztree .head {
  background: #E8EFF5;
 }
 .ztree .head div.divTd {
  color: #393939;
  font-weight: bold;
 }
 .ztree .ck{
  padding: 0 5px;
  margin: 2px 3px 7px 3px;
 }
 li:nth-child(odd){
  background-color:#F5FAFA;
 }
 li:nth-child(even){
  background-color:#FFFFFF;
 }
</style>
 </head>
 <body>
  <div class="layer">
   <div id="tableMain">
    <ul id="dataTree" class="ztree">
    </ul>
   </div>
  </div>
 </body>
</html>
<script type="text/javascript">
var newOpen =null;
$(function () {
 //初始化数据
 var data = [{"id":"20170525091439001010","name":"企业注册","pId":null,"status":"1","typecode":"02"},{"id":"20170724174119005610","name":"部门沟通演练","pId":"20170525091439001010","status":"1","typecode":"2"},{"id":"20170725085455000110","name":"测试12","pId":null,"status":"1","typecode":"11"},{"id":"20170731171011000410","name":"审批流程","pId":null,"status":"1","typecode":"222"},{"id":"20170803133941018010","name":"单位登记","pId":null,"status":"1","typecode":"188"},{"id":"20170804085419000110","name":"模拟","pId":null,"status":"1","typecode":"122"},{"id":"20170809090321000110","name":"审批模拟(新)测试测试测试测试测试","pId":"20170525091439001010","status":"1","typecode":"110"},{"id":"20170809105407009210","name":"测测测测测测测测测测测测测测测测测测","pId":"20170809090321000110","status":"1","typecode":"123"},{"id":"20170814183837000210","name":"企业登记","pId":null,"status":"1","typecode":"111"},{"id":"20170822183437000710","name":"单事项-部门沟通","pId":"20170814183837000210","status":"1","typecode":"822"},{"id":"20170922112245000510","name":"23","pId":null,"status":"1","typecode":"03"},{"id":"20170922143810000010","name":"sdfa","pId":null,"status":"1","typecode":"04"},{"id":"20170922145203000110","name":"64526","pId":null,"status":"1","typecode":"34262"},{"id":"20170922155403001610","name":"333","pId":null,"status":"1","typecode":"33354"},{"id":"20170922171750000210","name":"4441234","pId":null,"status":"1","typecode":"44444"},{"id":"20170925160636007410","name":"测试数据","pId":"20170731171011000410","status":"1","typecode":"231"},{"id":"20170925163306007510","name":"23462111","pId":null,"status":"1","typecode":"2345"},{"id":"20170925163959007610","name":"242345","pId":"20170922112245000510","status":"1","typecode":"3625346"}];
 queryHandler(data);
});
var setting = {
 view: {
  showLine: 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="divTd swich fnt" style="width:60%"></div>');
 var div = $(liObj).find('div').eq(0);
 //从默认的位置移除
 switchObj.remove();
 spanObj.remove();
 icoObj.remove();
 //在指定的div中添加
 div.append(switchObj);
 div.append(spanObj);
 //隐藏了层次的span
 var spaceStr = "<span style='height:1px;display: inline-block;width:" + (spaceWidth * treeNode.level) + "px'></span>";
 switchObj.before(spaceStr);
 //图标垂直居中
 icoObj.css("margin-top","9px");
 switchObj.after(icoObj);
 var editStr = '';
 //宽度需要和表头保持一致
 editStr += '<div class="divTd" style="width:20%">' + (treeNode.typecode == null ? '' : treeNode.typecode ) + '</div>';
 editStr += '<div class="divTd" style="width:10%">' + (treeNode.status == '1' ? '有效' : '无效' ) + '</div>';
 editStr += '<div class="divTd" style="width:10%">' + opt(treeNode) + '</div>';
 aObj.append(editStr);
}
//初始化列表
function queryHandler(zTreeNodes){
 //初始化树
 $.fn.zTree.init($("#dataTree"), setting, zTreeNodes);
 //添加表头
 var li_head = ' <li class="head"><a><div class="divTd" style="width:60%">类型名称</div><div class="divTd" style="width:20%">类型编码</div>' +
  '<div class="divTd" style="width:10%">是否有效</div><div class="divTd" style="width:10%">操作</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>')
 }
}
function opt(treeNode) {
 var htmlStr = '';
 htmlStr += '<input type="button" class="ck" onclick="doEdit(\'' + treeNode.tId + '\',\'' + treeNode.id + '\')" value="编辑"/>';
 htmlStr += '<input type="button" class="ck" onclick="doDelete(\'' + treeNode.tId + '\',\'' + treeNode.id + '\', \'' + treeNode.name + '\')" value="删除"/>';
 return htmlStr;
}

总结

以上所述是小编给大家介绍的jQuery 利用ztree实现树形表格的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 #jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 #jQuery
jQuery EasyUI开发技巧总结
Sep 26 #jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 #jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 #jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 #jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 #jQuery
You might like
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
vue mounted组件的使用
2018/06/18 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
Python内置模块turtle绘图详解
2017/12/09 Python
浅谈python之新式类
2018/08/12 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
2014年心理健康教育工作总结
2014/12/06 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书