質問編集履歴

やりたいことのサンプルを箇条書きを追加

2017/10/03 09:42

投稿

noranuko

スコア12

test CHANGED Viewed

	@@ -1 +1 @@
1	- プルダウン連動検索機能（FormHelper）
1	+ プルダウン連動検索機能（FormHelper）(hierselect)

test CHANGED Viewed

@@ -20,6 +20,26 @@
+---　サンプル　-----------------------------------------------------------------------------
+◎ソースとは関係ないのですが、やりたいことの例を日本語で記述しておきます。
+１．市区町村を１つ選択。新宿区、渋谷区、立川市、国立市　など　例）渋谷区
+２．観光スポットを複数選択。　水族館、動物園、遊園地、神社、レストラン　など　例）神社、レストラン
+３．該当する名所を複数選択。　花園神社、１・２・３・ファクトリー、オセロ　など
+４．３で選択したキーを元に検索。
+５．検索結果の詳細情報以外に、１，２，３で選択した条件を保持したままにしたい。
+※画面の左側に検索条件、右側に詳細情報を表示し、別ページには移動しない。
+-------------------------------------------------------------------------------------------
 ◎index.ctp
 ```

タグ追加

2017/10/03 09:42

投稿

noranuko

スコア12

test CHANGED Viewed

File without changes

test CHANGED Viewed

File without changes

文章を変えました。

2017/10/03 09:14

投稿

noranuko

スコア12

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,6 +1,6 @@
-###前提・実現したいこと
+###実現したいこと
-PHP(CakePHP)で連動プルダウンを使用した検索システムを作っています。
+PHP(CakePHP)で連動プルダウン＋セレクトボックス間テキスト移動を使用したグラフ表示システムを作っています。
 検索後に値を保持した状態にしたいです。
@@ -8,130 +8,468 @@
+わかりにくい説明文ですが、サンプルソースや参照サイトなどアドバイス等を宜しくお願い致します。
-FormHelperを使用して作成しようとしているのですが、
+もし、検索キーの保持のやり方が別にあり、そちらで実現できればそちらでもＯＫです。
+※初心者のため、どのようにソースを抜粋すれば良いかわからなかったため、長くなってしまいました。
-以下のサンプルのように書くと、
+※グラフ作成部分は未記入
+◎index.ctp
 ```
-echo $this->Form->select('flag',array(1=>'りんご',2=>'みかん'3=>'ゴリラ',4=>'キリン'),,array('empty'=>false));
+<!-- プロダクト -->
+<li>
+    <?= __('プロダクト') ?><br>
+    <?=$this->Form->select('LoadchartForm.SelectProductNM', $products, ['disabled'=>false, 'multiple' => false, 'id' => 'selectProductID', 'size' => 3, 'empty' => false]); ?>
+</li>
+<!-- サブシステム -->
+<li>
+    <?= __('サブシステム') ?><br>
+    <?=$this->Form->select('LoadchartForm.SelectSubsystemNM', $subsystems, ['disabled'=>true, 'multiple'=>true, 'id'=>'selectSubsystemID', 'size'=>10, 'empty'=>false]); ?>
+</li>
+<!-- 検索結果表示 -->
+<!-- リストボックス間移動１ -->
+<li>
+    <?=$this->Form->select('LoadchartForm.SelectHandleSubsystemsAccountNM', $handleSubsystemAccounts, ['disabled'=>true, 'multiple'=>true, 'id'=>'selectHandleSubsystemAccountID', 'size'=>10, 'empty'=>false]); ?>
+</li>
+<li>
+    <center>
+        <input type="button" id="move_down" value="↓" />
+        <!-- スペース （位置合わせ）-->
+        <input type="button" id="move_up" value="↑" />
+    </center>
+</li>
+<li>
+    <?=$this->Form->select('LoadchartForm.SelectAccountNM', null, ['disabled'=>false, 'multiple' => true, 'id' => 'selectAccountID', 'size' => 10, 'empty' => false]); ?>
+</li>
+<script type="text/javascript">
+$(document).ready(function(){
+    // プルダウンのoption内容をコピー
+    var pd1 = $("#selectProductID option").clone();
+    var pd2 = $("#selectSubsystemID option").clone();
+    var pd3 = $("#selectHandleSubsystemAccountID option").clone();
+    var pd4 = null; // 検索結果(検索用)
+    var pd5 = null; // 検索結果(検索用)
+    // 1→2連動
+    $("#selectProductID").change(function () {
+        // lv1のvalue取得
+        var lv1Val = $("#selectProductID").val();
+        // selectSubsystemIDのdisabled解除
+        $("#selectSubsystemID").removeAttr("disabled");
+        // 一旦、selectSubsystemIDのoptionを削除
+        $("#selectSubsystemID option").remove();
+        // (コピーしていた)元のselectSubsystemIDを表示
+        $(pd2).appendTo("#selectSubsystemID");
+        // 選択値以外のクラスのoptionを削除
+        $("#selectSubsystemID option[class != p"+lv1Val+"]").remove();
+        // selectHandleSubsystemAccountID disabled処理
+        $("#selectHandleSubsystemAccountID").attr("disabled", "disabled");
+    });
+    // 2→3連動
+    $("#selectSubsystemID").change(function () {
+        // selectHandleSubsystemAccountIDのdisabled解除
+        $("#selectHandleSubsystemAccountID").removeAttr("disabled");
+        // 一旦、selectHandleSubsystemAccountIDのoptionを削除
+        $("#selectHandleSubsystemAccountID option").remove();
+        $("#selectAccountID option").remove();
+        // マルチ選択
+        var e = document.getElementById('selectSubsystemID');
+        var any = new Array();
+        var num = 0;
+        // optionを順番に見て、selected となっているものの添え字を配列に入れる
+        for (var i=0; i<e.childElementCount; i++) {
+            if (e.getElementsByTagName('option')[i].selected) {
+                any[num] = i;
+                num++;
+            }
+        }
+        // for..in文でまわして、配列にいれた添え字と、添え字をもとに文字列を出力させる
+        var flg = false;
+        for(var txt in any) {
+            // ID取得
+            var strId = e.children[any[txt]].value;
+            // (コピーしていた)元のselectHandleSubsystemAccountIDを表示
+            $(pd3).appendTo("#selectHandleSubsystemAccountID");
+            // 選択値以外のクラスのoptionを削除
+            $("#selectHandleSubsystemAccountID option[class != p" + strId + "]").remove();
+            if (flg == false) {
+                var totalPd3 = $("#selectHandleSubsystemAccountID option").clone();
+                flg = true;
+            }else{
+                var copyPd3 = $("#selectHandleSubsystemAccountID option").clone();
+                totalPd3 = $(totalPd3).add(copyPd3);
+            }
+        }
+        $("#selectHandleSubsystemAccountID option").remove();
+        $(totalPd3).appendTo("#selectHandleSubsystemAccountID");
+        $(pd5).appendTo("#selectAccountID");
+    });
+    // ↓ボタン押下処理
+    $("#move_down").click(function () {
+        $('#selectAccountID').append($('#selectHandleSubsystemAccountID option:selected'));
+        $('#selectHandleSubsystemAccountID').prop("selected", false);
+        pd4 = $("#selectHandleSubsystemAccountID option").clone();
+        pd5 = $("#selectAccountID option").clone();
+    });
+    // ↑ボタン押下処理
+    $("#move_up").click(function () {
+        $('#selectHandleSubsystemAccountID').append($('#selectAccountID option:selected'));
+        $('#selectAccountID').prop("selected", false);
+        pd4 = $("#selectHandleSubsystemAccountID option").clone();
+        pd5 = $("#selectAccountID option").clone();
+    });
+    // 検索ボタン押下処理
+    $("#workTermID").click(function () {
+        // 全選択
+        $("#selectAccountID option").prop("selected", true);
+    });
+});
+</script>
 ```
-オプション部分が
+◎Controller.php
 ```
-<option Value='1'>りんご</option>
-<option Value='2'>みかん</option>
-<option Value='3'>ゴリラ</option>
-<option Value='4'>キリン</option>
+    public function index()
+    {
+    // プロダクト（Products）
+        $this->loadModel('Products');
+        $products = $this->Products->find('list');
+        $this->set('products', $products);
+    // サブシステム（Subsystems）
+    // DB接続例：mysqli_xxx関数を使う
+        $conSubsystems = mysqli_connect('localhost', 'root', '', 'sdsm');
+    // mysqli使用
+        $querySubsystems = "SELECT subsystems.id AS subsystems_id, "
+                                . "subsystems.product_id AS subsystems_productId, "
+                                . "subsystems.name AS subsystems_name "
+                         . "FROM subsystems "
+                         . "ORDER BY subsystems_id ASC ";
+        $execSubsystems = mysqli_query($conSubsystems, $querySubsystems);
+    // オプション部分作成
+        $listRawSubsystems = array();
+        while($listSubsystems2 = mysqli_fetch_array($execSubsystems)) {
+                array_push($listRawSubsystems, ['value' => $listSubsystems2['subsystems_id'], 'class' => 'p' . $listSubsystems2['subsystems_productId'], 'text' => $listSubsystems2['subsystems_name']]);
+        }
+        $this->set("subsystems", $listRawSubsystems);
+    // 検索結果（HandleSubsystems）
+    // DB接続例：mysqli_xxx関数を使う
+        $conHandleSubsystems = mysqli_connect('localhost', 'root', '', 'sdsm');
+        $queryHandleSubsystems = "SELECT handle_subsystems.id AS handle_subsystems_id, "
+                                      . "handle_subsystems.subsystem_id AS handle_subsystems_subsystemId, "
+                                      . "handle_subsystems.account_id AS handle_subsystems_accountId, "
+                                      . "accounts.name AS accounts_name "
+                               . "FROM handle_subsystems "
+                               . "LEFT JOIN accounts "
+                               . "ON handle_subsystems.account_id = accounts.id "
+                               . "ORDER BY handle_subsystems_id ASC ";
+        $execHandleSubsystems = mysqli_query($conHandleSubsystems, $queryHandleSubsystems);
+    // オプション部分作成
+        $listRawHandleSubsystems = array();
+        while($listHandleSubsystems2 = mysqli_fetch_array($execHandleSubsystems)) {
+                array_push($listRawHandleSubsystems, ['value' => $listHandleSubsystems2['handle_subsystems_accountId'], 'class' => 'p' . $listHandleSubsystems2['handle_subsystems_subsystemId'], 'text' => $listHandleSubsystems2['accounts_name']]);
+        }
+        $this->set("handleSubsystemAccounts", $listRawHandleSubsystems);
+// 検索ボタン押下処理
+if ($this->request->isPost()) {
+    // セレクトボックス(マルチ)から値取得
+    // 人
+    $selectAccountNM = array();
+    $selectAccountID = array();
+    $hogehoge ="";
+    foreach($this->request->data('LoadchartForm.SelectAccountNM') as $keyAcc => $valAcc) {
+        $v_strAcc = '';
+        foreach((array)$valAcc as $vAcc) {
+            $v_strAcc .= $vAcc . ' ';
+        }
+        $hogehoge .= $keyAcc . ' => ' . $v_strAcc;
+        $hogehoge = "";
+        array_push($selectAccountNM, "working_details.account_id = " . $v_strAcc);
+        array_push($selectAccountID, "accounts.id = " . $v_strAcc);
+    }
+    $dataAccountLists = "";
+    $dataAccountIdLists = "";
+    $cntDataAccounts = count($selectAccountNM);
+    for ($i=1; $i<$cntDataAccounts; $i++) {
+        $dataAccountLists .= $selectAccountNM[$i-1] . " OR ";
+        $dataAccountIdLists .= $selectAccountID[$i-1] . " OR ";
+    }
+    $dataAccountLists .= $selectAccountNM[$cntDataAccounts-1];
+    $dataAccountIdLists .= $selectAccountID[$cntDataAccounts-1];
+}
 ```
-になると思います。
-これをプルダウン連動システムと関連付けるため、
-```
-<option Value='1' class='p1'>りんご</option>
-<option Value='2' class='p1'>みかん</option>
-<option Value='3' class='p2'>ゴリラ</option>
-<option Value='4' class='p2'>キリン</option>
-```
-のように,
-```
-class='p*'
-```
-を文中に組み込みたいです。
-色々と調べたのですが、同じようなサンプルを探すことができず、行き詰ってしまいました。
-Controller側でSQLを組み、
-```
-$listDatas = (
-"<option Value='1' class='p1'>りんご</option>"
-"<option Value='2' class='p1'>みかん</option>"
-"<option Value='3' class='p2'>ゴリラ</option>"
-"<option Value='4' class='p2'>キリン</option>"
-);
-$this->set("listDatas", $listDatas);
-```
-を作成し、index側に渡しています。
-index側では
-```
-<select name="selectNM" id="selectID" size="10" disabled="disabled" multiple="multiple">
-<?= $listDatas ?>
-</select>
-```
-と作成しています。
-これを上記に書いたとおり、
-```
-<?=$this->Form->select('selectNM',・・・・・・・・); ?>
-```
-のFormHelper形式で書きたいです。
-現状の方式でも表示はされているのですが、上記をキーとして検索をかけると初期化されてしまいます。
-サイトを読むと、FormHelper形式で書くと、検索後もデータが保持されるみたいなので。
-わかりにくい説明文ですが、サンプルソースや参照サイトなどアドバイス等を宜しくお願い致します。
-もし、検索キーの保持のやり方が別にあり、そちらで実現できればそちらでもＯＫです。

コードをわかりやすい表示形式に変えました。

2017/09/01 06:05

投稿

noranuko

スコア12

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,14 +1,26 @@
 ###前提・実現したいこと
 PHP(CakePHP)で連動プルダウンを使用した検索システムを作っています。
+検索後に値を保持した状態にしたいです。
+※現在は検索後、検索キーが初期化される。
 FormHelperを使用して作成しようとしているのですが、
 以下のサンプルのように書くと、
+```
 echo $this->Form->select('flag',array(1=>'りんご',2=>'みかん'3=>'ゴリラ',4=>'キリン'),,array('empty'=>false));
+```
 オプション部分が
+```
 <option Value='1'>りんご</option>
@@ -18,11 +30,17 @@
 <option Value='4'>キリン</option>
+```
 になると思います。
 これをプルダウン連動システムと関連付けるため、
+```
 <option Value='1' class='p1'>りんご</option>
@@ -32,14 +50,88 @@
 <option Value='4' class='p2'>キリン</option>
+```
+のように,
+```
-のように、「class='p*'」を文中に組み込みたいです。
+class='p*'
+```
+を文中に組み込みたいです。
-色々と調べたのですが、行き詰ってしまいました。
+色々と調べたのですが、同じようなサンプルを探すことができず、行き詰ってしまいました。
+Controller側でSQLを組み、
+```
+$listDatas = (
+"<option Value='1' class='p1'>りんご</option>"
+"<option Value='2' class='p1'>みかん</option>"
+"<option Value='3' class='p2'>ゴリラ</option>"
+"<option Value='4' class='p2'>キリン</option>"
+);
+$this->set("listDatas", $listDatas);
+```
+を作成し、index側に渡しています。
+index側では
+```
+<select name="selectNM" id="selectID" size="10" disabled="disabled" multiple="multiple">
+<?= $listDatas ?>
+</select>
+```
+と作成しています。
+これを上記に書いたとおり、
+```
+<?=$this->Form->select('selectNM',・・・・・・・・); ?>
+```
+のFormHelper形式で書きたいです。
+現状の方式でも表示はされているのですが、上記をキーとして検索をかけると初期化されてしまいます。
+サイトを読むと、FormHelper形式で書くと、検索後もデータが保持されるみたいなので。
 わかりにくい説明文ですが、サンプルソースや参照サイトなどアドバイス等を宜しくお願い致します。
+もし、検索キーの保持のやり方が別にあり、そちらで実現できればそちらでもＯＫです。