要使用插件,首先要在blade模板(或者说html)里引入对应的js文件和css文件
- bootstrap引入javascript
<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>
<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>
<script src="x-editable-develop/dist/bootstrap3-editable/js/bootstrap-editable.js" type="text/javascript"></script>
在blade模板(html页面)加入table代码以下php
<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代码中设置css
使用laravel做为框架,咱们项目中使用的是课程->任务->学生成绩的思路,因此暂时没想到怎么在js文件里改对应的route,因此把url用route表示在blade模板里,脱离数据库,只讨论对ajex交互的处理
js代码以下html
<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>
editable:true
表示成绩能够进行编辑在url中咱们使用了url: "{{route("grade")}}"
,因此在laravel对应的路由web.php中,咱们加入一条前端
Route::get('/grade','UsersController@grade')->name('grade');
这里的控制器是本身随便填的哈,我看到不少大佬都用AjexController,可是咱们项目中主要针对user,测试的时候我就用了UsersController,添加了一条grade方法java
接下来要在grade方法中反馈json格式的数据jquery
值得一提的是,若是不用后端返回的json数据的话,能够去掉url那一条,加入data和对应的json数据,好比:laravel
data: [{ StuNumber:"PB15000000", StuName: "张三", StuScore: '98' }, { StuNumber:"PB15000000", StuName: '李四', StuScore: '100' }]
因此在grade方法中,咱们也要返回这样的json数据,用一个二维索引数组,里面的一维数组用关联数组形式给出便可,代码以下:git
public function grade(){
$arr=array(
array("StuNumber"=>"PB15000000",
"StuName"=> '张三',
"StuScore"=> '98'),
array("StuNumber"=>"PB15000001",
"StuName"=> '李四',
"StuScore"=> '100'));
return json_encode($arr);
}
json_encode
函数会把数组转化成json格式
因此如今咱们就能够看到效果以下
点击成绩便可修改
github
接下来咱们要解决的就是修改数据的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,就是传给后端的数据