Я использую 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>

JAVASCRIPTS

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 приводит все в исходный порядок. Я согласен с этим. Мне просто нужно манипулировать DOM с помощью сортируемого пользовательского интерфейса jQuery, чтобы они отображались в соответствии с порядком, полученным из $saved_data.

Мне нужен способ вызвать сортировку пользовательского интерфейса jQuery (я сделал это в строке № 6 в Javascripts), а также установить значение в соответствии с $saved_data (которое доступно как значение скрытого поля .data-sorted).

Я понимаю, что мне нужно событие Sortatble create, но я могу Непонятно, как.

1
Mayeenul Islam 1 Мар 2018 в 11:04

1 ответ

Лучший ответ

Проверьте эту логику, должно работать. Считается, что li id - это то же самое, что и значения, разделенные запятыми.

При загрузке страницы вызывает функцию 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));
    });
}
1
Anup Yadav 1 Мар 2018 в 12:11