Question

我有一个包含项目列表的数据库表。相关字段是“项目名称”和“list_order”。

我希望能够通过每次对项目进行排序时触发ajax调用来重新排序表格中的“list_order”列。

例如，如果我有以下数据

Milk     1
Cookies  2
Cereal   3

我想使用JQuery UI将Cereal拖到列表顶部并将其反映在数据库中

Milk     2
Cookies  3
Cereal   1

有人能指出我的示例或链接，或提供有关如何执行此操作的说明吗？ TIA。

Answer 1

您应该能够使用list_position =＆gt; item_id数组对php脚本进行ajax调用，然后在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); 
?>

使用JQuery UI可排序重新排序数据库字段

1 个答案: