在准备使用X-editable来做Bootstrap Table 的行内编辑的时候，根据http://www.cnblogs.com/landea... 的文章，我不能将全部效果重复实现，网上也搜索了其他资料，大都是单独使用X-editable的，我需要是结合Bootstrap Table来实现行内编辑的。

其中单元格的text的普通编辑，是可以做到。但是下拉框却不行。截图看到的下拉框我是用Table的field.formatter强行添加的<select>. 并没有达到理想的效果。

代码：

  1. //引用部分
  2. //css
  3. <link href="/lib/Bootstrap/3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
  4. <link href="/lib/Bootstrap/BootstrapTable/bootstrap-table.css" rel="stylesheet">
  5. <link href="/lib/Bootstrap/BootstrapTable/x-editable/bootstrap-editable.css" rel="stylesheet">
  7. //js
  8. <script src="/lib/jquery/jquery-3.1.1.min.js"></script>
  9. <script src="/lib/Bootstrap/3.3.7-dist/js/bootstrap.min.js"></script>
  10. <script src="/lib/Bootstrap/BootstrapTable/bootstrap-table.js"></script>
  11. <script src="/lib/Bootstrap/BootstrapTable/x-editable/bootstrap-editable.js"></script>
  12. <script src="/lib/Bootstrap/bootstrap-treeview/js/bootstrap-treeview.js"></script>
  13. <script src="/lib/Bootstrap/datapicker/bootstrap-datepicker.js"></script>
  15. //HTML
  16. <body>
  17.     <div id="familInfo">
  18.     </div>
  19. </body>
  21. //js
  22. $('#familTable').bootstrapTable({
  23.                         editable: false,//开启编辑模式
  24.                         toolbar: '#tbar_famil',
  25.                         search: true,
  26.                         showColumns: true, // 开启自定义列显示功能
  27.                         dataType: 'json',
  28.                         striped: true,
  29.                         sidePagination: 'server',//设置为服务器端分页
  30.                         pagination: true,
  31.                         pageList: [10, 25, 50, 100],
  32.                         columns: [{ checkbox: true },
  33.                         { field: 'id', title: 'ID', visible: false },
  34.                         { field: 'isMember', title: '是否会员' },
  35.                         {
  36.                             field: 'name', title: '名称',
  37.                             formatter:function(value,row,index){
  38.                                 var strHtml ='<a class="editable editable-click">'+ value +'</a>';
  39.                                 return strHtml;
  40.                             }
  41.                         },
  42.                         { field: 'relationShip', title: '关系' ,
  43.                             formatter:function(value,row,index){
  44.                                 // $(this).editable();
  45.                                 //var strHtml ='<a class="editable editable-click" data-relationship>'+ value/*row.actionName*/ +'</a>';
  46.                                 var strHtml ='<select class="show-tick" id="relationShip"><option value="夫妻">夫妻</option><option value="父女">父女</option></select>'
  47.                                 return strHtml;
  48.                             }
  49.                         },
  50.                         { field: 'gender', title: '性别',
  51.                             formatter:function(value,row,index){
  52.                                 // $(this).editable();
  53.                                 //var strHtml ='<a class="editable editable-click" data-relationship>'+ value/*row.actionName*/ +'</a>';
  54.                                 var strHtml ='<select class="show-tick " id="relationShip"><option value="男">男</option><option value="女">女</option></select>'
  55.                                 return strHtml;
  56.                             }
  57.                         },
  58.                         { field: 'idcard', title: '身份证',
  59.                             formatter:function(value,row,index){
  60.                                 var strHtml ='<a class="editable editable-click">'+ value +'</a>';
  61.                                 return strHtml;
  62.                             }
  63.                         },
  64.                         { field: 'birthday', title: '生日' ,
  65.                             formatter:function(value,row,index){
  66.                                 var strHtml ='<a class="editable editable-click">'+ value +'</a>';
  67.                                 return strHtml;
  68.                             }
  69.                         },
  70.                         { field: 'mobilePhone', title: '手机'  ,
  71.                             formatter:function(value,row,index){
  72.                                 var strHtml ='<a class="editable editable-click">'+ value +'</a>';
  73.                                 return strHtml;
  74.                             }
  75.                         },
  76.                         { field: 'nativePlace', title: '籍贯' },
  77.                         { field: 'party', title: '政治面貌' },
  78.                         { field: 'nation', title: '国籍' },
  79.                         { field: 'nationality', title: '民族' }
  81.                         ],
  82.                         onEditableHidden: function(field, row, $el, reason) { // 当编辑状态被隐藏时触发
  83.                             if(reason === 'save') {
  84.                                 var $td = $el.closest('tr').children();
  85.                                 $td.eq(-1).html((row.price*row.number).toFixed(2));
  86.                                 $el.closest('tr').next().find('.editable').editable('show'); //编辑状态向下一行移动
  87.                             } else if(reason === 'nochange') {
  88.                                 $el.closest('tr').next().find('.editable').editable('show');
  89.                             }
  90.                         },
  91.                         onClickRow: function (row, tr) {
  92.                             // memberID = row.id;
  93.                         }
  94.                     });
  95.                     //新增家庭成员
  96.                     $('#btn_addFamil').on('click', function () {
  97.                         $('#familTable').bootstrapTable('insertRow', { index: 0, row: { name: '测试' ,relationShip:'',mobilePhone:'',idcard:''} });
  98.                     });
  99.                     $.fn.editable.defaults.mode = 'inline';        //行内进行编辑.
  100.                     $.fn.editable.defaults.showbuttons = false;    //不显示按钮组.
  101.                     $.fn.editable.defaults.onblur ="submit";    //当焦点离开时以提交处理,默认是取消.
  102.                     //点击单元格既进行编辑
  103.                     $('#familTable').on( 'click', 'td:has(.editable)', function (e) {
  105.                         e.stopPropagation(); // 阻止事件的冒泡行为
  107.                         $(this).find('.editable').editable('show'); // 打开被点击单元格的编辑状态
  108.                     } );

我的问题：

  1. 如何完整的使用X-editable，我只是试出来了input的，其他下拉，时间等具体该怎么用？

  2. 我发现editable的text是能在界面上反应，但是用Table的getDate 获取数据时，这个修改的数据并不直接反应在data里，是什么回事，如何实现编辑后数据提交到data里？

希望得到各位的帮助，有源码的最好，不然给出具体的资料、思路也可。

Bootstrap Table 的X-editable插件怎么用的更多相关文章

  1. [前端插件]Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...

  2. bootstrap table 插件多语言切换

    在bootstrap中的bootstrap table 插件在多语言切换的审核,只需要如下操作 引入bootstrap-table-locale-all.js文件 $('#Grid').bootstr ...

  3. 使用bootstrap table 插件固定表头时 表头与表格内容无法对齐

    在使用bootstrap table开发后台管理系统,表格利用bootstrap-table插件来实现,使用bootstrap-table过程中,会出现表头错位的情况 表头对不齐效果: 解决的方法: ...

  4. bootstrap table插件动态加载表头

    这篇文章主要为大家详细介绍了bootstrap table插件动态加载表头,具有一定的参考价值,感兴趣的小伙伴们可以参考一下   bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫 ...

  5. 轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。

    Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...

  6. 在ASP.NET MVC中使用 Bootstrap table插件

    Bootstrap table: http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/ 1. 控制器代码: using Syst ...

  7. 利用BootStrap Table插件实现自己的弹出框分页。

    参考链接1:    官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/home/        开始使用:http://bootstrap-table. ...

  8. [转]手把手教你--Bootstrap Table表格插件及数据导出(可导出Excel2003及Exce2007)

    原文地址:https://blog.csdn.net/javayoucome/article/details/80081771 1.介绍 Bootstrap Table介绍见官网:http://boo ...

  9. bootstrap table 和 x-editable 使用方法

    最近需要做一些数据表格,有同事推荐EasyUI,但经过比较还是选择了Bootstrap,一款极为强大的表格组件,基于Bootstrap 的 jQuery .本文还将介绍Bootstrap-editab ...

随机推荐

  1. [Codeforces 1245D] Shichikuji and Power Grid (最小生成树)

    [Codeforces 1245D] Shichikuji and Power Grid (最小生成树) 题面 有n个城市,坐标为\((x_i,y_i)\),还有两个系数\(c_i,k_i\).在每个 ...

  2. Linux普通用户无法使用sudo

    问题描述: jenkins执行发布脚本,因为使用的是jenkins用户,所以有些shell命令需要 sudo 来执行,导致报错. + sudo rm -rf /usr/share/nginx/html ...

  3. ALS部署Spark集群入坑记

    [Stage 236:> (0 + 0) / 400]17/12/04 09:45:55 ERROR yarn.ApplicationMaster: User class threw excep ...

  4. 由对称性解2-SAT问题

    由对称性解2-SAT问题 (by 伍昱,03年IOI国家集训队论文ppt) 2-SAT: 2-SAT就是2判定性问题,是一种特殊的逻辑判定问题. 2-SAT问题有何特殊性?该如何求解? 我们从一道例题 ...

  5. ubuntu 安装mysql5.7

    一.Windows mysql5.6 解压版 安装 关于widnows平台上的安装教程,可参考百度经验: 链接:https://jingyan.baidu.com/article/f3ad7d0ffc ...

  6. TypeError: esri.layers.WMSLayer is not a constructor

    最近加载wms地图后,总是报这个错误,因为错误,导致后续的代码无法加载,导致无法功能使用. 原因是,由于方法公用,有的新功能在使用时,引用依赖包时,未引用完整,导致加载此处加载wms图层的时候, 报此 ...

  7. python字符串/列表/字典互相转换

    python字符串/列表/字典互相转换 目录 字符串与列表 字符串与字典 列表与字典 字符串与列表 字符串转列表 1.整体转换 str1 = 'hello world' print(str1.spli ...

  8. Apple历史应用以及开发工具版本（Xcode官方历史版本等等）

    1.Xcode 官方历史版本下载:(需要登录开发者账号) https://developer.apple.com/download/more/

  9. git和svn 及git使用&解决上线冲突

    一.svn git的工作流程 git 的工作流程图 二.git的基础使用 git 的安装 1.下载对应版本:https://git-scm.com/download 2.安装git:在选取安装路径的下 ...

  10. 2019-11-29-dotnet-使用-Qpush-快速从电脑到手机推送文字

    title author date CreateTime categories dotnet 使用 Qpush 快速从电脑到手机推送文字 lindexi 2019-11-29 08:58:57 +08 ...