RSS

edit in place データ編集(テキスト版)

25 1月

前リストをやって、テキストやってたんだけどそれは記事がなかった…。
なので備忘録的につけておきます。やりたいこと

  • データ一覧の特定のデータだけを非同期通信で変更したい
  • クリックしたらラベルがテキストボックスになって、データ編集してOKボタン押したら反映!素敵。
  • が、やりたい。
    ステップ1:用意するのはまず下記のソース。

    echo $javascript->link('jquery-1.3.2.min.js');
    echo $javascript->link('jquery.jeditable.js');
    

    jeditable.jsはここから取得いたしました。ここのリファレンスでもわかる人はわかると思われます。
    ステップ2:次に実際にIDをキーにしてモデルの一覧(ここでは仮にnameフィールドにしよう)を変更するメソッドを作成。

      function updatesystem(){
      	if($this->data){
      		App::import('Core','sanitize');
      		$name = Sanitize::clean($this->data['System']['name']);//これが変更したい値
      		$this->System->id = $this->data['System']['id'];//これをkeyにして変更する
      		if($this->System->saveField('name',$name)){//更新した
      			echo $name;//更新したら値を表示する
      			$this->autoRender = false;
      		}
      	}
      }
    

    これでおっけい。で、次にこの一覧を表示しているview側に以下のように値をセットする(view.ctp)
    ステップ3:

    <td nowrap>
    <div align="left" class="system" id="<?php echo $system['System']['id']; ?>"><?php echo $system['System']['name']; ?></div>
    </td>
    

    ポイントはここのdivタグじゃないだろうか。classに対象モデルをセットし、idにsysytemモデルのidの値をセットしている。
    ステップ4:今度は、このタグに囲まれた箇所をクリックしたときに編集モードになってデータ変更を行うスクリプトを書く。

    <script type="text/javascript">
    <!--
    $(function() {
        $('.system').editable('updatesystem', {//editableの第一引数はコントローラーに作成したメソッド(パスに注意)
            id        : 'data[System][id]',
            name      : 'data[System][name]',
            type      : 'text',//これ他になにがあったか忘れた…
            cancel    : 'Cancel',//キャンセルボタンの名前
            submit    : '保存',//これがボタンの名前
            tooltip   : '編集',
            placeholder : '編集'
       });
    });
    //-->
    

    ちなみに、RequestHandlerを読み込まなくても動くんだけど…なんでだろうな。
    Ajaxで呼ばれてるかどうかを判別するためのもののようだが…。情報補完しないといけませんな。
    ボタンのスタイルの設定をしたいんだけどできたっけな・・・グフッ

    ※こんな風にしたら、ボタンもキャンセルボタンもスタイルの指定ができたよ!
    あれ、テキストもスタイル指定したい><うわーん

    <script type="text/javascript">
    <!--
    $(function() {
        $('.system').editable('updatesystem', {
            width     : '300px',
            cssclass  : 'form',
            id        : 'data[System][id]',
            name      : 'data[System][name]',
            type      : 'text',
            cancel    : '<input type="submit" value="Cancel" class="button">',
            submit    : '<input type="submit" value="保存" class="button">',
            tooltip   : '編集',
            placeholder : '編集'
       });
    });
    //-->
    </script>
    
    広告
     
    コメントする

    投稿者: : 1月 25, 2010 投稿先 cakephp, javascript

     

    コメントを残す

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

    WordPress.com ロゴ

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

    Twitter 画像

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

    Facebook の写真

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

    Google+ フォト

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

    %s と連携中

     
    %d人のブロガーが「いいね」をつけました。