利用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，那么行下边是允许有子集的，这里需要注意一下，具体放什么，看你自己的需求。

下边放一下我测试的代码

         
         
         
       
       


         

           

             

               
人物
               
民族
               
出场时间
               
格言
               
操作
             
           
           

             

               
1
               
1
               
1
               
1
               
删除
             
             

               
2
               
2
               
2
               
2
               
删除
             
             

               
3
               
3
               
3
               
3
               
删除
             
             

               
4
               
4
               
4
               
4
               
删除
             
             

               
5
               
5
               
5
               
5
               
删除
             
           
         
 

以上就是利用jQuery treetable实现树形表格拖拽详解的详细内容，更多关于jQuery treetable树形表格拖拽的资料请关注脚本之家其它相关文章！