Question

我使用jQuery UI Sortable让用户对查询的数据进行排序，并将已排序的数据保存到另一个表中。我将更改后的订单放入隐藏字段并保存数据。

HTML

<?php
// $queried_data is queried in LIFO order from a table, suppose an order like: 1,2,3,4
$saved_data = '2,3,4,1'; //queried as a string from another table
?>
<div class="data-sorter">
    <ul id="sortable-data">
    <?php foreach($queried_data as $key => $value) : ?>
        <li id="<?php echo $value->ID; ?>">
            <?php echo $value->title; ?>
        </li>
    <?php endforeach; ?>
    </ul>
    <!-- HIDDEN FIELD: putting saved data here, and updating according to the changed data, and finally saving as a comma-separated string -->
    <input type="hidden" class="data-sorted" value="<?php echo $saved_data; ?>">
</div>

JavaScript的

jQuery( document ).ready(function($) {
    "use strict";

    var sortable_data = $( "#sortable-data" );

    sortable_data.sortable({
        update: function( event, ui ) {
            var list_id     = this.id,
                item_moved  = ui.item.attr('id'),
                order       = $(this).sortable('toArray'),
                positions   = order.join(',');

            var hidden_field = $('#'+ list_id).parent().find('.data-sorted');

            hidden_field.val(positions).trigger('change');
        }
    });

    sortable_data.disableSelection();

});

但是你可以看到$queried_data≠$saved_data。因此，在刷新之后，PHP循环将事物按原始顺序排列。我没关系。我只需要使用可排序的jQuery UI操作DOM，以便它们按照顺序显示，来自$saved_data。

我需要一种方法来触发jQuery UI可排序（我在Javascripts中的第6行），并根据$saved_data设置值（可用作隐藏字段的值{{1} }）。

我知道我需要Sortatble create event，但我无法弄清楚，如何。

Answer 1

检查这个逻辑，应该有效。认为li reorder()与逗号分隔值相同。

在sortable致电后的页面加载呼叫功能$("#sortable-data").sortable({update: reorder}); function reorder() { orderArray = $('.data-sorted').val(); elementContainer = $("#sortable-data") $.each(orderArray, function(key, val){ elementContainer.append($("li#"+val)); }); }。

.tableLike {display:table;}
.rowLike{display:table-row;}
.cell{border:1px solid red;display:table-cell;}
.tableLike{padding-bottom: 30px;}
.rowLike .cell:nth-child(1),.rowLike .cell:nth-child(3){ width: 33%;}

jQuery UI Sortable - 如何根据获取的数据设置数据

HTML

JavaScript的

1 个答案: