Изменение порядка полей базы данных с помощью JQuery UI Sortable

У меня есть таблица базы данных, содержащая список элементов. Соответствующие поля: «имя элемента» и «list_order».

Я хочу иметь возможность изменить порядок столбца «list_order» в моей таблице, вызывая вызов ajax каждый раз, когда элемент сортируется.

Например, если у меня есть следующие данные

Milk     1
Cookies  2
Cereal   3

Я хотел бы использовать пользовательский интерфейс JQuery, чтобы перетащить Cereal в верхнюю часть списка и отразить это в базе данных как

Milk     2
Cookies  3
Cereal   1

Может ли кто-нибудь указать мне на примеры или ссылки или объяснить, как это сделать? ТИА.


jquery jquery-ui jquery-ui-sortable
person Bad Programmer    schedule 12.01.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы должны иметь возможность сделать ajax-вызов php-скрипта с массивом list_position=>item_id, а затем в цикле PHP через указанный массив с

update table set list_position='$key' where id='$val';

и тогда, конечно, вы бы сортировали по list_position при выборе данных для будущих запросов.

Изменить: только что нашел этот пример в Интернете @ http://wil-linssen.com/entry/extending-the-jquery-sortable-with-ajax-mysql/

JS:

<script type="text/javascript"> 
// When the document is ready set up our sortable with it's inherant function(s) 
$(document).ready(function() { 
  $("#test-list").sortable({ 
    handle : '.handle', 
    update : function () { 
      var order = $('#test-list').sortable('serialize'); 
      $("#info").load("process-sortable.php?"+order); 
    } 
  }); 
}); 
</script>

HTML:

<pre> 
    <div id="info">Waiting for update</div> 
</pre> 
<ul id="test-list"> 
  <li id="listItem_1"> 
    <img src="arrow.png" alt="move" width="16" height="16" class="handle" /> 
    <strong>Item 1 </strong>with a link to <a href="http://www.google.co.uk/" rel="nofollow">Google</a> 
  </li> 
  <li id="listItem_2"> 
    <img src="arrow.png" alt="move" width="16" height="16" class="handle" /> 
    <strong>Item 2</strong> 
  </li> 
  <li id="listItem_3"> 
    <img src="arrow.png" alt="move" width="16" height="16" class="handle" /> 
    <strong>Item 3</strong> 
  </li> 
  <li id="listItem_4"> 
    <img src="arrow.png" alt="move" width="16" height="16" class="handle" /> 
    <strong>Item 4</strong> 
  </li> 
</ul> 
<form action="process-sortable.php" method="post" name="sortables"> 
  <input type="hidden" name="test-log" id="test-log" /> 
</form>

PHP:

<?php 
/* This is where you would inject your sql into the database 
but we're just going to format it and send it back 
*/ 
foreach ($_GET['listItem'] as $position => $item) : 
  $sql[] = "UPDATE `table` SET `position` = $position WHERE `id` = $item"; 
endforeach; 
print_r ($sql); 
?>
person David Houde    schedule 12.01.2012
comment
Вы можете выполнить обновление в одном ОБНОВЛЕНИИ с чем-то вроде update ... set position = case id when ... end where id in (...), в основном используя CASE как SQL-версию ассоциативного массива. - person mu is too short; 13.01.2012
comment
У меня возникла проблема, когда количество обновляемых случаев исчисляется сотнями, а результирующий запрос выполняется медленно с использованием метода CASE WHEN THEN. - person Nick Pickering; 28.08.2013
comment
Можно ли отправить SQL UPDATE только для затронутых строк? Итак, если listItem_2 и listItem_3 поменять местами, следует обновить только эти два и оставить 1 и 4 в покое? (для минимизации ресурсов сервера, например, при одновременном обновлении сотен строк, когда требуется обновление только 5) - person Jon; 24.02.2017