利用jQuery treetable實現(xiàn)樹形表格拖拽詳解
這里記錄一下使用jquery treetable時遇到的坑。
我這里的需求是做一個樹形表格,并且可拖拽。
最后要實現(xiàn)的效果大概是這樣的:
首先,我們?nèi)query treetable 官網(wǎng)下載文件
用別人的東西,首先看下官方給的文檔:
全英文,光看可能是看不太懂,而且,官方在線的文檔可能是不太友好,如下圖所示:
示例的樹形表格因為沒有引用Jqueryui 報錯。
有點(diǎn)尷尬,我們打開剛剛下載的文件,里邊有一個index.html文件,在瀏覽器中打開,上圖我紅框標(biāo)注的示例表格部分還是亂的。
其實文檔中已經(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",//默認(rèn)打開所有節(jié)點(diǎn) 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"); // 獲取目標(biāo)行的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)樹形表格拖拽詳解的詳細(xì)內(nèi)容,更多關(guān)于jQuery treetable樹形表格拖拽的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
hover的用法及l(fā)ive的用法介紹(鼠標(biāo)懸停效果)
hover屬性在書寫css時大家都不會陌生了吧live主要用于對動態(tài)加載出來的元素綁定事件,下來將為大家詳細(xì)介紹下兩者的使用,感興趣的朋友可不要錯過了哈2013-03-03Jquery遍歷checkbox獲取選中項value值的方法
這篇文章主要介紹了Jquery遍歷checkbox獲取選中項的value值,需要的朋友可以參考下2014-02-02jQuery實現(xiàn)切換隱藏與顯示同時切換圖標(biāo)功能
這篇文章主要介紹了jQuery實現(xiàn)切換隱藏與顯示同時切換圖標(biāo)功能,需要的朋友可以參考下2017-10-10jquery自動將form表單封裝成json的具體實現(xiàn)
這篇文章主要介紹了jquery自動將form表單封裝成json的具體實現(xiàn),需要的朋友可以參考下2014-03-03jQuery DOM節(jié)點(diǎn)的遍歷方法小結(jié)
本篇文章主要介紹了jQuery DOM節(jié)點(diǎn)的遍歷方法小結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08詳解Bootstrap的iCheck插件checkbox和radio
這篇文章主要詳細(xì)介紹了Bootstrap的iCheck插件checkbox和radio的知識及bootstrap icheck獲取radio的value值的方法,非常不錯,具有參考借鑒價值,感興趣的朋友一起看下吧2016-08-08