除了那些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. });


    梅花香自古寒来