bootstrap表格 行编辑状态_JS组件系列——BootstrapTable 行内编辑解决方案:x-editable...
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件,遇到过一些坑,再此做个采坑记录吧!想要了解bootstrapTable的园友可以移步 JS组件系列——表格组件神器:bootstrap table。
一、x-editable组件介绍
x-editable组件是一个用于创建可编辑弹出框的插件,它支持三种风格的样式:bootstrap、Jquery UI、Jquery。大致效果如下图:
根据博主一贯的风格,这里肯定是选用第一种喽。首先还是给出开源地址吧。
1、x-editable初体验。
首先下载基于bootstrap的源码到本地。引用相关文件。
页面元素
用户名
js初始化
$(function() {
$('#username').editable();
});
效果展示
上面是通过html的data属性去设置x-editable的参数,当然,我也可以在初始化的时候去设置参数,比如,我仅仅给一个空的a标签:
用户名
js初始化
$(function() {
$('#username').editable({
type:"text", //编辑框的类型。支持text|textarea|select|date|checklist等
title: "用户名", //编辑框的标题
disabled: false, //是否禁用编辑
emptytext: "空文本", //空值的默认文本
mode: "inline", //编辑框的模式:支持popup和inline两种模式,默认是popup
validate: function (value) { //字段验证
if (!$.trim(value)) {return '不能为空';
}
}
});
});
查看效果
再来个稍微复杂一点的
选择部门
$(function() {
$('#department').editable({
type:"select", //编辑框的类型。支持text|textarea|select|date|checklist等
source: [{ value: 1, text: "开发部" }, { value: 2, text: "销售部" }, {value:3,text:"行政部"}],
title:"选择部门", //编辑框的标题
disabled: false, //是否禁用编辑
emptytext: "空文本", //空值的默认文本
mode: "popup", //编辑框的模式:支持popup和inline两种模式,默认是popup
validate: function (value) { //字段验证
if (!$.trim(value)) {return '不能为空';
}
}
});
});
查看效果
上文只是给出了一些常用字段,当然x-editable组件还有很多其他的功能参数,有兴趣可以看看文档,官方文档对每个参数都有详细的说明。
二、bootstrapTable行内编辑初始方案
说了这么半天,上面的只是铺垫,我们最终是希望在bootstrapTable里面实现行内编辑。根据上面的规则,我们想要使用x-editable实现行内编辑,表格的单元格里面必须要有一个a标签,然后对a标签做x-editable的初始化。有了这个想法,我们按照这种思路先试试。
引用相关文件
bootstrapTable的相关初始化
varcurRow={};
$(function() {
$("#tb_user").bootstrapTable({
toolbar:"#toolbar",
idField:"Id",
pagination:true,
showRefresh:true,
search:true,
clickToSelect:true,
queryParams:function(param) {return{};
},
url:"/Editable/GetUsers",
columns: [{
checkbox:true}, {
field:"UserName",
title:"用户名",
formatter:function(value, row, index) {return "" +value+ "";
}
}, {
field:"Age",
title:"年龄",
}, {
field:"Birthday",
title:"生日",
formatter:function(value, row, index) {vardate=eval('new' +eval(value).source)returndate.format("yyyy年MM月dd日");
}
},
{
field:"DeptName",
title:"部门"}, {
field:"Hodd",
title:"爱好"}],
onClickRow:function(row, $element) {
curRow=row;
},
onLoadSuccess:function(aa, bb, cc) {
$("#tb_user a").editable({
url:function(params) {varsName=$(this).attr("name");
curRow[sName]=params.value;
$.ajax({
type:'POST',
url:"/Editable/Edit",
data: curRow,
dataType:'JSON',
success:function(data, textStatus, jqXHR) {
alert('保存成功!');
},
error:function() { alert("error");}
});
},
type:'text'});
},});});
后台方法
publicJsonResult GetUsers()
{var lstRes = new List();
lstRes.Add(new User() { Id = "1", UserName = "张三", Age = 22, Birthday = Convert.ToDateTime("1994-12-21"), DeptId = "1", DeptName = "研发部"});
lstRes.Add(new User() { Id = "2", UserName = "李四", Age = 28, Birthday = Convert.ToDateTime("1988-09-09"), DeptId = "2", DeptName = "销售部"});
lstRes.Add(new User() { Id = "3", UserName = "风衣大叔", Age = 40, Birthday = Convert.ToDateTime("1976-09-01"), DeptId = "2", DeptName = "销售部"});
lstRes.Add(new User() { Id = "4", UserName = "闪电大虾", Age = 37, Birthday = Convert.ToDateTime("1979-03-12"), DeptId = "4", DeptName = "创意部"});
lstRes.Add(new User() { Id = "5", UserName = "韩梅梅", Age = 29, Birthday = Convert.ToDateTime("1987-05-01"), DeptId = "5", DeptName = "事业部"});returnJson(lstRes, JsonRequestBehavior.AllowGet);
}publicJsonResult Edit(User user)
{//反序列化之后更新
return Json(new{ }, JsonRequestBehavior.AllowGet);
}
后台测试方法
这样确实是可以实现想要的效果,貌似也能行内编辑了,可是如果没个列都需要行内编辑,并且列的个数很多,那么是不是每个列都得这样去formmater?并且这种写法狠显然很死板,博主着实难以接受。于是又找了找例子,发现在bootstrapTable的扩展里面存在bootstrap-table-editable.js这个js。
三、bootstrapTable行内编辑最终方案
好吧,博主承认,上面还是铺垫,因为博主觉得这可能是解决问题的一般思路,所以将这些铺垫的篇幅可能有点多。首先来看看bootstrap-table-editable.js这个文件
/**
* @author zhixin wen
* extensions: https://github.com/vitalets/x-editable*/
!function($) {'use strict';
$.extend($.fn.bootstrapTable.defaults, {
editable:true,
onEditableInit:function() {return false;
},
onEditableSave:function(field, row, oldValue, $el) {return false;
},
onEditableShown:function(field, row, $el, editable) {return false;
},
onEditableHidden:function(field, row, $el, reason) {return false;
}
});
$.extend($.fn.bootstrapTable.Constructor.EVENTS, {'editable-init.bs.table': 'onEditableInit','editable-save.bs.table': 'onEditableSave','editable-shown.bs.table': 'onEditableShown','editable-hidden.bs.table': 'onEditableHidden'});var BootstrapTable =$.fn.bootstrapTable.Constructor,
_initTable=BootstrapTable.prototype.initTable,
_initBody=BootstrapTable.prototype.initBody;
BootstrapTable.prototype.initTable= function() {var that = this;
_initTable.apply(this, Array.prototype.slice.apply(arguments));if (!this.options.editable) {return;
}
$.each(this.columns, function(i, column) {if (!column.editable) {return;
}var _formatter =column.formatter;
column.formatter= function(value, row, index) {var result = _formatter ?_formatter(value, row, index) : value;return ['' + ''].join('');
};
});
};
BootstrapTable.prototype.initBody= function() {var that = this;
_initBody.apply(this, Array.prototype.slice.apply(arguments));if (!this.options.editable) {return;
}
$.each(this.columns, function(i, column) {if (!column.editable) {return;
}
that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
.off('save').on('save', function(e, params) {var data =that.getData(),
index= $(this).parents('tr[data-index]').data('index'),
row=data[index],
oldValue=row[column.field];
row[column.field]=params.submitValue;
that.trigger('editable-save', column.field, row, oldValue, $(this));
});
that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
.off('shown').on('shown', function(e, editable) {var data =that.getData(),
index= $(this).parents('tr[data-index]').data('index'),
row=data[index];
that.trigger('editable-shown', column.field, row, $(this), editable);
});
that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
.off('hidden').on('hidden', function(e, reason) {var data =that.getData(),
index= $(this).parents('tr[data-index]').data('index'),
row=data[index];
that.trigger('editable-hidden', column.field, row, $(this), reason);
});
});this.trigger('editable-init');
};
}(jQuery);
bootstrap-table-editable.js
这个js其实是对x-editable做了一个简单的封装,增加了列的editable属性以及编辑保存后的一些事件。有了这个作为基础,于是我们行内编辑的代码变成了这样。
需要引用的文件如下:
1、文本框
$(function() {
$("#tb_user").bootstrapTable({
toolbar:"#toolbar",
idField:"Id",
pagination:true,
showRefresh:true,
search:true,
clickToSelect:true,
queryParams:function(param) {return{};
},
url:"/Editable/GetUsers",
columns: [{
checkbox:true}, {
field:"UserName",
title:"用户名",
editable: {
type:'text',
title:'用户名',
validate:function(v) {if (!v) return '用户名不能为空';
}
}
}, {
field:"Age",
title:"年龄",
}, {
field:"Birthday",
title:"生日",
formatter:function(value, row, index) {var date = eval('new ' +eval(value).source)return date.format("yyyy-MM-dd");
}},
{
field:"DeptName",
title:"部门"}, {
field:"Hobby",
title:"爱好"}],
onEditableSave:function(field, row, oldValue, $el) {
$.ajax({
type:"post",
url:"/Editable/Edit",
data: row,
dataType:'JSON',
success:function(data, status) {if (status == "success") {
alert('提交数据成功');
}
},
error:function() {
alert('编辑失败');
},
complete:function() {
}
});
}
});
});
后台对应的更新方法
publicJsonResult Edit(User user)
{//更新实体
return Json(new{ }, JsonRequestBehavior.AllowGet);
}
经过测试,用户名这一列基本可以自由编辑。同样,年龄这一列也可改成这样
{
field:"Age",
title:"年龄",
editable: {
type:'text',
title:'年龄',
validate:function(v) {if (isNaN(v)) return '年龄必须是数字';var age =parseInt(v);if (age <= 0) return '年龄必须是正整数';
}
}
}
其他基本不用做任何修改。
代码释疑:上文在初始化的columns属性里面通过editable属性来配置可编辑的参数,注意这里每个列的editable属性对应的Json对象即为x-editable里面的初始化的Json对象,也就是说我们初始化x-editable的时候可以配置哪些属性,在列的editable属性里面也可以同样配置,这样用起来就爽多了吧。编辑后的提交方法统一放到onEditableSave事件里面统一处理。
2、时间选择框
有了上面的知识作为基础,我们来初始化生日这一列:
{
field:"Birthday",
title:"生日",
formatter:function(value, row, index) {var date = eval('new ' +eval(value).source)return date.format("yyyy-MM-dd");
},
editable: {
type:'date',
title:'生日'}
}
其他地方不用做任何修改,得到效果:
这是x-editable的默认样式,如果你看着不爽,可以自行配置,x-editable提供了许多配置日期框的参数,如下:
当然,如果精确到时分秒,可以使用datetime类型的编辑框。如下是官方给出的时间框编辑效果,看着还不错。
3、下拉框
表单编辑里面还有一个重要的标签就是select了。上文我们知道x-editable为我们提供了下拉框的编辑模式,比如我们的部门这一列的编辑可以写成这样:
{
field:"DeptId",
title:"部门",
editable: {
type:'select',
title:'部门',
source:[{value:"1",text:"研发部"},{value:"2",text:"销售部"},{value:"3",text:"行政部"}]
}
}
得到效果
当然,这种本地设置数据源的方法肯定是不能满足我们需求的,因为很多情况下拉框里面的选项是从数据库远程得到的。当然x-editable也为我们考虑到了,比如我们可以这样写:
{
field:"DeptId",
title:"部门",
editable: {
type:'select',
title:'部门',
source:function() {var result =[];
$.ajax({
url:'/Editable/GetDepartments',
async:false,
type:"get",
data: {},
success:function(data, status) {
$.each(data,function(key, value) {
result.push({ value: value.ID, text: value.Name });
});
}
});returnresult;
}
}
}
后台我们配置一个方法
publicJsonResult GetDepartments()
{var lstRes = new List();
lstRes.Add(new Department() { ID = "1", Name = "研发部"});
lstRes.Add(new Department() { ID = "2", Name = "销售部"});
lstRes.Add(new Department() { ID = "3", Name = "行政部"});
lstRes.Add(new Department() { ID = "4", Name = "创意部"});
lstRes.Add(new Department() { ID = "5", Name = "事业部"});returnJson(lstRes, JsonRequestBehavior.AllowGet);
}
同样能达到我们想要的结果。
代码释疑:这里有一点需要说明一下,细心的园友可能发现了,我们这里的 field: "DeptId" ,为什么这里要配置DeptId而不是DeptName呢?很简单,因为我们需要和数据源里面的value值对应。
4、复选框
除了上述几种常见的编辑框,x-editable还为我们提供了复选框组的编辑。比如:
{
field:"Hobby",
title:"爱好",
editable: {
type:"checklist",
separator:",",
source: [{ value:'bsb', text: '篮球'},
{ value:'ftb', text: '足球'},
{ value:'wsm', text: '游泳'}],
}}
得到效果:
当然,如果远程数据,也可以使用类似上文的方法去取。
5、“阴魂不散”的select2
说到上文的复选框,博主不由自主又想到了Multiselect这些个东西,于是查找x-editable的文档,结果发现它不支持Multiselect,但是支持select2,也不知道这是不是一个好消息。根据博主自己的使用经历,也包括技术交流群里面的聊天经历,发现很多人在使用select2的时候都遇到过各种各样的样式问题,并且不太好解决。
既然x-editable支持select2,那我们就用用试试呗,反正官方demo说得挺好的,下面是官方demo的使用示例:
怀着忐忑的心情,博主自己尝试了一把。
引用select2文件
代码尝试
{
field:"Hobby",
title:"爱好",
editable: {
type:'select2',
title:'爱好',
name:'Hobby',
placement:'top',
success:function(response, newValue) {debugger;
},
error:function(response, newValue) {debugger;
},
url:function(params) {debugger;
},
source: [{ id:'bsb', text: '篮球'},
{ id:'ftb', text: '足球'},
{ id:'wsm', text: '游泳'}],
inputclass:'input-large',
select2: {
allowClear:true,
multiple:true,
}
}
}
得到结果:
结果发现select2的选中值不能正常传递到后台。反正博主试过各种参数,按照官方demo的写法也试过,均以失败告终。也不知道官方的demo如何成功的。这个问题先抛出来,如果有使用的园友欢迎指正与解答。后续如果博主解决了这个问题,也会在此更新。
四、总结
还有一个问题就是在编辑完成提交之后,博主在项目中遇到这样一个问题:如果提交之后的文本内容过多,表格的thead里面th的宽度和tbody里面td的宽度不对其的问题,看着相当恶心。但是在写demo的时候又没有遇到这个问题。在此还是将解决方案给出来。
就这么一句话解决你的困扰!
本篇介绍了下bootstrapTable结合x-editable实现行内编辑的使用。文中很多问题都是根据博主的使用经历来说明,如果你打算将它用起来,也可以试试。如果本文能够帮到你,欢迎推荐!
欢迎各位转载,但是未经作者本人同意,转载文章之后必须在文章页面明显位置给出作者和原文连接,否则保留追究法律责任的权利
bootstrap表格 行编辑状态_JS组件系列——BootstrapTable 行内编辑解决方案:x-editable...相关推荐
- JS组件系列——BootstrapTable 行内编辑解决方案:x-editable
JS组件系列--BootstrapTable 行内编辑解决方案:x-editable 参考文章: (1)JS组件系列--BootstrapTable 行内编辑解决方案:x-editable (2)ht ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(三):两个Viewmodel搞定增删改查
JS组件系列--BootstrapTable+KnockoutJS实现增删改查解决方案(三):两个Viewmodel搞定增删改查 参考文章: (1)JS组件系列--BootstrapTable+Kno ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一)
JS组件系列--BootstrapTable+KnockoutJS实现增删改查解决方案(一) 参考文章: (1)JS组件系列--BootstrapTable+KnockoutJS实现增删改查解决方案( ...
- bootstrap表格 行编辑状态_JS表格组件BootstrapTable行内编辑解决方案x-editable
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...
- bootstraptable 汇总_JS组件系列——表格组件神器:bootstrap table
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- bootstrapr表格父子框_JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)...
前言:上篇 JS组件系列--表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- bootstrapr表格父子框_JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】...
Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...
- js设置html不可编辑状态,JS_设置弹出页面的地址栏不可编辑
JS_如何设置弹出页面的外观,地址栏不可编辑:如下所示: 参数解释: window.open 弹出新窗口的命令: 'page.html' 弹出窗口的文件名: 'newwindow' 弹出窗口的名字(不 ...
- bootstrap- 行内编辑
懒得安分 每一次想到未来掌握在自己手中,就忍不住笑了~~ 项目合作,联系博主!技术交流,欢迎加群!群一.二.三.四.五.六已满!群七(前端):647134285:群八(后端):702549620. ...
最新文章
- 毛永胜计算机教师,中国文化中心笛子教师与毛国立音乐学院师生交流
- 115页Slides带你领略深度生成模型全貌(附PPT)
- 「译」在JavaScript中将值转换为字符串的5种方法
- Python编程基础:第五节 用户输入User Input
- AnsroidStudio中提示:Failed to find configured root that contain
- MySQL编程技巧_PHP与MySQL开发的8个技巧小结
- 有关数据库表被锁定的问题
- Vim-latex 插件 的安装
- 一场全能的开发者大会,来自助力开发者成功进阶的华为云
- j2ee 简单网站搭建:(十一)ckeditor 控件使用入门
- windows环境下安装wget
- 【转载】斐讯K1、K2、K2P 大部分官方固件刷机、刷入Breed 辅助工具教程工具
- 计算机控制环境下审计风险研究,计算机审计风险研究
- 【高等数学笔记】拉格朗日乘数法(Lagrange Multiplier Method):其实也没那么难嘛
- VNC 远程中标麒麟桌面版
- 电商-支付相关表的表设计
- 网站被黑之如何找到黑客
- IntelliJ Save Action
- 「面向对象程序设计-C++」学习笔记(下半部分)
- 原生微信小程序使用class 三元运算符实现多选案例
热门文章
- MQL5 代码自动生成文档
- 计算机毕业设计Java汽车租赁系统(源代码+数据库+系统+lw文档)
- 计算机备份与恢复教案,15数据备份与恢复(教案)
- 导数法判断函数的单调性的策略【中阶和高阶辅导】
- Harbor 组成原理
- 深度学习笔试、面试题 三
- win7internet信息服务器安装,Win7如何安装启用Internet信息服务(IIS)管理器
- arch-linux+xfce4+lightdm+uefi个人安装记录
- 【宋红康 MySQL数据库】【00】课程大纲
- 【认证】【DVB】T2 PLP