當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

[转]Laravel与bootstrap-editable实现table的行内编辑

發布時間：2023/12/20 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 [转]Laravel与bootstrap-editable实现table的行内编辑小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

準備需要的庫

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

前端處理

引入庫

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

bootstrap引入

bootstrap-table引入

x-editable-develop引入

html代碼

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

可以看到里面有很多bootstrap-table的屬性，可以大家可以查閱官方文檔，當然bootstrap-table的屬性可以在js代碼中設置

js代碼

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

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模板加上

在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

轉載于:https://www.cnblogs.com/ustc-rjgc2017/p/8443556.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： JavaScript If…Else 语
下一篇： JavaScript---设计模式之观察