cakephp jQuery でドロップダウンリスト選択、データ変更

  • cakephpでjqueryを使って一覧の特定のデータを変更したい。
  • テキストのものは以前やったことあるので楽そう。ドロップダウンリストを使いたい。
  • というわけでどうせまたあとから調べることになるだろうから…。自分的メモ。
    まず、準備。コントローラーに下記を追加(Ajax,RequestHandler)

      var $helpers = array('Html', 'Form','Ajax');
      public $components = array('RequestHandler');
    

    ここからjquery.jeditable.jsをダウンロードし、
    app/webroot/に設置。もちろんjquery.jsも設置。

    コーディング的には…
    ・クリックしたときにドロップダウンリストを表示するが、そのときのデータを取得する。
    ・クリックしてリスト内容を変更した場合に、データを更新する。
    ・更新処理をphp側に投げるjavascriptファイルを作成
    というわけでまずドロップダウンリストを表示するためのデータを取得する。
    コントローラーに下記のようなメソッドを追加。

    //好きなモデルからデータを取得すればよい。
      public $result_array =array(
        			'0'=>'だいぶよし',
      			'1'=>'なかなか順調',
      			'2'=>'それなり',
      			'3'=>'もんだいあり', 
        		    '4'=>'大変な事態'
      			);
    
       //リストの中身を返す
        function liststatus(){
    		 echo json_encode($this->result_array);//ここで配列をセット
    		 //描画しないのでFalseをセットする。そうじゃないとviewがないとエラーになる。
    		 $this->autoRender = false;		    	
        }
    

    次にデータをセットするプログラム。

      //Studentモデルのresultフィールドが更新対象。
        function updateStatus(){
            if ($this->data) {
                //クリックして変更
                App::import('Core', 'sanitize');//おまじない
         //変更対象の値
                $result = Sanitize::clean($this->data['Student']['result']);
                $this->Student->id = $this->data['Student']['id'];//key情報
                $this->Student->saveField('result', $result);//更新を行う。
                //テキストのようなものはそのまま返せば良い。
         //リストに表示される文字列を最後に返すこと。
                echo $this->result_array[$result];
                //Viewを使用しないのでfalseに設定する
                $this->autoRender = false;
            }
        }
    

    これでphp側は終わり。結構楽チン!(だいぶ時間かかったけど…)
    次にjsファイル。個別に作ってみた。こんな感じ。update_status.js

        $('.result').editable('/hogeContoroller/updateStatus', {
        	//コントローラーのメソッドからリストボックスのデータを読み込む。
           //loadurl で先ほどの配列を参照できる。
       //データーベースから取得する必要がない場合は
       ////data   : " {'0':'だいぶよし','1':'なかなか順調','2':'それなり','3':'問題あり','4':'大変な事態'}",
        	loadurl : '/hogeContoroller/liststatus',
            id        : 'data[Student][id]',
            name      : 'data[Student][result]',
            type   : 'select',
            submit : 'OK'
       });
    

    あとは

    <script type="text/javascript" src="/js/update_status.js"></script>
    <script type="text/javascript" src="/js/jquery.js"></script>
    

    な感じで書いたスクリプトやらwebrootにおいたファイルを読み込ませればよし。
    配列で書いた箇所はコントローラーなので、データベースからデータを動的に取ってくることが可能なので非常に使い勝手があると思います。まあもっといろいろわかればスマートにかける気がしないでもない。

    広告

    コメントを残す

    以下に詳細を記入するか、アイコンをクリックしてログインしてください。

    WordPress.com ロゴ

    WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

    Twitter 画像

    Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

    Facebook の写真

    Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

    Google+ フォト

    Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

    %s と連携中