jQuery treetable 实现树形表格拖拽功能详解与避坑指南
作者：橙子时间：2026-10-25 12:09:39浏览：277
本文详细讲解如何利用 jQuery treetable 插件实现树形表格的拖拽功能。重点解决官方示例中因未引用 jQuery UI 导致的报错问题，并深入分析 file 与 folder 类名在拖拽逻辑中的具体作用及配置要求，提供完整代码参考以辅助开发者快速实现可拖拽的树形表格。
jQuery treetable 拖拽功能实现概述
本文整理在使用 jquery treetable 插件过程中遇到的常见问题及解决方案。
主要目标是构建一个支持数据拖拽操作的树形表格结构。
最终期望达到的交互效果如下所示：
环境准备与依赖配置
第一步，访问 jquery treetable 官方网站下载所需的资源文件。
官方资源获取地址。
使用第三方库前，建议先查阅官方提供的文档说明。
官方文档全为英文，阅读门槛较高，且在线文档的展示效果可能不够直观，例如出现如下情况：
示例中的树形表格由于未正确引用 jQuery UI 库而引发报错。
这种情况较为常见，我们打开下载包中的 index.html 文件并在浏览器中运行，会发现红框标注的示例区域显示异常。
文档中其实已明确指出，jquery treetable 的拖拽功能依赖于 jqueryui，因此必须在示例文件（index.html）中引入 jqueryui 库。
成功引入依赖后，界面显示恢复正常，效果如下：
其余配置文档描述较为清晰，按步骤操作或参考后续实例即可实现基础的树形表格功能。
拖拽功能核心配置与类名规范
但在配置拖拽功能时，有几个关键细节需要特别注意：
首先分析实现拖拽的核心代码逻辑：
$("#example-advanced").treetable({ expandable: true });
// Highlight selected row
$("#example-advanced tbody").on("mousedown", "tr", function() {
$(".selected").not(this).removeClass("selected");
$(this).toggleClass("selected");
});
// Drag & Drop Example Code
$("#example-advanced .file, #example-advanced .folder").draggable({
helper: "clone",
opacity: .75,
refreshPositions: true,
revert: "invalid",
revertDuration: 300,
scroll: true
});
$("#example-advanced .folder").each(function() {
$(this).parents("#example-advanced tr").droppable({
accept: ".file, .folder",
drop: function(e, ui) {
var droppedEl = ui.draggable.parents("tr");
$("#example-advanced").treetable("move", droppedEl.data("ttId"), $(this).data("ttId"));
},
hoverClass: "accept",
over: function(e, ui) {
var droppedEl = ui.draggable.parents("tr");
if(this != droppedEl[0] && !$(this).is(".expanded")) {
$("#example-advanced").treetable("expandNode", $(this).data("ttId"));
}
}
});
});上述代码中涉及 file 和 folder 两个类名。若要启用拖拽，必须将这些类名之一添加到每一行（tr）的单元格（td）中。具体是仅添加到任意一个单元格还是所有单元格，取决于实际业务需求。
若使用 file 类名，该行下方不允许存在子节点；若使用 folder 类名，则允许存在子节点。具体选择哪种类名需根据数据层级结构决定。
完整代码示例与测试
以下提供经过测试的完整代码示例供参考：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jquery treetable 实现树形表格拖拽</title>
<link href="./css/jquery.treetable.theme.default.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<link href="./css/jquery.treetable.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="./layui/css/layui.css" rel="external nofollow" media="all">
</head>
<body>
<table lay-even="" lay-skin="row" style="width:60%" id="example1">
<thead>
<tr >
<th>人物</th>
<th>民族</th>
<th>出场时间</th>
<th>格言</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbodys">
<tr data-tt-id="1" >
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td><button class='layui-btn layui-btn-danger'>删除</button></td>
</tr>
<tr data-tt-id="1-1" data-tt-parent-id="1">
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td><button class='layui-btn layui-btn-danger'>删除</button></td>
</tr>
<tr data-tt-id="1-1-1" data-tt-parent-id="1-1">
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td><button class='layui-btn layui-btn-danger'>删除</button></td>
</tr>
<tr data-tt-id="2" >
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td><button class='layui-btn layui-btn-danger'>删除</button></td>
</tr>
<tr data-tt-id="2-1" data-tt-parent-id="2">
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td><button class='layui-btn layui-btn-danger'>删除</button></td>
</tr>
</tbody>
</table>
</body>
<script src="https://libs.cdnjs.net/jquery/2.2.1/jquery.js"></script>
<script src="https://libs.cdnjs.net/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="./layui/layui.js" charset="utf-8"></script>
<script src="./jquery.treetable.js"></script>
<script>
$(function() {
// ================== jquery treetable ==============================
initTreeTable();
});
// treetable 树拖拽
function initTreeTable(){
// 加载treetable
$("#example1").treetable({
expandable: true,// 展示
initialState :"expanded",//默认打开所有节点
stringCollapse:'',
stringExpand:''
});
// 让选中的行高亮
$(document).on('mousedown', '#example1 tbody tr', function() {
$("tr.selected").removeClass("selected");
$(this).toggleClass("selected");
});
$("#example1 .file, #example1 .folder").draggable({
helper: "clone",
opacity: .75,
refreshPositions: true, // Performance?
revert: "invalid",
revertDuration: 300,
scroll: true
});
$("#example1 .folder").each(function() {
$(this).parents("#example1 tr").droppable({
accept: ".file, .folder",
drop: function(e, ui) {
var droppedEl = ui.draggable.parents("tr");
// 获取移动行的ID
// moveid = droppedEl.data("ttId");
// 获取目标行的ID
// targetid = $(this).data("ttId");
$("#example1").treetable("move", droppedEl.data("ttId"), $(this).data("ttId"));
},
hoverClass: "accept",
over: function(e, ui) {
var droppedEl = ui.draggable.parents("tr");
if(this != droppedEl[0] && !$(this).is(".expanded")) {
$("#example1").treetable("expandNode", $(this).data("ttId"));
}
}
});
});
}
var layer = null;
// 删除行
// 这里要着重说明一下，动态添加的html是没有绑定js事件的，因此我这里使用jquery封装的事件委托来为html动态绑定事件
// 具体请参考网址：https://www.jianshu.com/p/568f93410345
$(document).on('click', '#tbodys tr button', function() {
var obj = $(this).parents("tr");
// 在layui中使用layer弹窗
layui.use('layer', function(){
layer = layui.layer;
layer.confirm('您确定要删除这个字段', {
btn: ['确定','取消'] //按钮
}, function(){
obj.remove();
layer.msg('删除成功', {icon: 1});
});
});
});
</script>
</html>以上即为利用 jQuery treetable 实现树形表格拖拽功能的完整解析，更多关于该插件的使用技巧可关注本站其他相关文章。
作者最新文章
JS脚本在App中运行报错怎么解决
2026-11-04 23:11:03
JS怎么使用padStart方法给数字补零
2026-11-04 11:12:03
JS是什么意思？JavaScript全称及基本定义
2026-11-04 08:05:29
JS 使用 toFixed(1) 保留一位小数的基本用法与注意事项
2026-11-03 18:34:57
JS字符串转整数：parseInt与Number的区别及用法
2026-11-03 17:26:54