bootstrap editable 行内编辑

随声附和 提交于 2020-11-27 04:44:10

除了那些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. });
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!