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 ...
随机推荐
- 修建泳池&最大子矩阵
[题目描述] 夏天到了,学校打算在教学楼后面的空地上挖一个泳池供大家使用. 经过实地勘察,这块土地可以划分成N 行M 列的方格,有的方格是树,有的方格是空地.现在要找一块最大的矩形空地修建泳池,请问泳 ...
- python告诉你啥是佩奇
被<啥是佩奇>这支广告片刷屏了. 佩奇明明是个喜剧角色, 但是看哭了所有人. <啥是佩奇>??? 效果图如下: # -*- coding:utf-8 -*- from turt ...
- MySql 面试开发技术点汇总
表结构设计 1.为什么一定要设一个主键? 答:因为你不设主键的情况下,innodb也会帮你生成一个隐藏列,作为自增主键.所以啦,反正都要生成一个主键,那你还不如自己指定一个主键,在有些情况下,就能显 ...
- Codeforces 1220B. Multiplication Table
传送门 冷静分析容易发现,我们只要能确定一个数的值,所有值也就可以确定了 确定一个数的值很容易,$a_ia_j=M_{i,j},a_ia_k=M_{i,k},a_ja_k=M_{j,k}$ 然后就可以 ...
- 用SQL存储过程生成唯一单据号
用SQL存储过程生成唯一单据号 在一些系统中,经理要生成单据号,为了不使多台客户端生成的单据号重复,一般要在服务端生成这种流水号,本文是在数据库中生成流水号,并且可以生成多种类型的单据号(比如 ...
- 13.AutoMapper 之映射前后(Before and After Map Action)
https://www.jianshu.com/p/1ff732094f21 映射前后(Before and After Map Action) 你可能偶尔需要在映射发生前后执行自定义逻辑.这应该很少 ...
- 089、初探ELK （2019-05-13 周一）
参考https://www.cnblogs.com/CloudMan6/p/7770916.html 在开源的日志管理方案中,最出名的莫过于ELK了.ELK是三个软件的合称: Elasticsea ...
- Centos下安装nc命令工具安装以及使用
1)netcat(nc)是一个简单而有用的工具,被誉为网络安全界的“瑞士军刀”,不仅可以通过使用TCP或UDP协议的网络连接读写数据,同时还是一个功能强大的网络调试和探测工具,能够建立你需要的几乎所有 ...
- 1-Kubernetes基本概念
Kubernetes中的大部分概念如Node.Pod.Replication Controller.Service等都可以看作一种"资源对象",几乎所有的资源对象都可以通过Kube ...
- python 解决cv2绘制中文乱码
因为使用cv2.putText() 只能显示英文字符,中文会出现乱码问题, 因此使用PIL在图片上绘制添加中文,可以指定字体文件. 大体思路: OpenCV图片格式转换成PIL的图片格式: 使用PIL ...