jquery.tabledit jqueryその場で編集 inplaceeditor

これが一番使いやすいのでメモ

<? $this->start('script');//script or css?>

    <script src="/js/jquery.tabledit.min.js"></script>

<script>

    $(function () {
        $('#example1').Tabledit({
            url: '/hoges/table_ajax/99/',
            columns: {
                identifier: [0, 'id'],
                editable: [[1, 'nickname'], [2, 'firstname'], [3, 'lastname']]
            },
            onAjax: function(action, serialize) {

                //Ajax開始時
                console.log('onAjax(action, serialize)');
                console.log(action);
                console.log(serialize);
            },
            onSuccess: function(data, textStatus, jqXHR) {


                console.log('onSuccess(data, textStatus, jqXHR)');
                console.log(data);
                console.log(textStatus);
                console.log(jqXHR);
            },
            buttons: {
                edit: {
                    class: 'btn btn-sm btn-default',
                    html: '<span class="glyphicon glyphicon-pencil"></span>',
                    action: 'edit'
                },
                delete: {
                    class: 'btn btn-sm btn-default',
                    html: '<span class="glyphicon glyphicon-trash"></span>',
                    action: 'delete'
                },
                save: {
                    class: 'btn btn-sm btn-success',
                    html: '保存'
                },
                restore: {
                    class: 'btn btn-sm btn-warning',
                    html: 'Restore',
                    action: 'restore'
                },
                confirm: {
                    class: 'btn btn-sm btn-danger',
                    html: '削除'
                }
            }
        });
    });

</script>

<? $this->end(); ?>


    <div role="tabpanel" class="tab-pane fade active in" id="table1">
        <div class="table-responsive">
            <table class="table table-striped table-bordered" id="example1">
                <thead>
                <tr>
                    <th>#</th>
                    <th>Nickname</th>
                    <th>Firstname</th>
                    <th>Lastname</th>
                </thead>
                <tbody>
                <tr id="1">
                    <td>1</td>
                    <td>markcell</td>
                    <td>Celso</td>
                    <td>Marques</td>
                </tr>

                <tr id="2">
                    <td>2</td>
                    <td>markcell</td>
                    <td>Celso</td>
                    <td>Marques</td>
                    </tr>

                </tbody>
            </table>
        </div>
    </div>

一応スマホでも動く。