菜單項動態排序php mysql

Question

我寫了動態菜單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"> 

怎麼可以看到的傢伙，我試圖與選擇元素的幫助菜單項（與排序sort_id列），但我無法下定決心如何在MySql表中使用sort_id數字來操作，如何增加或減少來實現目標。

請幫忙，如果有人知道該怎麼做或有想法？

PS。我想排序菜單項不選擇形式，但也在導航欄，我沒有寫在這裏。 例如，如果第一類被命名爲「一個」和第二個「三」，我想他們之間插入類別中的菜單命名爲「兩個」 NOT IN選擇元素

UPDATE

這裏插入腳本

<?php 
    $main_sort_res = $connection->query("SELECT sort_id FROM menu WHERE id=" . $_POST['pos'] . ""); 
$sort_num = $main_sort_res->fetch_assoc(); 
if ($k = $con->query("SELECT id FROM menu WHERE id=" . $_POST['pos'] . " AND sort_id=(SELECT MAX(m_sort_id) FROM main_menu)")){ // here defined if selected element is last or not 
if ($k->num_rows==0){ // not last element 
    $connection->query("INSERT INTO menu(sort_id,title) VALUES(" . ($sort_num['sort_id']+1) . ",NULL,'" . $_POST['title'] . "')") 
} else { // last element in select form 
    $connection->query("INSERT INTO menu(sort_id,title) VALUES(" . ($sort_num['sort_id']+10000) . ",NULL,'" . $_POST['title'] . "')") 
} 

} 
?> 

你怎麼看我插入在sort_id手動號碼，這是非常糟糕的，但我沒有別的想法。從相同的元素（我是指select元素）中多次插入類別後，我感到困惑。原因是，增加值1，但我無法想象什麼函數會很好不匹配sort_id -s在列

Answer 1

您可以jQuery UI進行排序。一種解決方案可能是列出有序列表下的所有菜單項。然後使用jQuery UI排序，拖動可以對菜單進行排序，然後將列表保存到數據庫。這是我做了什麼：

我有列的表：ID，MENU_NAME，位置

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

爲此所需的js文件jQuery的，jQuery用戶界面（排序，可拖動）

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

快照顯示圖像的同時拖動列表項，並把你想要