[轉]Laravel與bootstrap-editable實現table的行內編輯

【轉】Laravel與bootstrap-editable實現table的行內編輯

準備須要的庫

• bootstrap3.0下載
• bootstrap-table下載
• x-editable-develop下載

前端處理

引入庫

要使用插件，首先要在blade模板（或者說html）裏引入對應的js文件和css文件

• bootstrap引入

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
 <script src="bootstrap/js/jquery-1.11.2.min.js"></script>
 <script src="bootstrap/js/bootstrap.min.js"></script>

• bootstrap-table引入

<script src="bootstrap-table/dist/bootstrap-table.js" type="text/javascript"></script>
 <script src="bootstrap-table/dist/locale/bootstrap-table-zh-CN.js" type="text/javascript"></script>
 <link href="bootstrap-table/dist/bootstrap-table.css" rel="stylesheet">
 <script src="bootstrap-table/dist/extensions/editable/bootstrap-table-editable.js" type="text/javascript"></script>

• x-editable-develop引入

<script src="x-editable-develop/dist/bootstrap3-editable/js/bootstrap-editable.js" type="text/javascript"></script>

html代碼

在blade模板（html頁面）加入table代碼以下

<div class="container" z-index="-1">
    <!--表格-->
    <div class="row">
        <div class="col-lg-offset-1 col-lg-11   col-md-offset-1 col-md-11 col-sm-offset-1 col-sm-11 col-xs-offset-2 col-xs-10">
            <table id="StuTable" z-index="-1" dataclasses="table" data-undefined-text="-" data-striped="true"
                   data-sort-order="asc" data-sort-stable="true" data-pagination="true" data-page-number="1"
                   data-page-size="10" data-search="true"></table>
        </div>
    </div>
</div>

能夠看到裏面有不少bootstrap-table的屬性，能夠你們能夠查閱官方文檔，固然bootstrap-table的屬性能夠在js代碼中設置

js代碼

使用laravel做爲框架，咱們項目中使用的是課程->任務->學生成績的思路，因此暫時沒想到怎麼在js文件裏改對應的route，因此把url用route表示在blade模板裏，脫離數據庫，只討論對ajex交互的處理
js代碼以下

<script type="text/javascript">
        $(document).ready(function(){
            $('#StuTable').bootstrapTable({
                columns: [{
                    checkbox:true
                },
                    {
                        field: 'StuNumber',
                        title: '學生學號'
                    }, {
                        field: 'StuName',
                        title: '學生姓名'
                    }, {
                        field: 'StuScore',
                        title: '學生成績',
                        editable:{
                            type:"text"
                        }
                    }],
                url: "{{route("grade")}}",
                onEditableSave:function (field,row,oldvalue,$el) {
                    $.ajax({
                        type: "post",
                        url: "{{route('editable')}}",
                        data: row,
                        dataType: 'json',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                        },
                        success: function (data, status) {
                            if (status == "success") {
                                alert('提交數據成功');
                            }
                        },
                        error: function () {
                            alert('編輯失敗');
                        },
                        complete: function () {
                            alert('完成');
                        }
                    });
                }
            });
        });
    </script>

• columns中的代碼意義是，有勾選框，table的三列分別爲學生學號，學生姓名，學生成績，學生成績中的editable：true表示成績能夠進行編輯
• url中使用route給出了提供數據的對應的方法
• onEditableSave是在行內進行編輯的時候，對應的處理方法

後端處理

生成並給出json格式的數據

在url中咱們使用了url: "{{route("grade")}}"，因此在laravel對應的路由web.php中，咱們加入一條

Route::get('/grade','UsersController@grade')->name('grade');

這裏的控制器是本身隨便填的哈，我看到不少大佬都用AjexController，可是咱們項目中主要針對user，測試的時候我就用了UsersController，添加了一條grade方法

接下來要在grade方法中反饋json格式的數據

值得一提的是，若是不用後端返回的json數據的話，能夠去掉url那一條，加入data和對應的json數據，好比:

data: [{
            StuNumber:"PB15000000",
            StuName: "張三",
            StuScore: '98'
        }, {
            StuNumber:"PB15000000",
            StuName: '李四',
            StuScore: '100'
        }]

因此在grade方法中，咱們也要返回這樣的json數據，用一個二維索引數組，裏面的一維數組用關聯數組形式給出便可，代碼以下：

public function grade(){
         $arr=array(
             array("StuNumber"=>"PB15000000",
                    "StuName"=> '張三',
                    "StuScore"=> '98'),
             array("StuNumber"=>"PB15000001",
                    "StuName"=> '李四',
                    "StuScore"=> '100'));
         return json_encode($arr);
    }

json_encode函數會把數組轉化成json格式
因此如今咱們就能夠看到效果以下

點擊成績便可修改

修改數據傳給後端

接下來咱們要解決的就是修改數據的onEditableSave函數了
使用jQuery，咱們寫成以下形式

onEditableSave:function (field,row,oldvalue,$el) {
                    $.ajax({
                        type: "post",
                        url: "{{route('editable')}}",
                        data: row,
                        dataType: 'json',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                        },
                        success: function (data, status) {
                            if (status == "success") {
                                alert('提交數據成功');
                            }
                        },
                        error: function () {
                            alert('編輯失敗');
                        },
                        complete: function () {
                            alert('完成');
                        }
                    });
                }

這裏的row就是咱們一行對應的數據，須要傳到後端，插件會幫咱們轉成json格式，因此沒必要咱們操心
測試的時候我使用了post方法，解決方案以下

在blade模板加上

<meta name="_token" content="{{ csrf_token() }}"/>

在ajax函數中加入headers

headers: {
                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                        }

success表示成功時的輸出，error表示錯誤時的輸出，complete表示完成後的輸出

這裏的url依舊使用route表示，因此在web.php中加入post

Route::post('/editable','UsersController@editable')->name('editable');

對應的editable方法以下

public function editable(Request $request){
         //處理代碼
    }

其中的request對象裏就包含了的前端傳回的row的數據，因此咱們能夠像處理表單同樣，使用以下方式獲得須要的數據

$request->input('StuNumber')
$request->input('StuName')
$request->input('StuScore')

而後對數據庫進行操做便可

最後

此時咱們修改爲績，並使用瀏覽器的開發者模式，提交成功後能夠看到效果以下：

右下方有Form Data，就是傳給後端的數據

轉自http://blog.csdn.net/weixin_38312031