利用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)下載文件

官網(wǎng)網(wǎng)址

用別人的東西，首先看下官方給的文檔：

全英文，光看可能是看不太懂，而且，官方在線的文檔可能是不太友好，如下圖所示：

示例的樹形表格因為沒有引用Jqueryui 報錯。

有點尷尬，我們打開剛剛下載的文件，里邊有一個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",//默認打開所有節(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");
                               // 獲取目標(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)樹形表格拖拽詳解的詳細內(nèi)容，更多關(guān)于jQuery treetable樹形表格拖拽的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: