JS表组件BootstrapTable内联编辑解决方案x-可编辑

编辑：宝哥软件园来源：互联网时间：2021-09-07

新天龙八部

评分

前言：之前介绍bootstrapTable组件的时候，提到了它的内联编辑功能，但只是为了展示功能，就被简单忽略了，这是罪过！最近项目还是计划用内联编辑，所以我又研究了下一个x-editable组件，遇到了一些坑。在这里做个坑记录吧！想了解bootstrap table的朋友可以走一遍JS组件系列——表组件神器：bootstrapTable表。

x-可编辑组件介绍

X-editable组件是一个用于创建可编辑弹出窗口的插件，支持三种样式：bootstrap、Jquery UI和Jquery。大致效果如下：

按照博主一贯的风格，这里一定要选第一个。首先，给出一个开源地址。x-可编辑开源地址：https://github.com/vitalets/x-editablex-editable文档地址：http://vitalets.github.io/x-editable/docs.htmlx-editable在线演示：http://vitalets.github.io/x-editable/demo-bs3.html

1.x-editable的第一次体验

首先，将基于引导的源代码下载到本地。参考相关文件。

link href='/Content/bootstrap/CSS/bootstrap . min . css' rel='样式表'/link href=' ~/Content/bootstrap 3-可编辑/CSS/bootstrap-可编辑. CSS ' rel='样式表'/脚本src=' http :/Scripts/jquery-1 . 9 . 1 . min . js '/script script src=' http :/Content/bootstrap/js/bootstrap . min . js '/script script src=' http 33366

Js初始化

$(function () { $('#username '))。可编辑()；});效果显示

以上是通过html的数据属性来设置x-editable的参数。当然，我也可以在初始化期间设置参数。例如，我只给出一个空的a标记：a href=' # ' id=' username ' username/a。

Js初始化

$ (function () {$ ('# username '))。可编辑({type:' text '，//编辑框的类型。支持文本|文本区域|选择|日期|清单和其他标题：“用户名”。//编辑框的标题disabled: false。//是否禁用编辑emptytext: '空文本'，//默认值为null值的text mode: 'inline '，//编辑框模式：支持popup和inline模式，默认值为popup validate : function(value){//field validation if(！$.trim(value)) {return '不能为空；} } });});检查效果

给我一个稍微复杂一点的a href='#' id='department '来选择部门/a。

$ (function () {$ ('# department '))。可编辑({type:' select '，//编辑框的类型。Text | textarea | select | date |核对清单和其他来源： [{value: 1，text : ' development department ' }，{value: 2，text:' sales department'}，{value33603，text : ' administration department ' }]，title: ' select department '，//编辑框的标题disabled: false，//是否禁用编辑emptytext: '空文本' '$.trim(value)) {return '不能为空；} } });});检查效果

以上只给出了一些常用的字段。当然，x-edited组件还有很多其他功能参数。如果你感兴趣，你可以看看文件。官方文件对每个参数都有详细的描述。

二、bootstrapTable在线编辑初始方案

说了这么久，以上只是一个铺垫，我们最终希望在bootstrapTable中实现内联编辑。根据上面的规则，我们想用x-editable实现内联编辑。表格的单元格中必须有一个A标记，然后用x-editable初始化A标记。有了这个想法，我们先来试试。

参考相关文件

链接。量滴CSS“rel=”样式表/link href=' ~/Content/bootstrap 3-可编辑/CSS/自举-可编辑。CSS ' rel='样式表/link href='/Content/bootstrap-table/bootstrap-table。量滴CSS ' rel='样式表'/脚本src=' http :/Scripts/jquery-1。9 .1 .量滴js /脚本src=' http :/的相关初始化

脚本类型=' text/JavaScript ' var Currow={ }；$(函数(){ $('#tb_user ')).bootstrapTable({ toolbar : ' # toolbar '，idField: 'Id '，pagination: true，showRefresh: true，search: true，clickToSelect: true，query params 3360 function(param){ return }；}，URL : '/可编辑/GetUsers '，列： [{ checkbox: true }，{ field: 'UserName '，title: '用户名，formatter:函数（值、行、索引){ return ' a href= ' # ' name= ' UserName ' data-type= ' text ' data-PK= ' row .Id ' '数据-标题= '用户名 ' '值/a '；} }，{ field: 'Age '，title: '年龄，}，{ field: '生日，标题： '生日，formatter:函数（值、行、索引){ var date=eval('new ' eval(值))。来源)返回日期。格式(' yyyy年梅智节拍器月截止日期(截止日期的缩写)日');} }，{ field: 'DeptName '，title: '部门}，{ field: 'Hodd '，title: '爱好}]，onClickRow:函数(Row，$ element){ Currow=Row；}，onLoadSuccess:函数(aa，bb，cc) { $('#tb_user a ').可编辑({ URL :函数(参数){ var SName=$(this)).attr(' name ')；参数。价值；$.ajax({ type: 'POST '，URL : '/可编辑/编辑'，data: curRow，dataType: 'JSON '，success:函数（数据，textStatus，jqXHR) { alert('保存成功!');}，错误： function(){ alert(' error ')；} });},键入： ' text ' })；}, });});/script后台方法

后台测试方法

public JsonResult GetUsers(){ var lstRes=new list user()；lstRes .添加（新用户(){标识='1 ',用户名='张三，年龄=22,生日=转换今日时间(' 1994-12-21 ')，DeptId='1 '，DeptName='研发部' });lstRes .添加（新用户(){标识='2 ',用户名='李四，年龄=28,生日=转换今日时间(' 1988-09-09 ')，DeptId='2 '，DeptName='销售部' });lstRes .添加（新用户(){标识='3 ',用户名='风衣大叔，年龄=40,生日=转换今日时间(' 1976-09-01 ')，DeptId='2 '，DeptName='销售部' });lstRes .添加（新用户(){标识='4 ',用户名='闪电大虾，年龄=37,生日=转换今日时间(' 1979-03-12 ')，DeptId='4 '，DeptName='创意部' });lstRes .添加（新用户(){标识='5 ',用户名='韩梅梅，年龄=29,生日=转换今日时间(' 1987-05-01 ')，DeptId='5 '，DeptName='事业部' });返回Json(lstRes，JsonRequestBehavior .允许get)；}公共JsonResult编辑(用户用户){ //反序列化之后更新返回Json(new { }，JsonRequestBehavior .允许get)；}

这样确实是可以实现想要的效果，貌似也能行内编辑了，可是如果没个列都需要行内编辑，并且列的个数很多，那么是不是每个列都得这样去模板？并且这种写法狠显然很死板，博主着实难以接受。于是又找了找例子，发现在bootstrapTable的扩展里面存在引导表可编辑。射流研究…这个js。

三、bootstrapTable行内编辑最终方案

好吧，博主承认，上面还是铺垫，因为博主觉得这可能是解决问题的一般思路，所以将这些铺垫的篇幅可能有点多。首先来看看引导表可编辑。射流研究…这个文件：

/* * * @作者志新文[emailprotected] *分机： https://github.com/vitalets/x-editable */！函数($) { '使用“严格”；$.扩展($。fn。bootstraptable。默认值，{ editable: true，oneditableinit : function(){ return false；}，onEditableSave:函数（字段、行、oldValue、$ El){返回false}，onEditableShown:函数（字段、行美元、萨尔瓦多、可编辑){ return false}，onEditableHidden:函数（字段、行美元、萨尔瓦多、原因){ return false } })；$.扩展($。fn。bootstraptable。构造函数。事件，{ '可编辑-init。bs。表“:”OneditableInit“”，可编辑-保存。bs。表格' : ' onEditableSave '，'可编辑-显示。bs。表' : ' onEditableShown '，'可编辑-隐藏。bs。表“:”onEditableHidden“})；var BootstrapTable=$。fn。BootstrapTable。构造函数，_ init table=BootstrapTable。原型。init table，_ init body=BootstrapTable。原型。初始化主体；bootstraptable。原型。inittable=function(){ var那=this_initTable.apply(这个，Array.prototype.slice.apply(参数));if(！这个。选项。可编辑){ return} $.每个(this.columns，function (i，column) { if(！列。可编辑){ return} var _ formatter=列。格式化程序；column.formatter=function(值、行、索引){ var result=_formatter？_格式化程序(值、行、索引):值；返回['a href='javascript:void(0)，' data-name='列。字段' '，'数据-PK='行[那个。选项。idfield]'，' data-value=' result ' '，' ' '/a' ].join(' ')；};});};bootstraptable。原型。initbody=function(){ var那=this_initBody.apply(这个，Array.prototype.slice.apply(参数));if(！这个。选项。可编辑){ return} $.每个(this.columns，function (i，column) { if(！列。可编辑){ return}那个$ body。find(' a[data-name='列。字段' ']').可编辑(列.可编辑).关闭("保存")。on('save '，函数(e，params) { var data=that.getData()，index=$(this).父代(' tr[数据索引]).数据('索引')，行=数据[索引]，旧值=行[列]。字段]；行[列。字段]=参数。提交价值；' that.trigger('可编辑-保存、column.field、row、oldValue、$(this))；});那个$ body。find(' a[data-name='列。字段' ']').可编辑(列.可编辑).关闭("显示")。在('上显示，函数(e ),可编辑){ var data=that.getData()，index=$(this).父代(' tr[数据索引]).data('index ')，row=data[index]；' that.trigger('可编辑-显示，column.field，row，$(this)，可编辑);});那个$ body。find(' a[data-name='列。字段' ']').可编辑(列.可编辑).关闭("隐藏")。on('hidden '，函数(e，reason) { var data=that.getData()，index=$(this).父代(' tr[数据索引]).data('index ')，row=data[index]；' that.trigger('可编辑-隐藏、column.field、row、$(this)、reason)；});});this.trigger('可编辑-init’)；};}(jQuery)；这个射流研究…其实是对x-可编辑做了一个简单的封装，增加了列的可编辑的属性以及编辑保存后的一些事件。有了这个作为基础，于是我们行内编辑的代码变成了这样。

需要引用的文件如下：

$(function () { $('#tb_user '))。bootstrapTable({ toolbar : ' # toolbar '，idField: 'Id '，pagination: true，showRefresh: true，search: true，clickToSelect: true，query params 3360 function(param){ return }；}，URL : '/可编辑/getusers '，列3360 [{checkbox 3360 true}，{field3360' username '，title :' user name '，editable: {type: 'text '，Title:' user name '，validate: function (v) {if(！v)返回“用户名不能为空”；}}}，{字段：' age '，标题：' age '，}，{字段： '生日'，标题： '生日'，格式化程序：函数(值，行，索引){ var date=eval('new ' eval)(值)。source)返回日期. format(' yyyy-MM-DD ')；}}，{field:' deptname '，title :' department'}，{field3360' hobby '，title :' hobby'}]，oneditablesave :函数(字段，行，旧值，$ El) {$。Ajax ({type:' post '，URL : '/可编辑/编辑'，data3360row，datatype3360' JSON '，success3360函数(数据，状态){ if(status=' success '){alert } }，error:函数(){ alert('编辑失败')；}，complete : function(){ } })；} });});背景对应的更新方法

公共JSON结果编辑(用户用户){//更新实体returnjson (new {}，jsonrequestbehavior . allow get)；}经过测试，用户名一栏基本可以自由编辑。同样，年龄一栏可以改为如下

{field: 'Age '，title:' age '，可编辑： {type :' text '，title :' age '，validate 3360 function(v){ if(isnan(v))return ' Age必须是数字'；var age=ParSeint(v)；If (age=0)返回“age必须是正整数”；}}}其他基本不需要修改。代码说明：可编辑参数由上面初始化列属性中的可编辑属性配置。注意这里每一列的可编辑属性对应的Json对象是x-editable中初始化的Json对象，也就是说我们初始化x-editable的时候可以配置哪些属性，列的可编辑属性也可以用同样的方式配置，这样用起来会好很多。编辑后的提交方法被放入onEditableSave事件中进行统一处理。

2.时间选择框

以上述知识为基础，让我们初始化生日列：

{field: '生日'，title : '生日'，formatter3360函数(值，行，索引){var date=eval ('new' eval(值))。source)返回日期. format(' yyyy-mm-DD ')；}，可编辑： {类型： '日期'，标题： '生日' }}其他地方不需要修改，获得效果：

这是x-editable的默认样式。如果不喜欢，可以自己配置。x-editable为配置日期框提供了许多参数，如下所示：

当然，如果精确到分和秒，可以使用日期时间类型的编辑框。以下是官方时间框架的编辑效果，看起来不错。

3、下拉框

表单编辑中的另一个重要标签是select。如上所述，x-editable为我们提供了下拉框的编辑模式。例如，我们部门栏的编辑可以写成如下：

{field: 'DeptId '，title:' Department '，Editable: {Type:' Select '，Title :' Department '，Source : [{Value3360' 1 '，Text:' R&D部门' }，{value:'2 '，Text: '销售部' }，{ value: ' 3 '，text 3: '行政部门' } }收到了效果

当然，这种在本地设置数据源的方法不能满足我们的需求，因为在很多情况下，下拉框中的选项都是从数据库远程获取的。当然，x-editable也为我们考虑过。例如，我们可以这样写：

{field: 'DeptId '，title:' department '，可编辑3360 {type:' select '，title:' department '，source : function(){ var result=[]；$.Ajax({ URL : '/Editable/GetDepartments '，async: false，type: 'get '，data: {}，success:函数(数据，状态){ $。每个(数据、函数(键、值){ result.push({ value: value。标识，文本：值。name })；});} });返回结果；}}}我们在后台配置了一个方法

public JsonResult GetDepartments(){ var lstRes=new list department()；Lstres。add (newdepartment () {id=' 1 '，name=' r & d department ' })；Lstres。add (newdepartment () {id=' 2 '，name=' sales department ' })；Lstres。add (newdepartment () {id=' 3 '，name=' administration department ' })；Lstres。add (newdepartment () {id=' 4 '，name=' creative department ' })；Lstres。add (newdepartment () {id=' 5 '，name=' division ' })；返回Json(lstRes，JsonRequestBehavior。allow get)；}也能达到我们想要的结果。

代码说明：这里有一点需要说明。细心的园林朋友可能已经发现，我们的field :‘DeptId’，为什么要在这里配置DeptId而不是DeptName呢？这很简单，因为我们需要对应数据源中的值。

4.复选框

除了上述常见的编辑框，x-editable还为我们提供了编辑复选框组的功能。例如：

{field: 'Hobby '，title:' hobby '，可编辑： {type: '检查表'，分隔符： '，'，source: [{value3360' BSB '，text: '篮球' }，{value: 'ftb '，text: '足球' }，{value: 'wsm '，text: '游泳' }}，得到了效果：

当然，如果数据是远程的，也可以通过类似上述的方法进行检索。

5.选择2“鬼魂不散”

说到上面的复选框，博主们不禁想到多选，于是搜索x-edited的文档，发现它不支持多选，但支持select2。我不知道这是不是好消息。根据博主自己的使用体验，包括在技术交流群的聊天体验，发现很多人在使用selecter 2时遇到了各种风格问题，不容易解决。

既然x-editable支持select2，那就试试吧。不管怎么说，官方演示还是挺不错的。以下是使用官方演示的示例：

带着忐忑的心情，博主亲自尝试了一下。

引用select2文件

link href=' ~/Content/select 2-bootstrap . CSS ' rel='样式表'/link href=' ~/Content/select 2-master/dist/CSS/select 2 . min . CSS ' rel='样式表'/Script src=' http : ~/Content/select 2-master/dist/js/select 2 . full . min . js '/脚本代码尝试

{field: 'Hobby '，title:' hobby '，可编辑： {type:' select2 '，title :' hobby '，name :' hobby '，placement 3360' top '，success :函数(response，new value) }，error:函数(response，new value){ debugger；}，url:函数(参数){调试器；}，source: [{id:' BSB '，text: '篮球' }，{id3360' FTB '，text: '足球' }，{id3360' wsm '，text: '游泳' }]，Input class :' input-large '，选择2: {allowclear: true，multiple : true，}}得到结果：