php - 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 列)对菜单项进行排序，但我无法决定如何使用 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 可排序、可拖动，您可以对菜单进行排序，然后将列表保存到数据库中。这是我所做的:

我有一个包含以下列的表: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>

快照显示拖动列表项并将其放置在所需位置时的图像