除了那些bootstrap/bootstrap table的js , css之外,要额外添加editable的文件:
-
<link href="../assets/css/bootstrap-editable/bootstrap-editable.css" rel="stylesheet">
-
<script src="../assets/js/bootstrap-editable/bootstrap-editable.js"></script>
-
<script src="../assets/js/bootstrap-editable/bootstrap-table-editable.js"></script>
然后写js
-
$( '#tableId').bootstrapTable({
-
data:data['data'],
-
pagination: true,
-
locale:"zh-US",
-
pageSize: 5,
-
singleSelect: false,
-
clickToSelect: true,//一定要写!!可以选择:用于edittable
-
sidePagination: "client",
-
columns: [
-
{
-
title: '姓名',
-
field: 'name',
-
align: 'center',
-
valign: 'middle'
-
},{
-
title: '年龄',
-
field: 'age',
-
align: 'center',
-
valign: 'middle',
-
editable: {
-
type: 'text',
-
title: '年龄',
-
validate: function (v) {
-
if (!v) return '不能为空';
-
}
-
}
-
},{
-
title: '操作',
-
field: 'id',
-
align: 'center',
-
valign: 'middle',
-
formatter:function (value, data, index) {
-
var d = '<button type="button" class="btn btn-danger" οnclick="del(\'' + data.id + '\')" >删除</button>';
-
return d;
-
}
-
}
-
],
-
onEditableSave: function (field, row, oldValue, $el) {//提交行内编辑数据
-
debugger;
-
console.info(row);
-
$.ajax({
-
type: "post",
-
url: "/test/edit",
-
/*data: row,*/
-
data:{ "name": row.name,"age":row.age},
-
dataType: 'JSON',
-
success: function (data, status) {
-
if (status == "success") {
-
alert( '成功');
-
}
-
},
-
error: function () {
-
alert( '失败');
-
},
-
-
});
-
}
-
});
来源:oschina
链接:https://my.oschina.net/u/4404738/blog/3411791