Help us understand the problem. What is going on with this article?

MySQLのデータをドラッグで並替(jqueryUI)のメモ

More than 5 years have passed since last update.

何回やっても忘れるのでメモ。

HTML部分
(分けて書いてるが、以下を続けて記述)

1、formと保存ボタン
<form action="" method="post">
<input type="submit" id="submit" value="並び順を保存する" onClick="alert('並べ替え完了です')"/>
<ul class="sortable">
2、MySQL呼び出し
<?php
$my_Row2 = mysql_query("SELECT * FROM テーブル名 ORDER BY no ASC",$my_Con);
if (!$my_Row2){
  die(mysql_error());
}
while($row2 = mysql_fetch_array($my_Row2)){
$soid = $row2["id"]; ///////idのようなモノ
$sina = $row2["sina1"]; /////商品名
$gaku = $row2["gaku1"]; ///料金
$sono = $row2["no"]; //////並び順番号
echo<<<EOS
         <li class="ns" id="$soid">{$sina}</li><!-- ----リスト---- -->
EOS;
}
?>
3、閉じる
</ul>
<input type="hidden" id="result" name="result" />
</form>
4、script(headではなく、body内に書く)
    <script src="./jquery-1.8.0.min.js"></script>
    <script src="./jquery-ui-1.8.23.custom.min.js"></script>
    <script>
    $(function() {
        $(".sortable").sortable();
        $(".sortable").disableSelection();
        $("#submit").click(function() {
            var result = $(".sortable").sortable("toArray");
            $("#result").val(result);
            $("form").submit();
        });
    });
    </script>

DBのテーブルは【 id ,商品名,金額,no 】
2のようにリストのidに商品idを入れる。
3のinput hiddenに
並べた順番通りにidにno(数字)を入れる。

PHP部分

PHP部分
    $result = $_POST['result'];
    $result_array = explode(',', $result);
$hairetu = serialize($result_array);
$nom = 1; ///////////////idに対して番号を1からふる
foreach ($result_array as $no){
mysql_query("UPDATE テーブル名 SET no='$nom' WHERE id='$no'");
$nom++;
}

$resultに input hiddenの値を代入し、配列化。
$nomに始まりの数字を代入。
mysqlでUPDATE。
(配列のidの順番通りに1から順に番号を入れる)


上記をまとめたモノ

まとめ
<form action="" method="post">
      <input type="submit" id="submit" value="並び順を保存する" onClick="alert('並べ替え完了です')"/>
            <ul class="sortable">

<?php
$my_Row2 = mysql_query("SELECT * FROM テーブル名 ORDER BY no ASC",$my_Con);
if (!$my_Row2){
  die(mysql_error());
}
while($row2 = mysql_fetch_array($my_Row2)){
$soid = $row2["id"]; ///////idのようなモノ
$sina = $row2["sina1"]; /////商品名
$gaku = $row2["gaku1"]; ///料金
$sono = $row2["no"]; //////並び順番号
echo<<<EOS
                  <li class="ns" id="$soid">{$sina}</li><!-- ----リスト---- -->
EOS;
}
?>
             </ul>
      <input type="hidden" id="result" name="result" />
</form>
script読み込み
    <script src="./jquery-1.8.0.min.js"></script>
    <script src="./jquery-ui-1.8.23.custom.min.js"></script>
    <script>
    $(function() {
        $(".sortable").sortable();
        $(".sortable").disableSelection();
        $("#submit").click(function() {
            var result = $(".sortable").sortable("toArray");
            $("#result").val(result);
            $("form").submit();
        });
    });
    </script>

ダウンロード: JQuery-ui
一番したの【Download】をクリック

tabo_purify
WEBに特化しています。 その他の言語は分かりません。 間違いを発見した方はご指摘くださいませ。
https://labo-iwasaki.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away