利用jQuery treetable實現樹形表格拖拽詳解
更新時間：2022年06月13日 14:49:40 作者：camellia
這篇文章主要為大家介紹了如何利用jQuery treetable實現樹形表格拖拽功能，文中的示例代碼講解詳細，感興趣的小伙伴可以動手嘗試一下
這里記錄一下使用jquery treetable時遇到的坑。
我這里的需求是做一個樹形表格，并且可拖拽。
最后要實現的效果大概是這樣的：
首先，我們去jquery treetable 官網下載文件
用別人的東西，首先看下官方給的文檔：
全英文，光看可能是看不太懂，而且，官方在線的文檔可能是不太友好，如下圖所示：
示例的樹形表格因為沒有引用Jqueryui 報錯。
有點尷尬，我們打開剛剛下載的文件，里邊有一個index.html文件，在瀏覽器中打開，上圖我紅框標注的示例表格部分還是亂的。
其實文檔中已經說明，jquery treetable樹形表格的拖拽是基于jqueryui實現的，因此我們需要在示例文件中（index.tml）引用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"));
}
}
});
});上述代碼中有兩個class類名，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",//默認打開所有節(jié)點
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;
// 刪除行
// 這里要著重說明一下，動態(tài)添加的html是沒有綁定js事件的，因此我這里使用jquery封裝的事件委托來為html動態(tài)綁定事件
// 具體請參考網址：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實現樹形表格拖拽詳解的詳細內容，更多關于jQuery treetable樹形表格拖拽的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了jQuery 動畫與停止動畫效果,結合實例形式詳細分析了jQuery 動畫與停止動畫效果相關函數功能、用法及使用注意事項,需要的朋友可以參考下2020-05-05
使用EVAL處理jqchart jquery 折線圖返回數據無效的解決辦法
eval函數可以把一些處理過程序代碼進行解析從而達到可以執(zhí)行的一個狀態(tài)，本篇文章給大家介紹使用eval處理jqchart jquery折線圖返回數據無效的解決辦法，對jqchart jquery相關內容感興趣的朋友一起學習吧2015-11-11
這篇文章主要介紹了jQuery條件分頁代替離線查詢，通過代碼實例讓讀者更深入了解該功能的操作，具體操作步驟大家可查看下文的詳細講解，感興趣的小伙伴們可以參考一下。2017-08-08
這個東西也是隨手總結出來的，引用了一些js框架jquery的方法。2010-02-02
這篇文章主要為大家詳細介紹了jQuery展示表格點擊變色、全選、刪除的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
我們經常要使用腳本處理各種業(yè)務邏輯, 最常見的就是數組和對象的操作. jQuery工具函數為我們操作對象和數組提供了便利條件.2011-02-02
jQuery 是一個非常優(yōu)秀的 JavaScript 框架，在現在的 Web 開發(fā)項目中扮演著重要角色。jQuery 使用簡單靈活，同時還有許多成熟的插件可供選擇，它可以幫助你在項目中加入一些非常好的效果，讓網站有更好的可用性和用戶體驗2011-10-10
這篇文章主要介紹了jquery拖拽排序簡單實現方法,涉及jQuery響應鼠標事件動態(tài)操作頁面元素的相關技巧,需要的朋友可以參考下2016-02-02
Json是一種輕量級的數據交換格式，本節(jié)為大家介紹的是Jquery解析Json格式數據的過程，很詳細，看看就知道了2014-10-10
下面小編就為大家?guī)硪黄猨query之基本選擇器practice(實例講解)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09