如何在拖动行时更新输入值？

Question

我有一个表格，里面有一个表格。该表有几行。

<table id="sortable">
    <tbody class="ui-sortable">
        <tr>
            <th>&nbsp;</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 网站上的示例中，他们使用 lists 而不是 tables。

这可能吗？ 如果没有，有什么更好的方法？

这里是fiddle

Answer 1

我正在研究这个只是为了回来看看它已经得到了回答。然而，这个答案有点不同，因为它会在排序时调整值。

var sort;
$(function () {
    $("#sortable tbody").sortable({
        change: function( event, ui ) {
            //alert(ui.helper.find('td input[name^=sort]').val(7));
            sort = 0;
            $('#sortable tr.ui-state-default:not(".ui-sortable-helper")').each(function(){
                sort++;
                if($(this).hasClass('ui-sortable-placeholder'))
                    ui.helper.find('td input[name^=sort]').attr('name','sort'+sort).attr('value',sort).val(sort);
                else
                    $(this).find('td input[name^=sort]').attr('name','sort'+sort).attr('value',sort).val(sort);
            });
        }
    });
    $("#sortable tbody").disableSelection();
});

http://jsfiddle.net/trevordowdle/rUg5M/1/

Answer 2

如果您只想在拖放之后保持与之前相同的排序值，您可以使用sortable 的start 和stop 事件，类似于：

$(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。

我需要排序顺序来对应它所处的位置。所以 第 1 行是 1，第 2 行是 2，依此类推。

作为可编辑输入的排序当时令人困惑，但如果这就是你想要的，那么不要使用 start 事件，而只使用 stop 并每次重新设置值，类似于：

stop: function(event, element) {
    $.each($('tr [name^=sort]', $sortableTable), function(index, element){
        element.value = index+1;
    });
}

---

DEMO - 重新设置排序位置

---