我正在尝试对表的行进行排序，并将它们作为表行的“子”元素
我发现了这个: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”的子元素
我不知道是否可以使用表格。
有人可以帮助我吗？
最佳答案
好的，我找到了这个插件:http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html#example-1
这使用表格并允许嵌套。
现在我只需要对其进行排序并发布带有父 ID 的表元素，以便我可以将其保存到数据库中。
我希望这对其他人有帮助。
这就是我想出的办法。 我不想要超过 2 个级别(只有 parent 和 child )，所以我将其更改为让 parent 只接受 child ，而不是让 parent 可拖动。
<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() 函数，但我将其保留在此处以使其更加清晰。
关于jquery - 嵌套可排序表行 jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2433773/