我在 jqueryui 排序方面遇到问题。
现在我有一个对 tr 进行排序的表，并且一切正常，但现在我必须一次对 2 行进行排序。在下面的示例中，我必须将行与 G1 或 G2 或 G3 一起排序。
现在，在用头撞墙几个小时后，我来这里寻求帮助。
Queryui 排序有选项item，我尝试使用它，但无法使其在表中工作。
有办法做到这一点吗？有人可以帮助我吗？
我在这里试试https://jsfiddle.net/n29ekt42/
<table>
<thead>
<tr>
<th>T1</th>
<th>T1</th>
<th>T1</th>
</tr>
</thead>
<tbody>
<tr>
<td>G1</td>
<td>G1</td>
<td>G1</td>
</tr>
<tr>
<td>G1</td>
<td>G1</td>
<td>G1</td>
</tr>
<tr>
<td>G2</td>
<td>G2</td>
<td>G2</td>
</tr>
<tr>
<td>G2</td>
<td>G2</td>
<td>G2</td>
</tr>
<tr>
<td>G3</td>
<td>G3</td>
<td>G3</td>
</tr>
<tr>
<td>G3</td>
<td>G3</td>
<td>G3</td>
</tr>
</tbody>
</table>
function assignSortAttach() {
$("table tbody").sortable({
start: function( event, ui ) {
var aa = $this.attr('data-row');
}
})
}
// TR sortable
$(function () {
assignSortAttach()
});
最佳答案
我发现这比我想象的要困难，所以我尝试了一下。我 fork 了你的 fiddle 并做了一些更新。
工作示例:https://jsfiddle.net/Twisty/n29ekt42/13/
我添加了一个句柄列。
HTML
<table>
<thead>
<tr>
<th></th>
<th>T1</th>
<th>T1</th>
<th>T1</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="handle ui-icon ui-icon-grip-dotted-vertical"></span></td>
<td>G1</td>
<td>G1</td>
<td>G1</td>
</tr>
...
很多 CSS，如果你愿意的话。
CSS
table {
border-collapse: collapse;
}
table thead tr {
margin-left: 20px;
}
table tbody tr {
border: 1px solid #ccc;
}
tr.ui-selecting {
background: #FECA40;
}
tr.ui-selected {
background: #F39814;
color: white;
}
.hidden {
display: none;
}
jQuery
function assignSortAttach() {
$("table tbody").sortable({
axis: "y",
cursor: "grabbing",
handle: ".handle",
opacity: 0.6,
helper: function(e, item) {
console.log("Parent-Helper: ", item);
if (!item.hasClass("ui-selected")) {
item.addClass("ui-selected");
}
// Clone selected elements
var elements = $(".ui-selected").not('.ui-sortable-placeholder').clone();
console.log("Making helper: ", elements);
// Hide selected Elements
item.siblings(".ui-selected").addClass("hidden");
var helper = $("<table />");
helper.append(elements);
console.log("Helper: ", helper);
return helper;
},
start: function(e, ui) {
var elements = ui.item.siblings(".ui-selected.hidden").not('.ui-sortable-placeholder');
ui.item.data("items", elements);
},
update: function(e, ui) {
console.log("Receiving: ", ui.item.data("items"));
$.each(ui.item.data("items"), function(k, v) {
console.log("Appending ", v, " before ", ui.item);
ui.item.before(v);
});
},
stop: function(e, ui) {
ui.item.siblings(".ui-selected").removeClass("hidden");
$("tr.ui-selected").removeClass("ui-selected");
}
})
.selectable({
filter: "tr",
cancel: ".handle"
})
}
$(function() {
assignSortAttach();
});
这改编自此处的代码:jQuery Sortable - drag and drop multiple items在这里:jQuery UI sortable & selectable
同时使用“排序”和“选择”的功劳来自 mhu 。这非常有效，因为您可以通过拖动选择或 CTRL+单击来根据需要选择行。您可以拖动并选择一个组，或者单击将拖动分组的独特项目。然后使用拖动 handle ，用户可以对选定的行进行排序。
TJ使我们能够对多个项目进行排序。他的演示旨在在不同的列表之间移动元素，因此我将事件 receive 与 update 切换。
从轻率的评论到答案，我希望有所帮助。
评论后更新
<小时/>工作示例:https://jsfiddle.net/Twisty/Lbu7ytbj/
我更改 HTML 对行进行分组:
<table>
<thead>
<tr>
<th> </th>
<th>T1</th>
<th>T1</th>
<th>T1</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2"><span data-group="1" class="handle ui-icon ui-icon-grip-dotted-vertical"></span></td>
<td>G1</td>
<td>G1</td>
<td>G1</td>
</tr>
<tr>
<td>G1</td>
<td>G1</td>
<td>G1</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2"><span data-group="3" class="handle ui-icon ui-icon-grip-dotted-vertical"></span></td>
<td>G2</td>
<td>G2</td>
<td>G2</td>
</tr>
<tr>
<td>G2</td>
<td>G2</td>
<td>G2</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2"><span data-group="5" class="handle ui-icon ui-icon-grip-dotted-vertical"></span></td>
<td>G3</td>
<td>G3</td>
<td>G3</td>
</tr>
<tr>
<td>G3</td>
<td>G3</td>
<td>G3</td>
</tr>
</tbody>
</table>
现在我所要做的就是调整sortable以使用表格而不是使用thead。
function assignSortAttach() {
$("table").sortable({
axis: "y",
cursor: "grabbing",
handle: ".handle",
cancel: "thead",
opacity: 0.6,
placeholder: "two-place",
helper: function(e, item) {
if (!item.hasClass("selected")) {
item.addClass("selected");
}
console.log("Selected: ", $(".selected"));
var elements = $(".selected").not(".ui-sortable-placeholder").clone();
console.log("Making helper from: ", elements);
// Hide selected Elements
$(".selected").not(".ui-sortable-placeholder").addClass("hidden");
var helper = $("<table />");
helper.append(elements);
console.log("Helper: ", helper);
return helper;
},
start: function(e, ui) {
var elements = $(".selected.hidden").not('.ui-sortable-placeholder');
console.log("Start: ", elements);
ui.item.data("items", elements);
},
update: function(e, ui) {
console.log("Receiving: ", ui.item.data("items"));
ui.item.before(ui.item.data("items")[1], ui.item.data("items")[0]);
},
stop: function(e, ui) {
$('.selected.hidden').not('.ui-sortable-placeholder').removeClass('hidden');
$('.selected').removeClass('selected');
}
});
}
$(function() {
assignSortAttach();
$(".handle").attr("title", "Use me to drag and sort.");
});
我还为占位符添加了 CSS:
.two-place {
display: block;
visibility: visible;
height: 2.5em;
width: 0;
}
.two-place::after {
content: "";
border: 1px dashed #ccc;
float: left;
background-color: #eee;
height: 2.5em;
width: 100px;
}
关于Jquery UI 一次对多个表行进行排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38221956/