嵌套排序表行jQuery的

我发现这个的“孩子”元素进行排序，并把它们作为：http://code.google.com/p/nestedsortables/这个作品与UL李名单，但我想建立一个表。

<table> 
    <thead> 
    <th>tablehead</th> 
    </thead> 
    <tbody> 
    <tr><td>somevalue</td></tr> 
    <tr><td>somevalue2</td></tr> 
    </tbody> 
</table>

所以，你可以使用jquery.sortable()和对行进行排序，但我想“someValue中”要成为“somevalue2”的子元素，如果你拖动“someValue中”过度“somevalue2”

我不不知道是否可以用一张桌子。

任何人都可以帮助我吗？

来源

2010-03-12 FLY

好了，所以我发现这个插件：http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html#example-1

这使用表，并允许它被嵌套。

现在我只需要对它进行排序并提交表格元素与父ID，所以我可以将其保存到数据库。

我希望这可以帮助别人。

所以这就是我想出的。我不想要更多的2级（只有父母和孩子），所以我改变它让父母只接受孩子，而不是让父母拖动。

<html> 
    <head> 
     <link href="jquery.treeTable.css" rel="stylesheet" type="text/css" /> 
     <script type="text/javascript" src="jquery.js"></script> 
     <script type="text/javascript" src="jquery-ui.js"></script> 
     <script type="text/javascript" src="jquery.treeTable.js"></script> 
     <script type="text/javascript"> 

    $(document).ready(function() { 
     $("#dragndrop").treeTable(); 

     // Drag & Drop Code 
     $("#dragndrop .child").draggable({ 
      helper: "clone", 
      opacity: .75, 
      refreshPositions: true, // Performance? 
      revert: "invalid", 
      revertDuration: 300, 
      scroll: true 
     } 
     ); 

     $("#dragndrop .parent").each(function() { 
      $($(this).parents("tr")[0]).droppable({ 
      accept: ".child", 
      drop: function(e, ui) { 
       $($(ui.draggable).parents("tr")[0]).appendBranchTo(this); 
       setNewParent($($(ui.draggable).parents("tr")[0]).attr("id"), $(this).attr("id")); 
      }, 
      hoverClass: "accept", 
      over: function(e, ui) { 
       if(this.id != $(ui.draggable.parents("tr")[0]).id && !$(this).is(".expanded")) { 
       $(this).expand(); 
       } 
      } 
      }); 
     }); 

     function setNewParent(child, parent) 
     { 
      // do ajax call here 
      alert(child); 
      alert(parent); 
     } 
    }); 

    </script> 
</head> 
<body> 

    <table id="dragndrop"> 
     <thead> 
     <tr> 
      <th>Title</th> 
      <th>Size</th> 
      <th>Kind</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr id="node-1"> 
      <td><span class="parent">CHANGELOG</span></td> 
      <td>4 KB</td> 
      <td>Parent</td> 
     </tr> 

     <tr id="node-3" class="child-of-node-1"> 
      <td><span class="child">images</span></td> 
      <td>--</td> 
      <td>child</td> 
     </tr> 

     <tr id="node-2"> 
      <td><span class="parent">doc</span></td> 
      <td>--</td> 
      <td>Parent</td> 
     </tr> 

     <tr id="node-4" class="child-of-node-2"> 
      <td><span class="child">bg-table-thead.png</span></td> 
      <td>52 KB</td> 
      <td>child</td> 
     </tr> 

     <tr id="node-5" class="child-of-node-2"> 
      <td><span class="child">folder.png</span></td> 
      <td>4 KB</td> 
      <td>child</td> 
     </tr> 

     </tbody> 
    </table> 
</body>

，使整个表可排序，你可以使用jQuery的.sortable()功能，但我离开了那个离开这里，使之更加清晰。

来源

2010-03-15 11:10:21 FLY

嵌套排序表行jQuery的

回答

相关问题