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

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.

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

Думал, что это тоже поможет. 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> 

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

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 и повторяете ее с помощью цикла for.

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