jQuery UI Сортируйте, а потім запишіть замовлення в базу даних

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

Функція інтерфейсу 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.

Думав, що це також може допомогти. A) він був розроблений для того, щоб знизити корисну навантаження до мінімуму під час надсилання назад на сервер після кожного сортування. (замість того, щоб щоразу надсилати всі елементи або повторювати багато елементів, які сервер міг би відключити). Цей код отримає список із сервера asp.net, після чого після сортування буде відправлено лише 2 значення: db id відсортованого елемента та db id елемента, поруч з яким він був скинутий. На основі цих 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(). Він зробить POSTзапит AJAX на 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, працює для мене чудово. Ви можете перевірити це посилання тут.

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

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