バージョン選択

フォーラム

メニュー

オンライン状況

17 人のユーザが現在オンラインです。 (10 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 17
もっと...

サイト内検索

 > 管理機能 > 管理画面のカテゴリーをD&Dで移動させる

管理機能

新規スレッドを追加する

フラット表示 前のトピック | 次のトピック
投稿者 スレッド
theuri
投稿日時: 2009/2/19 13:11
対応状況: −−−
半人前
登録日: 2009/1/24
居住地: 大阪
投稿: 12
管理画面のカテゴリーをD&Dで移動させる
皆さん初めまして、EC-CUBEの案件に関わる事になりフォーラム内で情報収集させていただいておりました所

http://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=3379&forum=7

の書き込みを見て、なんだかウチの案件でも言われそうだ…と思いまして「EC-CUBEの今後の発展のために」と言う建前の下にそう言う機能を作ってみました。
まだ触りだして日が浅いので、微妙に曖昧な部分(dtb_categoryのデータを削除するとdel_flgが立たずにdeleteされるのは何故?など)ありますが、便利な機能っぽいので興味のある方はテスト環境にてお試しください。

/********** 09/02/19 15:13 追記 **********
すみません、大事な大事なバージョン情報書き忘れておりました^^;
新機能追加してみたのはEC-CUBEバージョン:2.3.3です。
********** 09/02/19 20:35 追記 **********
現在第2階層のデータを下げようとすると、データがズレる不具合が見つかっています。修正中。
********** 09/02/20 1:57 追記 **********
ズレる原因を特定し、その部分をFIX。
記事を参照してLC_Page_Admin_Products_Category.phpの部分を修正してください。
********** 09/02/23 18:40 追記 **********
コーディングフォーマットを「EC-CUBE標準規約」に従って書き換え。
80文字を目安に改行、だけは元ソース内に痕跡が無かったため放置。
改行させた方が良いのかな?
*******************************************/


■用意するもの
・「jQuery」のバージョン1.2以上、2009/2/17現在でjQueryの最新版は1.3.1のようです。
・「Table Drag and Drop JQuery plugin」ここのTableDnD pluginと言うプラグイン。テーブルが好きになります。


/************* JS周りの準備 *************/
(1)アップロード
コンテンツ管理->ファイル管理
user_data/packages/[テンプレート名]/js/
に上記ファイルをアップロードする。
バージョン名とかは取っちゃって「jquery.tablednd.js」とかにした方が綺麗ですね。


(2)JSの読み込み
/data/Smarty/templates/default/admin/main_frame.tpl
※管理画面はテンプレを作ってもdefaultをみるのかな?
こっちに書かないと反映されなかったので取り合えず。
ちょっとまだ勉強不足ですみません。

39行目に
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.tablednd.js"></script>
を追加。

これで管理画面でtabledndが使えるようになります。



/************* HTML周りの準備 *************/
(1)処理に必要なものを追加する
/data/Smarty/templates/default/admin/products/category.tpl
30行目に
<input type="hidden" name="keySet" value="">
を追加、入れ子です。

134行目のtableタグに(デフォルト時の133行目)
id="categoryTable"
を追加。

135行目のtrタグのクラスに(デフォルト時の134行目)
class="fs12n nodrop nodrag"
と言う具合に「nodrop」「nodrag」を追加、コレをしないとタイトルが動いてしまいます。
絵的にはちょっと面白いけど。

143行目のtrタグに(デフォルト時の142行目)
id="<!--{$arrList[cnt].category_id}-->"
を追加、動かした行のcategory_idを渡すのが目的です。


(2)tabledndを使って動かす処理を書く
次に動かしたりする部分を実装。
132行目あたりに書いてもいいし、html内にJSを書くのは主義に反する方は外部に書いても良いのではないかと思います。
<script type="text/javascript">
// カテゴリーテーブルのイニシャライズ
$(document).ready(function() {
    $("#categoryTable").tableDnD({
        onDrop: function(table, row) {
            var rows = table.tBodies[0].rows;
            var keys = row.id;

            for (var i = 0; i < rows.length; i++) {
                if (row.id == rows[i].id) {
                    keys += "-" + i;
                    break;
                }
            }

            fnModeSubmit('moveByDnD','keySet', keys);
        }
    });
});
</script>


この段階でテーブルが動かせるようになっていると思います。



/************* PHP周りの準備(09/02/20 1:57 に修正) *************/
最後にPHPにDBの操作部分を書いてあげます。
/data/class/pages/admin/products/LC_Page_Admin_Products_Category.php
176行目辺りに

// テーブルをドラッグ&ドロップした時の処理
case 'moveByDnD':
    // DnDしたカテゴリと移動先のセットを分解する
    $keys = explode("-", $_POST['keySet']);
    if ($keys[0] && $keys[1]) {
        $objQuery = new SC_Query();
        $objQuery->begin();
        
        // 移動したデータのrank、level、parent_category_idを取得
        $rank   = $objQuery->get("dtb_category", "rank", "category_id = ?", array($keys[0]));
        $level  = $objQuery->get("dtb_category", "level", "category_id = ?", array($keys[0]));
        $parent = $objQuery->get("dtb_category", "parent_category_id", "category_id = ?", array($keys[0]));

        // 同一level内のrank配列を作成
        $objQuery->setoption("ORDER BY rank DESC");
        if ($level == 1) {
            // 第1階層の時
            $arrRet = $objQuery->select("rank", "dtb_category", "level = ?", array($level));
        } else {
            // 第2階層以下の時
            $arrRet = $objQuery->select("rank", "dtb_category", "level = ? AND parent_category_id = ?", array($level, $parent));
        }
        for ($i = 0; $i < sizeof($arrRet); $i++) {
            $rankAry[$i + 1] = $arrRet[$i]['rank'];
        }

        // 移動したデータのグループ内データ数
        $my_count = $this->lfCountChilds($objQuery, "dtb_category", "parent_category_id", "category_id", $keys[0]);
        if ($rankAry[$keys[1]] > $rank) {
            // データが今の位置より上がった時
            $up_count = $rankAry[$keys[1]] - $rank;
            $decAry   = $objQuery->select("category_id", "dtb_category", "level = ? AND rank > ? AND rank <= ?", array($level, $rank, $rankAry[$keys[1]]));
            foreach($decAry as $value){
                // 上のグループから減算
                $this->lfDownRankChilds($objQuery, "dtb_category", "parent_category_id", "category_id", $value["category_id"], $my_count);
            }
            // 自分のグループに加算
            $this->lfUpRankChilds($objQuery, "dtb_category", "parent_category_id", "category_id", $keys[0], $up_count);
        } else if($rankAry[$keys[1]] < $rank) {
            // データが今の位置より下がった時
            $down_count = 0;
            $incAry     = $objQuery->select("category_id", "dtb_category", "level = ? AND rank < ? AND rank >= ?", array($level, $rank, $rankAry[$keys[1]]));
            foreach ($incAry as $value) {
                // 下のグループに加算
                $this->lfUpRankChilds($objQuery, "dtb_category", "parent_category_id", "category_id", $value["category_id"], $my_count);
                // 合計減算値
                $down_count += $this->lfCountChilds($objQuery, "dtb_category", "parent_category_id", "category_id", $value["category_id"]);
            }

            // 自分のグループから減算
            $this->lfDownRankChilds($objQuery, "dtb_category", "parent_category_id", "category_id", $keys[0], $down_count);
        }
        $objQuery->commit();
    }
break;


これをペタリと貼り付けて保存、switch($_POST['mode'])のcaseを一個増やすだけですね。



これで恐らく管理画面のカテゴリー右部分のテーブルがラッグ&ドロップで動くようになり、データを入れ替える事が出来るはずです。
一番右の「移動」列は不要ならとっちゃっても良さそうですね。
※左側のエクスプローラー風のは当然動きません、あしからず。


バグなどありましたらPM?と言うので送ってみるか、こちらに書き込んでください。修正して今後の参考とさせていただきます。

読みづらい長文を最後まで見てくださった方々、お疲れ様でしたm(;_ _)m
改めまして今後ともよろしくお願いします。
フラット表示 前のトピック | 次のトピック


題名 投稿者 日時
 » 管理画面のカテゴリーをD&Dで移動させる theuri 2009/2/19 13:11
     Re: 管理画面のカテゴリーをD&Dで移動させる hogehoge 2009/2/19 20:11
     Re: 管理画面のカテゴリーをD&Dで移動させる adadachi5 2009/2/19 20:12
       Re: 管理画面のカテゴリーをD&Dで移動させる theuri 2009/2/19 20:33
         Re: 管理画面のカテゴリーをD&Dで移動させる hogehoge 2009/2/19 20:46
           Re: 管理画面のカテゴリーをD&Dで移動させる seasoft 2009/2/19 22:57
     Re: 管理画面のカテゴリーをD&Dで移動させる lucky7 2009/2/20 1:21
       Re: 管理画面のカテゴリーをD&Dで移動させる theuri 2009/2/20 2:46
         Re: 管理画面のカテゴリーをD&Dで移動させる seasoft 2009/2/20 3:18
           Re: 管理画面のカテゴリーをD&Dで移動させる hogehoge 2009/2/20 11:17
             Re: 管理画面のカテゴリーをD&Dで移動させる theuri 2009/2/20 12:36
           Re: 管理画面のカテゴリーをD&Dで移動させる theuri 2009/2/20 12:15
     Re: 管理画面のカテゴリーをD&Dで移動させる tecotoco 2009/2/20 22:13
       Re: 管理画面のカテゴリーをD&Dで移動させる theuri 2009/2/21 11:01
         Re: 管理画面のカテゴリーをD&Dで移動させる theuri 2009/2/21 11:06
         Re: 管理画面のカテゴリーをD&Dで移動させる tecotoco 2009/2/21 20:13
           Re: 管理画面のカテゴリーをD&Dで移動させる theuri 2009/2/23 11:12
     Re: 管理画面のカテゴリーをD&Dで移動させる pigmon 2009/7/17 17:02
       Re: 管理画面のカテゴリーをD&Dで移動させる yuta 2009/11/27 16:10

 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は89,348名です
総投稿数は110,082件です

投稿数ランキング

1
seasoft
7367
2
468
3217
3
AMUAMU
2712
4
nanasess
2314
5
umebius
2085
6
yuh
1819
7
h_tanaka
1652
8
red
1570
9
mcontact
1304
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
799
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.