webcode-labサイトロゴ

  • お問い合わせへのリンクバナー

Webcode Laboratory
for website coding & program & seo;

Topics

この Blog CMS について

ドラッグ&ドロップでソート並び替えしデータベース更新サンプル【JQuery・Ajax・Javascript・PHP・Mysql】


rss
 

テーブル行をドラッグ&ドロップでソート並び替え & そのまま即座にデータベースUPDATE保存する!【JQuery・Ajax・Javascript・PHP・Mysql】

 
cursol move
 

データベースのデータをWEB上に<TABLE>表示し、

  • WEB上でソート順を変更したい
  • しかもソート順をそのままajaxで非同期にデータベース(MySQL等DB)更新・登録保存したい

っていうよくある件。

ソート順並べ替え方法はよく紹介されていますが、
いいデータベース保存方法( 即座にデータベースへ更新反映)まではビンゴで見つからないので、
方法をシェアします。

 

【並べ替えサンプルDEMO】

※実際にデータベース保存までをテストいただけます。

テーブル行ドラック&ドロップサンプルDEMO画像
 
 





ドラッグ&ドロップで並び替えについて

まず、ソート順並び替えですが、
「数字でソート順を指定」しデータベース更新する方法は導入は簡単ですが、
ユーザー的には使いづらいものになるかと思います。
直感的に「ドラッグ&ドロップ」で並び替え指定できる方が、使いやすいのは間違いないです。

「ドラッグ&ドロップ」並べ替えは、
今回「JQuery」のプラグイン「TableDnD」を使った方法をご紹介しますが、
jQuery UI の Sortable を使ったなど、やり方はいろいろとありますので、別のものでも結構です。
並べ替え後に更に、データベースへ「ソート順」登録する方法をメインにご紹介します。

注意点:
「ドラッグ&ドロップ」方法を使う条件は、
並び替えしたいデータが1ページ内に全て表示されていることです。
ページをまたいでの「ドラッグ&ドロップ」並び替えはできないので、
ページングで数ページにわたって表示するようなビッグデータには、この方法は向きません。




データベース登録について

今回の方法の特徴は、並べ替えをした途端にページ遷移なしにデータベースに情報が保存される 、という点です。
いちいち「この並べ替え順を保存する」送信ボタンクリック等は行わず、
「ドラッグ&ドロップ」した途端にデータベースにそのまま「ソート順」が保存されますので、
さくさくと並べ替え指定ができます。
※Ajaxの非同期通信を使用します。




設置方法

 
【DEMO ディレクトリ構造例】

index.php(html)

├ js
│ └ jquery.tablednd.js

└  inc
    └ .htaccess
    └ sort.php (htaccessでアクセス制限)
 
index.html (ドラッグ&ドロップ並び替えするTABLE表示ファイル)
JQuery本体設置

まずは、JQuery本体を設置します。
コードは割愛します。バージョン1.7以上で動くと思います。

JQuery「TableDnD」プラグイン設置

次に、「TableDnD」プラグインを読み込みます。
CDN経由で読み込んでも、サーバーにダウンロード設置して読み込んでも、どちらでもOkです。
(ダウンロードする場合は、「TableDnD」プラグイン本家URLで公開されているようですが、
 リンク切れなどで見つかりにくかったので、こちらにシェアしています。)
【参考: 「TableDnD」プラグイン本家 】
JQuery TableDnD Version 0.7

HTML
<!--並び替え 「TableDnD」プラグイン 読込 -->
CDN読込
<script src="//cdnjs.cloudflare.com/ajax/libs/TableDnD/0.9.1/jquery.tablednd.js" integrity="sha256-d3rtug+Hg1GZPB7Y/yTcRixO/wlI78+2m08tosoRn7A=" crossorigin="anonymous"></script>
または自サーバー設置読込
<script src="js/jquery.tablednd.js"></script>

 

「TableDnD」プラグインを呼び出す関数設置

・下記コードの4行目「#table-1」のところは、任意ID名に好きに置き換えてください。
(次項④TABLEのコード例参照)
・8行目の’inc/sort.php’は、sort.phpファイルの設置PATHに変更してください。
ちなみに、8行目~10行目は、
データベース保存を実行するPHPファイルに、並べ替え後のデータをPOSTで渡しています。

HTML
<!--並び替え 「TableDnD」プラグイン呼び出し関数 -->
<script>
$(function() {
    $('#table-1').tableDnD({
        // 画像でのみ並べ替えドラッグを可能にしたい場合は下記を指定、指定しなければ行全体ドラッグ可能
        // dragHandle: ".imgdrag img", // <td>class名+<img>タグ指定
        onDrop: function(table, row) {
            $.post('inc/sort.php', {
                sortitem: $.tableDnD.serialize()
            });

            // アラートが必要なければ下記削除
            alert("並び替えしました");
        }
    });
});
</script>

 

<TABLE>のコード

※データベースからのデータ取り出し方法は割愛します。
・テーブル<table>タグに 任意ID名を付けてください。(DEMO例:table-1)
・テーブルの表題となる<tr>行は「ドラッグ&ドロップ」したくないので、
クラスに”nodrop nodrag”を指定しています。
 (classに”nodrop nodrag”を指定でその行をドラッグできないようにできます。)
・各データ行<tr>のidに数字を指定しますが、
 この時指定する数字は、 実際のデータベーステーブルの、各データの主ID(数字)となります。

HTML
<!-- <table>タグに任意id名を指定 -->
<table id="table-1">
    <!-- 表題となる<tr>タグのクラスに"nodrop nodrag"を指定(この行は動かせなくする) -->
    <tr class="nodrop nodrag">
        <th>ID</th>
        <th>画像</th>
        <th>タイトル</th>
    </tr>
    <!-- それぞれの行<tr>タグのidに実際のDBのデータごとのID(プライマリーKEY)を数字指定 -->
    <tr id="2">
        <td>
            2
        </td>
        <td class="imgdrag"> <!-- class"imgdrag"は画像でのみドラッグ可能にしたい場合指定(クラス名任意) -->
            <img src="〇〇" alt="">
        </td>
        <td>
            タイトル② 休業のお知らせ
        </td>
    </tr>
    <tr id="3">
        <td>
            3
        </td>
        <td class="imgdrag">
            <img src="〇〇" alt="">
        </td>
        <td>
            タイトル③ WEBサイトリニューアルのお知らせ
        </td>
    </tr>
    <tr id="4">
        <td>
            4
        </td>
        <td class="imgdrag">
            <img src="〇〇" alt="">
        </td>
        <td>
            タイトル④ キャンペーン!
        </td>
    </tr>
    <tr id="5">
        <td>
            5
        </td>
        <td class="imgdrag">
            <img src="〇〇" alt="">
        </td>
        <td>
            タイトル⑤ 新商品をリリースしました!
        </td>
    </tr>
</table>





PHPファイル(データベース更新実行ファイル 例ではinc/sort.php)

※ データベースへの接続を行っているものとします。
 MySQLデータベース接続や、SQL文実行・切断部分は、適宜ご自身の環境に変えて記述してください。
※ このsort.phpを公開ディレクトリに置く場合で、セキュリティ上sort.phpに直接アクセスされないようにするには、次項htaccess等で外部からのアクセス拒否を設定してください。(次項参照)

PHP
<?php
# ==================================================
/**
* @ TableDnD並び替え データベース保存
*/
# ==================================================
# 
#  DB接続
#  --------------------------------------
// データベースへの接続をしてください。(適宜、ご自身の環境に変えて記述してください。)
$link = mysql_connect('接続先のサーバ', 'ユーザ名', 'パスワード');
$db_selected = mysql_select_db('テーブル名', $link);
mysql_set_charset('utf8');

#  DBアップデート
#  --------------------------------------
// $_POST = array("sortitem"=>"table-1%5B%5D=1&table-1%5B%5D=2&table-1%5B%5D=3&table-1%5B%5D=4&table-1%5B%5D=8&table-1%5B%5D=5&table-1%5B%5D=6&table-1%5B%5D=7"); // このような形式でPOST ajax送信されます。

if( isset($_POST) && is_array($_POST) )
{
    // エンコード変換
    $_POST = str_replace("%25", "", $_POST);
    $_POST = str_replace("%5B", "[", $_POST);
    $_POST = str_replace("%5D", "]", $_POST);
// var_dump($_POST); // エンコード後確認

    // 配列化
    parse_str($_POST["sortitem"],$sortitem);

    // 全件カウント
    $num = count($sortitem['table-1']);

    for($i=0; $i<$num; $i++) {
        // SQL文 該当テーブルのテーブル名・カラム名に変更してください。("sort":ソート順カラム名、"id":データのIDカラム名)
        $sql = "UPDATE hoge_table SET sort = '".$i."' WHERE id = '".$sortitem['table-1'][$i]."'";
        // SQL文を実行
        mysql_query($sql);
    }
}

#  DB切断
#  --------------------------------------
mysql_close($link);





.htaccessファイル

※必要な場合に設置してください。
実行ファイル(sort.php)を置くディレクトリに.htaccessを設置し、外部からの直接アクセスを禁止します。(自ドメインからのアクセスのみに限定し、それ以外の直接アクセスを拒否します。)
・1行目と2行目のドメイン名を ご自身のサイトのドメイン名に書き換えてください。
※ただし、下記のRefererも、偽装など可能なためアクセスを100%禁止はできません。

.htaccess
SetEnvIf REFERER "https://webcode-lab.com" Ref1 #自身のドメイン名に書き換えてください。
SetEnvIf REFERER "http://webcode-lab.com" Ref2 #自身のドメイン名に書き換えてください。
Order Deny,Allow
Deny from all
Allow from env=Ref1
Allow from env=Ref2
 

 

以上です。
どなたかのお役になれば幸いです。
 


ページの先頭へ

rss
1件目 (1件中)