bootstrap editable 行内编辑

除了那些bootstrap/bootstrap table的js , css之外，要额外添加editable的文件：

1. <link href="../assets/css/bootstrap-editable/bootstrap-editable.css" rel="stylesheet">
2. <script src="../assets/js/bootstrap-editable/bootstrap-editable.js"></script>
3. <script src="../assets/js/bootstrap-editable/bootstrap-table-editable.js"></script>

然后写js

1. $( '#tableId').bootstrapTable({
2. data:data['data'],
3. pagination: true,
4. locale:"zh-US",
5. pageSize: 5,
6. singleSelect: false,
7. clickToSelect: true,//一定要写！！可以选择：用于edittable
8. sidePagination: "client",
9. columns: [
10. {
11. title: '姓名',
12. field: 'name',
13. align: 'center',
14. valign: 'middle'
15. },{
16. title: '年龄',
17. field: 'age',
18. align: 'center',
19. valign: 'middle',
20. editable: {
21. type: 'text',
22. title: '年龄',
23. validate: function (v) {
24. if (!v) return '不能为空';
25. }
26. }
27. },{
28. title: '操作',
29. field: 'id',
30. align: 'center',
31. valign: 'middle',
32. formatter:function (value, data, index) {
33. var d = '<button type="button" class="btn btn-danger" οnclick="del(\'' + data.id + '\')" >删除</button>';
34. return d;
35. }
36. }
37. ],
38. onEditableSave: function (field, row, oldValue, $el) {//提交行内编辑数据
39. debugger;
40. console.info(row);
41. $.ajax({
42. type: "post",
43. url: "/test/edit",
44. /*data: row,*/
45. data:{ "name": row.name,"age":row.age},
46. dataType: 'JSON',
47. success: function (data, status) {
48. if (status == "success") {
49. alert( '成功');
50. }
51. },
52. error: function () {
53. alert( '失败');
54. },
55.  
56. });
57. }
58. });

来源：oschina

链接：https://my.oschina.net/u/4404738/blog/3411791