利用jQuery treetable實現(xiàn)樹形表格拖拽詳解
更新時間：2022年06月13日 14:49:40 作者：camellia
這篇文章主要為大家介紹了如何利用jQuery treetable實現(xiàn)樹形表格拖拽功能，文中的示例代碼講解詳細，感興趣的小伙伴可以動手嘗試一下
這里記錄一下使用jquery treetable時遇到的坑。
我這里的需求是做一個樹形表格，并且可拖拽。
最后要實現(xiàn)的效果大概是這樣的：
首先，我們?nèi)query treetable 官網(wǎng)下載文件
用別人的東西，首先看下官方給的文檔：
全英文，光看可能是看不太懂，而且，官方在線的文檔可能是不太友好，如下圖所示：
示例的樹形表格因為沒有引用Jqueryui 報錯。
有點尷尬，我們打開剛剛下載的文件，里邊有一個index.html文件，在瀏覽器中打開，上圖我紅框標注的示例表格部分還是亂的。
其實文檔中已經(jīng)說明，jquery treetable樹形表格的拖拽是基于jqueryui實現(xiàn)的，因此我們需要在示例文件中（index.tml）引用jqueryui。
引用成功之后，如下圖所示：
然后其余的文檔中描述的很清楚。一步一步來，或者參照我下邊的實例就可以實現(xiàn)樹形。
但是在做拖拽的時候需要注意一下：
首先，我們來看一下拖拽部分的代碼：
$("#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 要實現(xiàn)拖拽，必須將這兩個類名的其中之一放入每一行（tr）下的單元格（td）中，具體是放到任意一個還是每一個單元格中，看你自己的需求。
如果放file，那么行下邊不允許有子集，folder，那么行下邊是允許有子集的，這里需要注意一下，具體放什么，看你自己的需求。
下邊放一下我測試的代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jquery treetable 實現(xiàn)樹形表格拖拽</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)綁定事件
// 具體請參考網(wǎng)址：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實現(xiàn)樹形表格拖拽詳解的詳細內(nèi)容，更多關(guān)于jQuery treetable樹形表格拖拽的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
hover的用法及l(fā)ive的用法介紹(鼠標懸停效果)
hover屬性在書寫css時大家都不會陌生了吧live主要用于對動態(tài)加載出來的元素綁定事件，下來將為大家詳細介紹下兩者的使用，感興趣的朋友可不要錯過了哈2013-03-03
Jquery遍歷checkbox獲取選中項value值的方法
這篇文章主要介紹了Jquery遍歷checkbox獲取選中項的value值,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了jQuery實現(xiàn)切換隱藏與顯示同時切換圖標功能,需要的朋友可以參考下2017-10-10
jquery自動將form表單封裝成json的具體實現(xiàn)
這篇文章主要介紹了jquery自動將form表單封裝成json的具體實現(xiàn),需要的朋友可以參考下2014-03-03
一個JQuery操作Table的代碼分享，需要的朋友可以參考下2012-03-03
本篇文章主要介紹了jQuery DOM節(jié)點的遍歷方法小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
詳解Bootstrap的iCheck插件checkbox和radio
這篇文章主要詳細介紹了Bootstrap的iCheck插件checkbox和radio的知識及bootstrap icheck獲取radio的value值的方法，非常不錯，具有參考借鑒價值，感興趣的朋友一起看下吧2016-08-08
這篇文章主要介紹了jQuery EasyUI 頁面加載等待及頁面等待層,代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了jQuery實現(xiàn)合并表格單元格中相同行操作,結(jié)合實例形式分析了jQuery針對table表格實現(xiàn)單元格合并的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了jQuery遍歷json的方法的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06