jQuery UI Sortable, затем запишите порядок в базу данных

Я хочу использовать sortableфункцию пользовательского интерфейса jQuery, чтобы пользователи могли устанавливать порядок, а затем при изменении записывать его в базу данных и обновлять. Может кто-нибудь написать пример, как это будет сделано?

Функция пользовательского интерфейса jQuery sortableвключает в себя serializeметод для этого. Это действительно очень просто. Вот быстрый пример, который отправляет данные по указанному URL-адресу, как только элемент меняет позицию.

$('#element').sortable({
    axis: 'y',
    update: function (event, ui) {
        var data = $(this).sortable('serialize');

        // POST to server using $.post or $.ajax
        $.ajax({
            data: data,
            type: 'POST',
            url: '/your/url/here'
        });
    }
});

При этом создается массив элементов с использованием этих элементов id. Итак, я обычно делаю что-то вроде этого:

<ul id="sortable">
   <li id="item-1"></li>
   <li id="item-2"></li>
   ...
</ul>

Когда вы используете этот serializeпараметр, он создает строку запроса POST, подобную этой: item[]=1&item[]=2и т. Д. Поэтому, если вы используете, например, идентификаторы вашей базы данных в idатрибуте, вы можете просто перебирать массив POSTed и соответственно обновлять позиции элементов ,

Например, в PHP:

$i = 0;

foreach ($_POST['item'] as $value) {
    // Execute statement:
    // UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value
    $i++;
}

Пример на jsFiddle.

Думал, это тоже может помочь. А) он был разработан для минимизации полезной нагрузки при отправке обратно на сервер после каждой сортировки. (вместо того, чтобы отправлять все элементы каждый раз или повторять многие элементы, которые сервер может выбросить) B) Мне нужно было отправить обратно пользовательский идентификатор без ущерба для идентификатора / имени элемента. Этот код получит список с сервера asp.net, а затем после сортировки обратно будут отправлены только 2 значения: идентификатор базы данных отсортированного элемента и идентификатор базы данных элемента, рядом с которым он был удален. Основываясь на этих двух значениях, сервер может легко определить новую позицию.

<div id="planlist" style="width:1000px">
    <ul style="width:1000px">
       <li plid="listId1"><a href="#pl-1">List 1</a></li>
       <li plid="listId2"><a href="#pl-2">List 1</a></li>
       <li plid="listId3"><a href="#pl-3">List 1</a></li>
       <li plid="listId4"><a href="#pl-4">List 1</a></li>
    </ul>
    <div id="pl-1"></div>
    <div id="pl-2"></div>
    <div id="pl-3"></div>
    <div id="pl-4"></div>
</div>
<script type="text/javascript" language="javascript">
    $(function () {
        var tabs = $("#planlist").tabs();
        tabs.find(".ui-tabs-nav").sortable({
            axis: "x",
            stop: function () {
                tabs.tabs("refresh");
            },
            update: function (event, ui) {
                //db id of the item sorted
                alert(ui.item.attr('plid'));
                //db id of the item next to which the dragged item was dropped
                alert(ui.item.prev().attr('plid'));

                //make ajax call
            }
        });
    });
</script>

Вам повезло, я использую именно эту вещь в своей CMS

Если вы хотите сохранить заказ, просто вызовите метод JavaScript saveOrder(). Он сделает запрос AJAX POSTк saveorder.php, но, конечно, вы всегда можете опубликовать его как обычную форму.

<script type="text/javascript">
function saveOrder() {
    var articleorder="";
    $("#sortable li").each(function(i) {
        if (articleorder=='')
            articleorder = $(this).attr('data-article-id');
        else
            articleorder += "," + $(this).attr('data-article-id');
    });
            //articleorder now contains a comma separated list of the ID's of the articles in the correct order.
    $.post('/saveorder.php', { order: articleorder })
        .success(function(data) {
            alert('saved');
        })
        .error(function(data) { 
            alert('Error: ' + data); 
        }); 
}
</script>
<ul id="sortable">
<?php
//my way to get all the articles, but you should of course use your own method.
$articles = Page::Articles();
foreach($articles as $article) {
    ?>
    <li data-article-id='<?=$article->Id()?>'><?=$article->Title()?></li>
    <?
}               
?>   
</ul>
   <input type='button' value='Save order' onclick='saveOrder();'/>

В saveorder.php; Имейте в виду, что я удалил все проверки и проверки.

<?php
$orderlist = explode(',', $_POST['order']);
foreach ($orderlist as $k=>$order) {
  echo 'Id for position ' . $k . ' = ' . $order . '<br>';
}     
?>

Это мой пример.

https://github.com/luisnicg/jQuery-Sortable-and-PHP

Вам нужно поймать порядок в событии обновления

    $( "#sortable" ).sortable({
    placeholder: "ui-state-highlight",
    update: function( event, ui ) {
        var sorted = $( "#sortable" ).sortable( "serialize", { key: "sort" } );
        $.post( "form/order.php",{ 'choices[]': sorted});
    }
});

Я могу изменить строки, следуя принятому ответу и соответствующему примеру на jsFiddle. Но по неизвестным причинам я не мог получить идентификаторы после действий «остановить или изменить». Но пример, опубликованный на странице JQuery UI, мне подходит. Вы можете проверить эту ссылку здесь.

Попробуйте это решение: http://phppot.com/php/sorting-mysql-row-order-using-jquery/, где новый порядок сохраняется в каком-то элементе HMTL. Затем вы отправляете форму с этими данными в некоторый PHP-скрипт и повторяете его с помощью цикла for.

Примечание. Мне пришлось добавить еще одно поле db типа INT (11), которое обновляется (с отметкой времени) на каждой итерации - оно служит для того, чтобы сценарий знал, какая строка обновлена ​​недавно, иначе вы получите зашифрованные результаты.