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网站上的示例中，他们使用list而不是table s。

这可能吗？如果不是更好的方式呢？

以下是fiddle

Answer 1

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

$(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上重新应用它们。

stop - 将排序重新设置为拖放前的内容

如果您需要应用不同的业务逻辑，请使用相同的事件并应用您自己的逻辑或根据需要使用任何其他DEMO。

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

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

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

available events - 重新设置排序位置

Answer 2

我正在研究这个问题只是为了回来看它已被回答。这个答案有点不同，因为它在排序时调整值。

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/

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

2 个答案: