嵌套可排序表行jQuery
我试图对表中的行进行排序,并将它们作为表行的“子”元素 我发现:这适用于ul li列表,但我想为表构建它嵌套可排序表行jQuery,jquery,nested,html-table,rows,jquery-ui-sortable,Jquery,Nested,Html Table,Rows,Jquery Ui Sortable,我试图对表中的行进行排序,并将它们作为表行的“子”元素 我发现:这适用于ul li列表,但我想为表构建它 <table> <thead> <th>tablehead</th> </thead> <tbody> <tr><td>somevalue</td></tr> <tr><td>somevalue2</td&g
<table>
<thead>
<th>tablehead</th>
</thead>
<tbody>
<tr><td>somevalue</td></tr>
<tr><td>somevalue2</td></tr>
</tbody>
</table>
桌面
一些价值
一些价值2
因此,您可以使用jquery.sortable()
对行进行排序,但如果将“somevalue”拖到“somevalue2”上,我希望“somevalue”成为“somevalue2”的子元素
我不知道有没有桌子
有人能帮我吗?好的,我找到了这个插件: 这将使用表并允许对其进行嵌套 现在,我只需要对其进行排序,然后使用父id提交表元素,这样我就可以将其保存到数据库中 我希望这对其他人有帮助 这就是我想到的。 我不想超过两个级别(只有父级和子级),所以我将其更改为让父级只接受子级,而不是让父级可拖动
<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>
$(文档).ready(函数(){
$(“#dragndrop”).treeTable();
//拖放代码
$(“#dragndrop.child”).draggable({
助手:“克隆”,
不透明度:.75,
refreshPositions:true,//性能?
回复:“无效”,
持续时间:300,
卷轴:对
}
);
$(“#dragndrop.parent”)。每个(函数(){
$($(this.parents(“tr”)[0])。可拖放({
接受:“.child”,
drop:函数(e、ui){
$($(ui.draggable).parents(“tr”)[0]).appendBranchTo(this);
setNewParent($($(ui.draggable).parents(“tr”)[0]).attr(“id”),$(this.attr(“id”);
},
类:“接受”,
结束:功能(e、ui){
如果(this.id!=$(ui.draggable.parents(“tr”)[0]).id&!$(this.)是(“.expanded”)){
$(this.expand();
}
}
});
});
函数setNewParent(子函数、父函数)
{
//你在这里打电话吗
警惕(儿童);
警惕(家长);
}
});
标题
大小
友善的
变更日志
4KB
父母亲
图像
--
小孩
医生
--
父母亲
bg-table-thead.png
52KB
小孩
folder.png
4KB
小孩
要使整个表可排序,您可以使用jQuery的.sortable()
函数,但为了更清楚起见,我将其省略了