【轉(zhuǎn)】Laravel與bootstrap-editable實(shí)現(xiàn)table的行內(nèi)編輯

準(zhǔn)備需要的庫

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

前端處理

引入庫

要使用插件，首先要在blade模板（或者說html）里引入對應(yīng)的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的屬性，可以大家可以查閱官方文檔，當(dāng)然bootstrap-table的屬性可以在js代碼中設(shè)置

js代碼

使用laravel作為框架，我們項(xiàng)目中使用的是課程->任務(wù)->學(xué)生成績的思路，所以暫時沒想到怎么在js文件里改對應(yīng)的route，所以把url用route表示在blade模板里，脫離數(shù)據(jù)庫，只討論對ajex交互的處理
js代碼如下

<script type="text/javascript">$(document).ready(function(){$('#StuTable').bootstrapTable({columns: [{checkbox:true},{field: 'StuNumber',title: '學(xué)生學(xué)號'}, {field: 'StuName',title: '學(xué)生姓名'}, {field: 'StuScore',title: '學(xué)生成績',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('提交數(shù)據(jù)成功');}},error: function () {alert('編輯失敗');},complete: function () {alert('完成');}});}});});</script>

• columns中的代碼意義是，有勾選框，table的三列分別為學(xué)生學(xué)號，學(xué)生姓名，學(xué)生成績，學(xué)生成績中的editable：true表示成績可以進(jìn)行編輯
• url中使用route給出了提供數(shù)據(jù)的對應(yīng)的方法
• onEditableSave是在行內(nèi)進(jìn)行編輯的時候，對應(yīng)的處理方法

后端處理

生成并給出json格式的數(shù)據(jù)

在url中我們使用了url: "{{route("grade")}}"，所以在laravel對應(yīng)的路由web.php中，我們加入一條

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

這里的控制器是自己隨便填的哈，我看到很多大佬都用AjexController，但是我們項(xiàng)目中主要針對user，測試的時候我就用了UsersController，添加了一條grade方法

接下來要在grade方法中反饋json格式的數(shù)據(jù)

值得一提的是，如果不用后端返回的json數(shù)據(jù)的話，可以去掉url那一條，加入data和對應(yīng)的json數(shù)據(jù)，比如:

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

所以在grade方法中，我們也要返回這樣的json數(shù)據(jù)，用一個二維索引數(shù)組，里面的一維數(shù)組用關(guān)聯(lián)數(shù)組形式給出即可，代碼如下：

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

json_encode函數(shù)會把數(shù)組轉(zhuǎn)化成json格式
所以現(xiàn)在我們就可以看到效果如下

點(diǎn)擊成績即可修改

修改數(shù)據(jù)傳給后端

接下來我們要解決的就是修改數(shù)據(jù)的onEditableSave函數(shù)了
使用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('提交數(shù)據(jù)成功');}},error: function () {alert('編輯失敗');},complete: function () {alert('完成');}});}

這里的row就是我們一行對應(yīng)的數(shù)據(jù)，需要傳到后端，插件會幫我們轉(zhuǎn)成json格式，所以不必我們操心
測試的時候我使用了post方法，解決方案如下

在blade模板加上

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

在ajax函數(shù)中加入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');

對應(yīng)的editable方法如下

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

其中的request對象里就包含了的前端傳回的row的數(shù)據(jù)，所以我們可以像處理表單一樣，使用如下方式得到需要的數(shù)據(jù)

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

然后對數(shù)據(jù)庫進(jìn)行操作即可

最后

此時我們修改成績，并使用瀏覽器的開發(fā)者模式，提交成功后可以看到效果如下：

右下方有Form Data，就是傳給后端的數(shù)據(jù)

轉(zhuǎn)自http://blog.csdn.net/weixin_38312031

轉(zhuǎn)載于:https://www.cnblogs.com/ustc-rjgc2017/p/8443556.html

總結(jié)

以上是生活随笔為你收集整理的[转]Laravel与bootstrap-editable实现table的行内编辑的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。