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解析获取JSON数据
Apr 08 jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 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下几种删除目录的方法总结
2007/08/19 PHP
IStream与TStream之间的相互转换
2008/08/01 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
use jscript List Installed Software
2007/06/11 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
babel基本使用详解
2017/02/17 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
Node.js静态服务器的实现方法
2018/02/28 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
Python全局变量用法实例分析
2016/07/19 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
人事行政主管岗位职责
2013/12/22 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
首都博物馆观后感
2015/06/05 职场文书
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python