【jQueryとCakephp】動的にTableを追加したり削除したりしてみた

わぁ。とってもいろいろやてみたよ。わぁ。
今回は、CakephpjQuery で動的に Table の追加削除をしてみんよ。ってお話。
今回は、長くなりそうだ。
所詮メモ書きなので…

何がやりたいのかというと、
1.セレクトボックスをチェンジすると、PHP にデータを送信する。
2.PHPでデータを受け取り、DBから多次元配列で取得を行う。んでjson
3.動的にTableを削除したり追加したりしたい。

まずいってみよー!
の前に、HTMLね。

<table class="table table-striped table-bordered table-condensed">
    <thead style="background-color:#eeeeee;">
        <tr>
            <th><nobr>テスト1行目</nobr></th>
            <th><nobr>スト2行目</nobr></th>
        </tr>
    </thead>
    <tbody id="targetTable">
    </tbody>
</table>

 

上記のHTML の id = "targetTable"に動的にtd と tr を追加していくよ。

 

1.セレクトボックスをチェンジしたときに発生するイベントを作成。

// 基本的な処理
$(document).ready( function(){
    $('#select').bind(
        "keyup keypress change",
        function(event){
            set_ajax($('#select'));
        }
    );
});

ここで、set_ajaxっていう function に飛ばすよね。

 

次に、set_ajax 関数の中身.

function set_ajax(select){
    var id = {selectId:select.val()};
    $.ajax({
        async:true,
        data:id,
        dataType:"json",
        success:function(data, textStatus){
            $('#targetTable').empty();
            jsonParser(data);
        },
        error:function(data, textStatus){
        },
        type:"POST",
        url:"\/caketest\/test\/changeSelect",
    });
    return;
}

 

おっと、empty() で、なんと、追加した削除が出来てしまうのですよ。
要は、削除して新しく毎回 table を更新するわけ。へぇ。
2.PHPからデータを取り出す
Cakephp なので、カンタンよ。

<?php
App::uses('AppController', 'Controller');
class TestsController extends AppController {
    // cakephp で db から値を取得
    public function changeSelect(){
        // ajax で受け取り
        if($this->request->is('ajax')){
            $this->autoLayout = false;
            $this->autoRender = false;

            if(isset($this->request->data['selectId'])){
                if($this->request->data['selectId'] !== ''){
                    // 取得
                    $getList = $this->Test->getTestIdName($this->request->data['seletId']);

                    // 取得
                    $list = array();
                    foreach($getList as $item){
                        $wk['name'] = $item['name'];
                        $wk['name2'] = $item['name2'];
                    
                        array_push($list, $wk);
                    }

                    // json 形式でわたす
                    echo json_encode($list);
                    exit;
                }
            }
        }
    }
}
?>

 

json形式で多次元配列になるよね! 次は、サクセスで帰って行きた時に受け取る関数を作るよ!

// json データを tbody に設定する
function jsonParser(data){
    if(data == ""){
        return;
    }

    // tbody の中身を作成する
    for(key in data){
        $('#targetTable').append('<tr>');
        for(key2 in data[key]){
            setMsg = '<td>' + data[key][key2] + '</td>';
    $('#targetTable').append(setMsg);
        }
        $('#targetTable').append('</tr>');
    }
    return;
}

 

これでいけるよ!きっと大丈夫よ!