bootstrap editable 行内编辑

除了那些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

标签