菜单项动态排序php mysql

Question

我用 Php 和 MySql 编写了动态菜单。这是我的MySql表结构=＆gt;

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

这里是html form =＆gt;

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

你怎么看到伙计们，我正在尝试使用select元素（使用sort_id列）对菜单项进行排序，但是我无法决定如何使用 sort_id 数字进行操作在MySql表中，如何实现增加或减少目标。

请帮助，如果有人知道该怎么做或有想法？

PS。我想排序菜单项不是选择形式，而是导航栏，我没有在这里写。 例如，如果第一个类别被命名为“一个”而第二个“三个”，我想在它们之间插入一个名为“两个”的菜单，而不是选择元素

更新

这里是插入脚本

<?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 sortable，draggable你可以对菜单进行排序，然后将列表保存到数据库中。这就是我所做的：

我有一个包含列的表：id，menu_name，position

<?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 UI（可排序，可拖动）

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

快照会在拖动列表项并放置到您想要的位置时显示图像