バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

 > 管理機能 > 管理画面のカテゴリーを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
改めまして今後ともよろしくお願いします。
hogehoge
投稿日時: 2009/2/19 20:11
対応状況: −−−
常連
登録日: 2008/9/19
居住地: Cusco,Peru
投稿: 67
Re: 管理画面のカテゴリーをD&Dで移動させる
早速試してみました。
動いてます。すごい便利ですね〜。
本家に取り込んで欲しいくらいです
もうちょっとテストしてみます!


そういえば、動作的にはどちらでも同じだと思いますが、拡張は、
/data/class/pages/admin/products/LC_Page_Admin_Products_Category.php
ではなく
/data/class_extends/page_extends/admin/products/LC_Page_Admin_Products_Category_Ex.php
でやる設計思想のようなことをnanasessさんがどこかで
おっしゃられてた気がしました。

adadachi5
投稿日時: 2009/2/19 20:12
対応状況: −−−
半人前
登録日: 2008/12/24
居住地:
投稿: 26
Re: 管理画面のカテゴリーをD&Dで移動させる
>kim様

コチラに機能要望として書き込んだものです。

この度は、価値のある情報&機能提供ありがとうございます。
早速、テスト環境にて試してみたいと思います。

本当にありがとうございました。

機能追加作業の最中に行き詰まったら
改めてご報告させて頂きます。

宜しくお願い致します。
theuri
投稿日時: 2009/2/19 20:33
対応状況: −−−
半人前
登録日: 2009/1/24
居住地: 大阪
投稿: 12
Re: 管理画面のカテゴリーをD&Dで移動させる
hogehoge様>
ECサイトに関わらず、並べ替えの機能はいつも悩まされますね。
現在こちらで1つ不具合が発生しましたので原因を追っております、もう少しテストして頂ければと思います。

そういえば、動作的にはどちらでも同じだと思いますが、拡張は、
/data/class/pages/admin/products/LC_Page_Admin_Products_Category.php
ではなく
/data/class_extends/page_extends/admin/products/LC_Page_Admin_Products_Category_Ex.php
でやる設計思想のようなことをnanasessさんがどこかで
おっしゃられてた気がしました。

なるほど、それは失礼しました。
今出ているバグを取るときにExの方に移してみましょう。
ご協力ありがとうございます。



adadachi5様>
こちらでも必要となりました機能ですので共有していければと思います。
上にも書きましたが、何かの拍子にズレ?が発生して、そこからの操作が変になってしまう不具合が発生しています。
出来ましたらテスト環境にて再現方法を見つけて頂ければ、Fixも早く済むと思いますのでご協力願えればありがたいです。

2パターンでデバッグしているのですが、今の所違いと言えばPostgreSQLかMySQLかの違いぐらいで…。
単に並び替えの部分がおかしいんだろうなぁと思います。

こちらでも引き続き改善に努めますが、ソースを開示しておりますので、指摘など頂ければありがたいです。


以上、カテゴリ管理のカスタマイズに興味がおありの方はご協力お願いしますm(_ _)m
hogehoge
投稿日時: 2009/2/19 20:46
対応状況: −−−
常連
登録日: 2008/9/19
居住地: Cusco,Peru
投稿: 67
Re: 管理画面のカテゴリーをD&Dで移動させる
>kimさま
いえ、こちらこそ便利な機能を公開していただいて
ありがとうございます。

たしかに、たまにずれますね。
こちらでは右のエクスプローラーだけが
実際の情報とずれてしまってしまうという現象が
発生しました。

環境は
PHP 4.4.9
PostgreSQL 8.2.7
Firefox 3.0.6
です。

私も、少しでも情報出せるように頑張って調べてみます!
seasoft
投稿日時: 2009/2/19 22:57
対応状況: −−−
登録日: 2008/6/4
居住地:
投稿: 7367
Re: 管理画面のカテゴリーをD&Dで移動させる
まだ試していませんが、凄いですね。
ある程度整ったら、本体へ吸収していきたいですね。


----------------
Seasoft
こちらでの投稿は、アイディア程度に留めさせていただいております。
個別案件の作業は有償で承っております。お気軽にご相談ください。

lucky7
投稿日時: 2009/2/20 1:21
対応状況: −−−
一人前
登録日: 2008/6/2
居住地: 東京近郊
投稿: 101
Re: 管理画面のカテゴリーをD&Dで移動させる
貴重な情報ありがとうございます!
近々、導入してみようかと思います!
具体的な情報なのでとても助かります。


----------------
EC-CUBEバージョン 2.1.2
PHPバージョン PHP 4.3.9
DBバージョン MySQL 4.1.20

theuri
投稿日時: 2009/2/20 2:46
対応状況: −−−
半人前
登録日: 2009/1/24
居住地: 大阪
投稿: 12
Re: 管理画面のカテゴリーをD&Dで移動させる
テスト導入してくれた皆様へ>
先ほどバグを取り除きました、PHP周り〜の部分に貼ってあるPHPソースを修正しましたので貼り直してもらえればと思います。



hogehoge様>
読み返してみたら単純な事でお恥ずかしい限りですが、第2階層以降に親IDの絞り込みをしていなかったために、同一階層のデータを全て取得していたようです^^;
LC_Page_Admin_Products_Category_Ex.php

あと…これに拡張する事は出来たのですが、LC_Page_Admin_Products_Category.phpのprocess()に
default:
    $this->arrForm['parent_category_id'] = 0;
    break;

と言うのが含まれていまして、第2階層以下を編集した時に絶対第1階層に戻ってしまうと言う事が解りました。
結局他の機能に影響を与えないようにしようと思うと…直接条件式を一個増やすのが一番安全かなと思い、再びLC_Page_Admin_Products_Category.phpに書いちゃいました



seasoft様>
ありがとうございます、この手の機能はカテゴリよりもむしろ商品の並び替えにつけて欲しいと言われますね。
こちらの機能が安定したら商品の方も応用して作れそうな気がします



lucky7様>
一応バグは取り除きましたが、本番で使う前にテストしてみる事をおすすめします。今の所は大丈夫な気配がしているのですけどね笑



いろんな方にテストしていただけると言うフォーラムはありがたいです、皆さんありがとうございます
動作報告やバグ報告などありましたら書き込みよろしくお願いします。
seasoft
投稿日時: 2009/2/20 3:18
対応状況: −−−
登録日: 2008/6/4
居住地:
投稿: 7367
Re: 管理画面のカテゴリーをD&Dで移動させる
> ありがとうございます、この手の機能はカテゴリよりもむしろ商品の並び替えにつけて欲しいと言われますね。
> こちらの機能が安定したら商品の方も応用して作れそうな気がします

EC-CUBEコミュニティ(eccube-comu) のレイアウト編集が正式版にも取り込まれる予定だったと思います。

両者の実装が似た方法になっていると、保守性が上がり、他画面への応用も促進できそうな気がします。(あくまで理想の話で、実際、別の方の実装と統合するのって難しいですよね。)


EC-CUBE の開発環境をパフォーマンス測定で利用してて、まだ試せていませんが・・・
# 15,000件の商品マスタ、MySQLだと1ページ表示するのに何時間かかるんだw


----------------
Seasoft
こちらでの投稿は、アイディア程度に留めさせていただいております。
個別案件の作業は有償で承っております。お気軽にご相談ください。

hogehoge
投稿日時: 2009/2/20 11:17
対応状況: −−−
常連
登録日: 2008/9/19
居住地: Cusco,Peru
投稿: 67
Re: 管理画面のカテゴリーをD&Dで移動させる
kimさま

ありがとうございました。
順調に動いてる見たいです!
お力になれませんでした。すいません。orz

# 細かくてすいません。ソースが、最後の

}else if($rankAry[$keys[1]] < $rank){

の閉じがぬけてるみたいです。

あと、こちらでは、
/html/admin/css/contents.css
に以下を追加してdrag中の色をかえました。

.tDnD_whileDrag {
    background-color: #b7b7b7;
}

ほんとは、使いやすそうなclassがあれば、
それをonDragClassで指定するのが正解っぽそうなのですが、
ちょうどよさげなものがなかったので。

あまり「Table Drag and Drop JQuery plugin」がよくわかってない
ので、トンチンカンなことしてたらすいません。
(1) 2 »
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


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

統計情報

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

投稿数ランキング

1
seasoft
7367
2
468
3217
3
AMUAMU
2712
4
nanasess
2314
5
umebius
2085
6
yuh
1819
7
h_tanaka
1646
8
red
1570
9
mcontact
1296
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.