중첩 정렬 가능한 테이블 행 jQuery
-
19-09-2019 - |
문제
나는 테이블 행의 행을 정렬하려고 노력하고 있으며, 그것들을 테이블 행의 '어린이'요소로 넣습니다.
나는 이것을 찾았다: 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'의 어린이 요소가되기를 원합니다.
테이블로 가능한지 모르겠습니다.
누구든지 나를 도울 수 있습니까?
해결책
좋아,이 플러그인을 찾았습니다. 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 's를 사용할 수 있습니다. .sortable()
기능이지만, 나는 그것을 더 명확하게하기 위해 여기에서 그것을 남겨 두었습니다.
제휴하지 않습니다 StackOverflow