php mysql中的菜单项动态排序

我已经用Php和MySql编写了动态菜单。这是我的MySql表结构=>

CREATE TABLE MENU(
id INT(3) NOT NULL AUTO_INCREMENT PRIMARY KEY,
sort_id BIGINT NOT NULL,
title VARCHAR(50) NOT NULL,
etc ...);

这里是html表单=>

<input type="text" name="title">
<select name="pos">
<?php
if ($r = $connection->query("SELECT id,sort_id,title from menu order by sort_id ASC")){
   $row = $r->fetch_assoc();
/* here with help of php I'm retrieving data from marked table. I need this because want to sort categories with help of this select element , forward or backwards */
echo  "<option value='" . $row['id'] . "'>" . $row['title'] . " After</option>";
}
?>
</select>
<input type="submit" name="ok">

您可以使用jqueryui进行排序。一种解决方案是将所有菜单项列在有序列表下。然后使用jqueryuisortable、draggable对菜单进行排序，然后将列表保存到数据库中。以下是我所做的：

我有一个包含以下列的表：id、菜单名、位置

<?php
 $msg="";
// handle POST
if ($_POST) {
// use $i to increment the weight
$i=1;
// loop through post array in the order it was submitted
foreach ($_POST['menu'] as $menu_id) {
// update the row
$result = $db->query("UPDATE top_menu SET position=". $i . " WHERE id=". mysql_real_escape_string($menu_id));
$i++;
}
$msg="Menu re-ordered successfully";
}
?>
<table width="100%"  cellpadding="0" cellspacing="0" id="t_parenttable">
<tr><td>
<table width="100%" bgcolor="#6FD0FF" cellspacing="0" height="30px">
<tr>
<td width="20%"><strong>Top Menu</strong></td>
<td width="80%" align="right"><a href="loggedin.php?page=top_menu&mode=add">New Menu</a>&nbsp;|&nbsp;<a href="loggedin.php?page=top_menu&mode=sortMenu">Sort Level 0 Menu</a>&nbsp;|&nbsp;<a href="loggedin.php?page=top_menu">Go Back >></a></td>
</tr>
</table>
</td></tr>

<tr><td>
<table id="t_theList" width="100%" class="t_innertable">
<thead>
<tr>
  <th>Sort Menu</th>
</tr>
</thead>
<tbody>

<tr>
<td><?php 
if ($msg!="") {echo "<p>$msg</p>"; }?>
<form method="POST" action="">

<ol id="sort_list">
<?php 
if (!empty($_GET['id']))
{
    $id=$_GET['id'];
}
else
{
    $id=0;
}
$query="SELECT id, menu_name, position FROM top_menu WHERE parent_id='$id' ORDER BY position";
$result = $db->query($query);

// print the list items
while ($row = $db->fetch_array($result)) {
echo '<li><a href="#">
<input type="hidden" name="menu[]" value="'. $row['id'] .'" />
'. $row['menu_name'] .'</a></li>';
}
?>
</ul>

<input type="submit" name="reorder" value="Re-Order Menu" />

</form>
</td>
</tr>

</tbody>

</table>
</td></tr>

</table>

<script type="text/javascript">
// when the entire document has loaded, run the code inside this function
$(document).ready(function(){
// Wow! .. One line of code to make the unordered list drag/sortable!
$('#sort_list').sortable();
});
</script>


顶部菜单
|  | 
排序菜单

//加载整个文档后，运行此函数中的代码
$（文档）.ready（函数（）{
//哇！一行代码让无序列表可以拖动/排序！
$（“#排序列表”）.sortable（）；
});

此操作所需的js文件是jQuery、jQuery UI（可排序、可拖动）




当拖动列表项并将其放置在所需位置时，快照将显示图像
您的id将自动增加。在向表中插入内容时，基本上应该忽略填充
id
，而只执行
sort\u id
和
title
。我的问题是如何确定排序id？排序ASC/DESC写在您的选择框中的什么位置？@diEcho ASC写在查询中，如图所示above@RyanB你的意思是我必须给select元素sort_id值而不是id吗？@Tornike，老实说，我说不出来，或者我需要更多的caffine。我的直觉告诉我，你正在手动填充
id
字段，但该字段只是一个占位符。我想说对值使用
id
很好，因为我假设您正在传递该值或将其插入到另一个表中。
<?php
 $msg="";
// handle POST
if ($_POST) {
// use $i to increment the weight
$i=1;
// loop through post array in the order it was submitted
foreach ($_POST['menu'] as $menu_id) {
// update the row
$result = $db->query("UPDATE top_menu SET position=". $i . " WHERE id=". mysql_real_escape_string($menu_id));
$i++;
}
$msg="Menu re-ordered successfully";
}
?>
<table width="100%"  cellpadding="0" cellspacing="0" id="t_parenttable">
<tr><td>
<table width="100%" bgcolor="#6FD0FF" cellspacing="0" height="30px">
<tr>
<td width="20%"><strong>Top Menu</strong></td>
<td width="80%" align="right"><a href="loggedin.php?page=top_menu&mode=add">New Menu</a>&nbsp;|&nbsp;<a href="loggedin.php?page=top_menu&mode=sortMenu">Sort Level 0 Menu</a>&nbsp;|&nbsp;<a href="loggedin.php?page=top_menu">Go Back >></a></td>
</tr>
</table>
</td></tr>

<tr><td>
<table id="t_theList" width="100%" class="t_innertable">
<thead>
<tr>
  <th>Sort Menu</th>
</tr>
</thead>
<tbody>

<tr>
<td><?php 
if ($msg!="") {echo "<p>$msg</p>"; }?>
<form method="POST" action="">

<ol id="sort_list">
<?php 
if (!empty($_GET['id']))
{
    $id=$_GET['id'];
}
else
{
    $id=0;
}
$query="SELECT id, menu_name, position FROM top_menu WHERE parent_id='$id' ORDER BY position";
$result = $db->query($query);

// print the list items
while ($row = $db->fetch_array($result)) {
echo '<li><a href="#">
<input type="hidden" name="menu[]" value="'. $row['id'] .'" />
'. $row['menu_name'] .'</a></li>';
}
?>
</ul>

<input type="submit" name="reorder" value="Re-Order Menu" />

</form>
</td>
</tr>

</tbody>

</table>
</td></tr>

</table>

<script type="text/javascript">
// when the entire document has loaded, run the code inside this function
$(document).ready(function(){
// Wow! .. One line of code to make the unordered list drag/sortable!
$('#sort_list').sortable();
});
</script>

<script src="path_to_jquery/jquery.js"></script>
<script src="path_to_jquery_ui/jquery_ui/development-bundle/ui/jquery.ui.core.js"></script>
<script src="path_to_jquery_ui/jquery_ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="path_to_jquery_ui/jquery_ui/development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="path_to_jquery_ui/jquery_ui/development-bundle/ui/jquery.ui.sortable.js"></script>
<script src="plugins/jquery_ui/development-bundle/ui/jquery.ui.draggable.js"></script>