jQuery 利用ztree实现树形表格的实例代码
发布时间 - 2026-01-11 03:26:22 点击率：次最近公司的项目中要做一个树形表格，因为之前一直在用ztree实现基本的树形结构，理所当然的首先想到利用ztree来做。
网上找了一下别人做的树形表格，有使用ztree的，也有使用treeTable的，但效果都不太好，于是参考使用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实现树形表格的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
# ztree
# 实现树形表格
# jquery
# jquery实现自定义树形表格的方法【自定义树形结构table】
# 推荐8款jQuery轻量级树形Tree插件
# jQuery树形控件zTree使用小结
# jquery ztree实现下拉树形框使用到了json数据
# json+jQuery实现的无限级树形菜单效果代码
# jquery实现树形菜单完整代码
# jQuery ztree实现动态树形多选菜单
# jQuery 树形结构的选择器
# 轻松学习jQuery插件EasyUI EasyUI创建树形菜单
# jQuery实现树形员工信息表
# 测测
# 小编
# 也有
# 都不
# 在此
# 微软
# 给大家
# 找了
# 做一个
# 自定义
# 所示
# 来做
# 太好
# 所述
# 贴出
# 符合条件
# 人做
# 给我留言
# 中要
# 感谢大家
相关栏目：
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐：
HTML透明颜色代码怎么让图片透明_给img元素加透明色的技巧【方法】
如何确保FTP站点访问权限与数据传输安全？
如何在阿里云虚拟主机上快速搭建个人网站？
如何在阿里云服务器自主搭建网站？
Laravel全局作用域是什么_Laravel Eloquent Global Scopes应用指南
Android使用GridView实现日历的简单功能
深圳网站制作设计招聘,关于服装设计的流行趋势，哪里的资料比较全面？
谷歌Google入口永久地址_Google搜索引擎官网首页永久入口
Laravel安装步骤详细教程_Laravel环境搭建指南
ChatGPT怎么生成Excel公式_ChatGPT公式生成方法【指南】
Laravel如何优雅地处理服务层_在Laravel中使用Service层和Repository层
Laravel如何创建自定义Facades？（详细步骤）
jQuery validate插件功能与用法详解
西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站？
Laravel如何生成API文档？（Swagger/OpenAPI教程）
Android滚轮选择时间控件使用详解
香港服务器选型指南：免备案配置与高效建站方案解析
如何自定义safari浏览器工具栏？个性化设置safari浏览器界面教程【技巧】
详解Android图表 MPAndroidChart折线图
Laravel怎么上传文件_Laravel图片上传及存储配置
Python并发异常传播_错误处理解析【教程】
如何快速搭建FTP站点实现文件共享？
1688铺货到淘宝怎么操作 1688一键铺货到自己店铺详细步骤
Laravel怎么实现前端Toast弹窗提示_Laravel Session闪存数据Flash传递给前端【方法】
网站制作报价单模板图片,小松挖机官方网站报价？
如何快速搭建高效简练网站？
如何在景安服务器上快速搭建个人网站？
php在windows下怎么调试_phpwindows环境调试操作说明【操作】
,交易猫的商品怎么发布到网站上去？
公司门户网站制作流程,华为官网怎么做？
高端智能建站公司优选：品牌定制与SEO优化一站式服务
javascript中的数组方法有哪些_如何利用数组方法简化数据处理
北京网页设计制作网站有哪些,继续教育自动播放怎么设置？
详解vue.js组件化开发实践
*服务器网站为何频现安全漏洞？
如何在万网ECS上快速搭建专属网站？
微信h5制作网站有哪些,免费微信H5页面制作工具？
悟空识字怎么关闭自动续费_悟空识字取消会员自动扣费步骤
如何基于PHP生成高效IDC网络公司建站源码？
Laravel Admin后台管理框架推荐_Laravel快速开发后台工具
郑州企业网站制作公司,郑州招聘网站有哪些？
Win11怎么关闭资讯和兴趣_Windows11任务栏设置隐藏小组件
WEB开发之注册页面验证码倒计时代码的实现
HTML透明颜色代码怎么让下拉菜单透明_下拉菜单透明背景指南【技巧】
齐河建站公司：营销型网站建设与SEO优化双核驱动策略
免费网站制作appp,免费制作app哪个平台好？
Laravel怎么使用Markdown渲染文档_Laravel将Markdown内容转HTML页面展示【实战】
详解阿里云nginx服务器多站点的配置
,网页ppt怎么弄成自己的ppt？
Laravel如何发送系统通知_Laravel Notifications实现多渠道消息通知
下一篇：浅谈oracle SCN机制
下一篇：浅谈oracle SCN机制