Nichés lignes de la table triables jQuery

StackOverflow https://stackoverflow.com/questions/2433773

Question

Je suis en train de trier les lignes d'une table, et les mettre comme des éléments « enfant » d'une ligne de table

J'ai trouvé ceci: http://code.google.com/p/nestedsortables/ cela fonctionne avec des listes ul li, mais je veux construire 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 sais pas s'il est possible avec une table.

Quelqu'un peut-il me aider?

Était-ce utile?

La solution

Bon je donc trouvé ce plugin: http: //ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html#example-1

utilise des tables et permet d'imbriquer.

Maintenant, je dois juste faire le tri et post soumettre les éléments de table avec un ID parent donc je peux enregistrer dans la base de données.

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

ce que je suis venu avec. Je ne veux pas plus de 2 niveaux (uniquement parents et enfants) donc je l'ai changé pour laisser les parents acceptent que Childs, et non les parents en draggable. 

<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 toute la table triables vous pouvez utiliser la fonction de .sortable() jQuery, mais je suis parti que d'ici pour le rendre plus clair.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top