emboîtées lignes de la table triables jQuery

Je suis en train de trier les lignes d'une table, et les mettre comme des éléments « enfant » d'une ligne de tableemboîtées lignes de la table triables jQuery

J'ai trouvé: http://code.google.com/p/nestedsortables/ cela fonctionne avec des listes ul li, mais je veux construis-le pour une table.

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

Vous pouvez utiliser jquery.sortable() et trier les lignes, mais je veux « somevalue » à devenir un élément enfant de « somevalue2 » si vous faites glisser « somevalue » sur « somevalue2 »

Je ne Je ne sais pas si c'est possible avec une table.

Quelqu'un peut-il m'aider?

Source

2010-03-12 FLY

Ok donc j'ai trouvé ce plugin: http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html#example-1

Il utilise des tables et permet d'être imbriquée.

Maintenant, j'ai juste besoin de trier et de poster les éléments de la table avec un identifiant parent afin que je puisse l'enregistrer dans la base de données.

J'espère que cela aide quelqu'un d'autre.

donc c'est ce que j'ai trouvé. Je ne veux pas plus de 2 niveaux (seulement parents et enfants) donc je l'ai changé pour permettre aux parents d'accepter seulement les enfants, et non pas les parents traînables.

<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>

Pour faire toute la table triables vous pouvez utiliser la fonction .sortable() jQuery, mais je reste que d'ici pour le rendre plus clair.

Source

2010-03-15 11:10:21 FLY

emboîtées lignes de la table triables jQuery

Répondre

Questions connexes