rikuです。
お疲れ様でした。
今週はとても濃い週でした。
ある案件で、cakephp3とJavaScriptを実装しているんですが。
難しいです。
某オンラインサロンの中身を作り込みしているんですが
やったことは、
ユーザー情報の登録画面と、検索機能です。
検索機能に関しては、既存の機能を使うのですが
登録画面にある、特定のinputタグをクリックしたときにinput内の要素を
自己紹介入力欄に#タグ付きで追加します。
この実装はJavaScriptで行いました。
下記のようなinputタグがあります。
ループ開始(カテゴリの分) <?php echo $this->Form->input('tag_ids[]', [ 'type' => 'checkbox', 'value' => この要素のid, 'id' => この要素のword, 'default'=>$userstags->tag_id, 'label' => [ 'text' => この要素のword, 'text' => この要素のword, ], 'checked' => in_array('#' . $childNode->word, $hashtags), 'hiddenField' => false, 'templates' => ['inputContainer' => '{{content}}'], 'onclick' => 'addToSelfIntroduction(this.id, \'' . $rootNode->word . '\');' ]); ?> ループ終了
上記はcakeのヘルパーを使ったフォームです。
クリックした時に、要素を#タグで表示して、チェックを外したときに消すのは簡単なんですが
問題は、共通の親カテゴリを持つinputを押した時に
親も表示する必要がありました。
クリックするたびに親を表示するのではなく、共通の親を持つinputタグのうち
いずれかをクリックした時に、１つだけ親を表示します。
次に、共通の親を持つinputタグが全て選択が外れた時に削除します。
この実装で行ったのは、まずonclick時にJavaが動きます。
・自己紹介欄の中身を取得
・addToSelfIntroduction(this.id, \” . $rootNode->word . ‘\’)の中身を変数に代入
・this.idの中から、追加するテキストを#タグをつけて変数に代入
・親カテゴリを自己紹介欄に、追加・削除する関数を定義
・同じ親要素を持つinputタグをグルーピング
・グルーピングされたinputタグが、checkかcheckedじゃないかを確認する関数の定義
・inputタグが押された時と、外された時(両方onclick)
・自己紹介欄に、もし親カテゴリがない場合は追加
・その後親に関わらずinputタグの要素を追加
・選択が解除されたときに、inputタグの要素を削除
・その後、グループ化されたinputタグがあるかどうかを確認
・あれば、何もしない。
・なければ、親を削除
このようなコーディングをJavaScriptで行いました。
今回初めて実装しましたが、大分理解できるようになりました。
でもこれに関係する他の実装も、社長は２時間でできるというのだから
ビックリです。
来週も頑張ります。
WEB制作・ITに関するお悩みや
ご質問等お気軽にご相談ください
