JQuery UI Сортировка, затем порядок записи в базу данных

Ответ 1

Функция jQuery UI 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.

Ответ 2

Вам повезло, я использую точную вещь в своей 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 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>';
}     
?>

Ответ 3

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

<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>

Ответ 4

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

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});
    }
});

Ответ 5

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

Ответ 6

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

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