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

bootstrap editable 行内编辑的更多相关文章

  1. BootStrap行内编辑

    Bootstrap行内编辑,这里下载了一个X-Editable的插件,在Nuget里面就可以搜到. 引用的js和css大致如下: @*.Jquery组件引用*@ <script src=&quo ...

  2. JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

    前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...

  3. [转]JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

    本文转自:http://www.cnblogs.com/landeanfen/p/5821192.html 阅读目录 一.x-editable组件介绍 二.bootstrapTable行内编辑初始方案 ...

  4. js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable

    js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 一.总结 一句话总结:bootstrap能够做为最火的框架,绝对不仅仅只有我看到的位置,它应该还有很多位置可 ...

  5. Django项目:CRM(客户关系管理系统)--69--59PerfectCRM实现king_admin行内编辑

    #base_admin.py # ————————24PerfectCRM实现King_admin自定义操作数据———————— from django.shortcuts import render ...

  6. jQuery EasyUI 数据网格 - 启用行内编辑(转自http://www.runoob.com/jeasyui/jeasyui-datagrid-datagrid12.html)

    可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行.本教程向您展示如何创建一个数据网格(datagrid)和内联 ...

  7. Dynamics 365新功能:可编辑的网格(行内编辑)

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复238或者20161127可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...

  8. bootstrap-editable实现bootstrap-table行内编辑

    bootstrap-editable行内编辑效果如下: 需要引入插件 列初始化代码,为可编辑的列添加editable属性: columns = [ { title: '文件名', field: 'Na ...

  9. 雷林鹏分享:jQuery EasyUI 数据网格 - 启用行内编辑

    jQuery EasyUI 数据网格 - 启用行内编辑 可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行. 本 ...

随机推荐

  1. 云服务器以及linux操作系统打开防火墙,在墙上开一个小口

    在服务器运行时,需要在某个端口上开一个小口,以供外部访问 执行命令/sbin/iptables -I INPUT -p tcp --dport 8080 -j ACCEPT 8080为端口号,需要开的 ...

  2. 【字符串大模拟】潜伏者—— NOIP2009原题

    洛谷连接 就一道黄题没啥可以说的……就是要细心…… 学到了神奇的优化 ios::sync_with_stdio(false); cin优化,能跑的比scanf快!棒!(不过要开std) 这题真的还挺简 ...

  3. CF 1178E Archaeology 题解

    题面 这道题竟然是E?还是洛谷中的黑题? wow~!! 于是就做了一下: 然后一下就A了:(这并不代表想的容易,而是写的容易) 这道题就是骗人的!! 什么manacher,什么回文自动机,去靠一边站着 ...

  4. Ubuntu16.04.1安装Caffe(GPU)

    Caffe的优势: 1.上手快:模型与相应优化均以文本形式而非代码形式给出,caffe给出了模型的定义,最优化设置以及预训练的权重 2.速度快:与CuDNN结合使用,测试AlexNet模型,在K40上 ...

  5. 一个Accecc_Token生成和缓存和读取类,微信/小程序开发必须学

    Access_Token是调用微信和小程序各种接口的临时凭证,有效期2小时(7200秒),很多接口都需要调用access_token接口生成一个access_token的,例如微信支付,微信分享,公众 ...

  6. Fire Net HDU - 1045 (二分图匹配)

    题意: 给出一张图,图中'X'表示wall,'.'表示空地,可以放置blockhouse同一条直线上只能有一个blockhouse,除非有wall 隔开,问在给出的图中最多能放置多少个blockhou ...

  7. Elasticsearch入门教程(二):Elasticsearch核心概念

    原文:Elasticsearch入门教程(二):Elasticsearch核心概念 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:ht ...

  8. AGC015E Mr.Aoki Incubator

    atcoder luogu 首先可以考虑给一个人\(A\)染色.其他人被染色,要么被本来在后面的速度更快的人染色,要么被在前面的更慢的人染色.然后假设一个速度比最开始那个人慢的人\(B\)最后被染色了 ...

  9. Proxy&Reflect

    大部分时候我们使用的都是前置代理, 即我们把直接和代理对象进行交互(所有操作都发生在代理对象身上)的方式叫做前置代理. 那什么是后置代理? 借助原型链机制, 我们直接和 obj 进行交互而不是和代理对 ...

  10. vue学习之vue-resource的引入

    npm安装的命令 npm install vue-resource --save 安装完成后在main.js中导入 import  VueResource  from 'vue-resource' V ...