我有一个表格,其中有一个表格。该表有几行。
<table id="sortable">
<tbody class="ui-sortable">
<tr>
<th> </th>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Sort</th>
</tr>
<tr class="ui-state-default" style="">
<td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
</td>
<td>
<input type="text" name="id1" value="12">
</td>
<td>
<input type="text" name="name1" value="Apple">
</td>
<td>
<input type="text" name="price1" value="1.95">
</td>
<td>
<input type="text" name="sort1" value="1">
</td>
</tr>
<tr class="ui-state-default">
<td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
</td>
<td>
<input type="text" name="id3" value="9">
</td>
<td>
<input type="text" name="name3" value="Banana">
</td>
<td>
<input type="text" name="price3" value=".95">
</td>
<td>
<input type="text" name="sort3" value="3">
</td>
</tr>
<tr class="ui-state-default" style="">
<td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
</td>
<td>
<input type="text" name="id2" value="15">
</td>
<td>
<input type="text" name="name2" value="Pear">
</td>
<td>
<input type="text" name="price2" value="2.95">
</td>
<td>
<input type="text" name="sort2" value="2">
</td>
</tr>
<tr>
<td colspan="5">
<input type="submit" value="submit">
</td>
</tr>
</tbody>
</table>
使用 jQueryUI 我可以使用以下脚本拖动行:
$(function () {
$("#sortable tbody").sortable();
$("#sortable tbody").disableSelection();
});
我目前可以拖动行,但现在我还想在此过程中更改 sort
输入。
因此,如果我要将第三行拖到顶部,它们应该更改位置和 sort
输入中的数字。
我还没有找到使用 jQueryUI 来完成这项工作的方法。在 jQueryUI 站点的示例中,他们使用 list
而不是 table
。
这可能吗? 如果不是,什么是更好的方法?
这是 fiddle
最佳答案
如果您只是想在拖放之后保持与之前相同的排序值,您可以使用 start和 stop sortable
的事件,类似这样:
$(function () {
var sortOrder = [];
var $sortableTable = $("#sortable tbody");
$sortableTable.sortable({
start: function(event, element){
$.map($('[name^=sort]', $sortableTable), function(element){
sortOrder.push(element.value);
});
},
stop: function(event, element) {
$.each($('tr [name^=sort]', $sortableTable), function(index, element){
element.value = sortOrder[index];
});
}
});
$sortableTable.disableSelection();
$('tr [name^=sort]', $sortableTable).on('keydown', function(){
$(this).closest('tr').data()
});
});
使用附加变量,您可以在 start
上存储当前排序值,并在 stop
上重新应用它们。
DEMO - 将排序重新设置为拖放之前的内容
如果您需要应用不同的业务逻辑,这很好,要么使用相同的事件并应用您自己的逻辑,要么使用任何其他 available events根据需要。
I need the sort order to corispond to what ever position it is in. So row 1 is 1, 2 is 2, and so on.
作为可编辑输入的排序当时令人困惑,但如果这就是你想要的,那么不要使用 start
事件,只使用 stop
并重新设置每次的值,类似于此:
stop: function(event, element) {
$.each($('tr [name^=sort]', $sortableTable), function(index, element){
element.value = index+1;
});
}
DEMO - 重新设置排序位置
关于javascript - 如何在拖动行时更新输入值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20522912/