2

我正在尝试对表格的行进行排序，并将它们作为表格行的“子”元素

我发现了这个：http ://code.google.com/p/nestedsortables/这适用于 ul li 列表，但我想为表格构建它。

<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'的子元素

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

谁能帮我？

4

1 回答 1

3

好的，所以我找到了这个插件： 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-15T11:10:21.893 回答