Bootstrap Table 的X-editable插件怎么用

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

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

代码：

//引用部分

//css

<link href="/lib/Bootstrap/3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

<link href="/lib/Bootstrap/BootstrapTable/bootstrap-table.css" rel="stylesheet">

<link href="/lib/Bootstrap/BootstrapTable/x-editable/bootstrap-editable.css" rel="stylesheet">

//js

<script src="/lib/jquery/jquery-3.1.1.min.js"></script>

<script src="/lib/Bootstrap/3.3.7-dist/js/bootstrap.min.js"></script>

<script src="/lib/Bootstrap/BootstrapTable/bootstrap-table.js"></script>

<script src="/lib/Bootstrap/BootstrapTable/x-editable/bootstrap-editable.js"></script>

<script src="/lib/Bootstrap/bootstrap-treeview/js/bootstrap-treeview.js"></script>

<script src="/lib/Bootstrap/datapicker/bootstrap-datepicker.js"></script>

//HTML

<body>

    <div id="familInfo">

    </div>

</body>

//js

$('#familTable').bootstrapTable({

                        editable: false,//开启编辑模式

                        toolbar: '#tbar_famil',

                        search: true,

                        showColumns: true, // 开启自定义列显示功能

                        dataType: 'json',

                        striped: true,

                        sidePagination: 'server',//设置为服务器端分页

                        pagination: true,

                        pageList: [10, 25, 50, 100],

                        columns: [{ checkbox: true },

                        { field: 'id', title: 'ID', visible: false },

                        { field: 'isMember', title: '是否会员' },

                        {

                            field: 'name', title: '名称',

                            formatter:function(value,row,index){

                                var strHtml ='<a class="editable editable-click">'+ value +'</a>';

                                return strHtml;

                            }

                        },

                        { field: 'relationShip', title: '关系' ,

                            formatter:function(value,row,index){

                                // $(this).editable();

                                //var strHtml ='<a class="editable editable-click" data-relationship>'+ value/*row.actionName*/ +'</a>';

                                var strHtml ='<select class="show-tick" id="relationShip"><option value="夫妻">夫妻</option><option value="父女">父女</option></select>'

                                return strHtml;

                            }

                        },

                        { field: 'gender', title: '性别',

                            formatter:function(value,row,index){

                                // $(this).editable();

                                //var strHtml ='<a class="editable editable-click" data-relationship>'+ value/*row.actionName*/ +'</a>';

                                var strHtml ='<select class="show-tick " id="relationShip"><option value="男">男</option><option value="女">女</option></select>'

                                return strHtml;

                            }

                        },

                        { field: 'idcard', title: '身份证',

                            formatter:function(value,row,index){

                                var strHtml ='<a class="editable editable-click">'+ value +'</a>';

                                return strHtml;

                            }

                        },

                        { field: 'birthday', title: '生日' ,

                            formatter:function(value,row,index){

                                var strHtml ='<a class="editable editable-click">'+ value +'</a>';

                                return strHtml;

                            }

                        },

                        { field: 'mobilePhone', title: '手机'  ,

                            formatter:function(value,row,index){

                                var strHtml ='<a class="editable editable-click">'+ value +'</a>';

                                return strHtml;

                            }

                        },

                        { field: 'nativePlace', title: '籍贯' },

                        { field: 'party', title: '政治面貌' },

                        { field: 'nation', title: '国籍' },

                        { field: 'nationality', title: '民族' }

                        ],

                        onEditableHidden: function(field, row, $el, reason) { // 当编辑状态被隐藏时触发

                            if(reason === 'save') {

                                var $td = $el.closest('tr').children();

                                $td.eq(-1).html((row.price*row.number).toFixed(2));

                                $el.closest('tr').next().find('.editable').editable('show'); //编辑状态向下一行移动

                            } else if(reason === 'nochange') {

                                $el.closest('tr').next().find('.editable').editable('show');

                            }

                        },

                        onClickRow: function (row, tr) {

                            // memberID = row.id;

                        }

                    });

                    //新增家庭成员

                    $('#btn_addFamil').on('click', function () {

                        $('#familTable').bootstrapTable('insertRow', { index: 0, row: { name: '测试' ,relationShip:'',mobilePhone:'',idcard:''} });

                    });

                    $.fn.editable.defaults.mode = 'inline';        //行内进行编辑.

                    $.fn.editable.defaults.showbuttons = false;    //不显示按钮组.

                    $.fn.editable.defaults.onblur ="submit";    //当焦点离开时以提交处理,默认是取消.

                    //点击单元格既进行编辑

                    $('#familTable').on( 'click', 'td:has(.editable)', function (e) {

                        e.stopPropagation(); // 阻止事件的冒泡行为

                        $(this).find('.editable').editable('show'); // 打开被点击单元格的编辑状态

                    } );

我的问题：

如何完整的使用X-editable，我只是试出来了input的，其他下拉，时间等具体该怎么用？
我发现editable的text是能在界面上反应，但是用Table的getDate 获取数据时，这个修改的数据并不直接反应在data里，是什么回事，如何实现编辑后数据提交到data里？

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

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

[前端插件]Bootstrap Table服务器分页与在线编辑应用总结
先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...
bootstrap table 插件多语言切换
在bootstrap中的bootstrap table 插件在多语言切换的审核,只需要如下操作引入bootstrap-table-locale-all.js文件 $('#Grid').bootstr ...
使用bootstrap table 插件固定表头时表头与表格内容无法对齐
在使用bootstrap table开发后台管理系统,表格利用bootstrap-table插件来实现,使用bootstrap-table过程中,会出现表头错位的情况表头对不齐效果: 解决的方法: ...
bootstrap table插件动态加载表头
这篇文章主要为大家详细介绍了bootstrap table插件动态加载表头,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫 ...
轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。
Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...
在ASP.NET MVC中使用 Bootstrap table插件
Bootstrap table: http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/ 1. 控制器代码: using Syst ...
利用BootStrap Table插件实现自己的弹出框分页。
参考链接1: 官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/home/ 开始使用:http://bootstrap-table. ...
[转]手把手教你--Bootstrap Table表格插件及数据导出(可导出Excel2003及Exce2007)
原文地址:https://blog.csdn.net/javayoucome/article/details/80081771 1.介绍 Bootstrap Table介绍见官网:http://boo ...
bootstrap table 和 x-editable 使用方法
最近需要做一些数据表格,有同事推荐EasyUI,但经过比较还是选择了Bootstrap,一款极为强大的表格组件,基于Bootstrap 的 jQuery .本文还将介绍Bootstrap-editab ...

随机推荐

Hive开发中使用变量的两种方法
在使用hive开发数据分析代码时,经常会遇到需要改变运行参数的情况,比如select语句中对日期字段值的设定,可能不同时间想要看不同日期的数据,这就需要能动态改变日期的值.如果开发量较大.参数多的话, ...
通过sohu获取浏览器端IP地址
接口:http://pv.sohu.com/cityjson?ie=utf-8
PythonDay13
第十三章今日内容匿名函数内置函数二闭包匿名函数匿名函数就是一行函数,关键字是lambda lambda x:x# lambda 参数:返回值x 是普通函数的形参可以不定义形参:x 是普 ...
JavaSE--关键字
关键字 1.static 属于成员修饰符,被静态修饰符修饰的成员要使用类名直接调用,该成员优先于对象存在,属于类且被所有实例化对象共享,静态成员随着类的加载而加载. 访问权限:静态成员优先于对象加载致 ...
Elasticsearch入门教程(一)：Elasticsearch及插件安装
原文:Elasticsearch入门教程(一):Elasticsearch及插件安装版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:h ...
docker安装笔记
Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相 ...
CentOS7 yum安装配置 +redis主从配置
一.安装必要包 yum install gcc 二.linux下安装 #下载 wget http://download.redis.io/releases/redis-3.0.0.tar.gz tar ...
ceph对接openstack
一.使用rbd方式提供存储如下数据: (1)image(glance):保存glanc中的image: (2)volume(cinder)存储:保存cinder的volume:保存创建虚拟机时选择创建 ...
mysql查看库、表占用存储空间大小
http://blog.csdn.net/bzfys/article/details/55252962 1. 查看该数据库实例下所有库大小,得到的结果是以MB为单位 <span class=&q ...
vs开发之工程属性
1.建立工程最好使用自己创建工程然后把代码移过去 2.不要使用别人建立的工程直接导入(差异比较大的话),后面32位 64位配置属性可能造成冲突 3.冲突了还需要重新做上面 1

Bootstrap Table 的X-editable插件怎么用

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

随机推荐

热门专题