0

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

どのようにみんなを見ることができますか、私はselect要素（sort_id列を使用）を使用してメニュー項目を並べ替えようとしていますが、MySqlテーブルのsort_id番号を操作する方法、達成するためにどのように増減するかを決めることができませんゴール。

誰かがそれを行う方法を知っているか、アイデアを持っているなら、助けてください？

PS。メニュー項目を選択形式ではなく、ここに記述していないナビゲーションバーでも並べ替えたい。たとえば、最初のカテゴリの名前が「1」で2番目のカテゴリの名前が「3」の場合、メニューの「選択されていない要素」の「2」という名前のカテゴリをそれらの間に挿入したいと思います。

アップデート

ここにスクリプトを挿入しています

<?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と一致しない関数がどのようなものであるか想像できません。

4

1 に答える 1

1

ソート用のjQuery UIを使用できます。1 つの解決策は、順序付きリストの下にすべてのメニュー項目をリストすることです。次に、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>

ここに画像の説明を入力

スナップショットは、リスト項目をドラッグして目的の場所に配置している間、画像を表示します

于 2012-08-08T14:34:40.777 に答える