bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题


Posted in Javascript onAugust 10, 2017

前言

  • 最近在研究bootstrap table的表格的单元格编辑功能,实现点击单元格修改内容,其中包括文本(text)方式修改,下拉选择(select)方式修改,日期(date)格式修改等。
  • 本文着重解决x-editable编辑的数据动态添加和显示数据为Empty的问题,还有给表格单元格的内容设置多样式,使得显示多样化。
  • 由于官网给的demo的数据都是html文件里写好的,select类型的不能动态添加(所以网上的大多都是官网的类似例子,本篇博客就是在这种情况下以自己的经验分享给大家,有问题可以留言哦),一旦动态添加就会出现显示数据为Empty,我表格原本是有数据的,但是一用这个插件就把数据变成Empty了,这可不是我想要的,所以笔者就自行解决了这个问题。

对比网上的例子

比如以下这种数据不是Empty的例子,但是是由于在html中写死了数据(awesome),不适合动态添加。

<a href="#" rel="external nofollow" id="username" data-type="text" data-pk="1">awesome</a>
<script>
$(function(){
 $('#username').editable({
  url: '/post',
  title: 'Enter username'
 });
});
</script>

另外一种就是使用bootstrap table动态添加的,但是select类型就会出现数据为Empty的情况。

$('#db_dependences').bootstrapTable({
  method:'POST',
  dataType:'json',
  contentType: "application/x-www-form-urlencoded",
  cache: false,
  striped: true,      //是否显示行间隔色
  sidePagination: "client",   //分页方式:client客户端分页,server服务端分页(*)
  showColumns:true,
  pagination:true,
  minimumCountColumns:2,
  pageNumber:1,      //初始化加载第一页,默认第一页
  pageSize: 10,      //每页的记录行数(*)
  pageList: [10, 15, 20, 25],  //可供选择的每页的行数(*)
  uniqueId: "id",      //每一行的唯一标识,一般为主键列
  showExport: true,     
  exportDataType: 'all',
  exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'], //导出文件类型
  onEditableSave: function (field, row, oldValue, $el) {
   $.ajax({
    success: function (data, status) {
     if (status == "success") {
      alert("编辑成功");
     }
    },
    error: function () {
     alert("Error");
    },
    complete: function () {
    }
   });
  },
  data: [{
   id: 1,
   name: '张三',
   sex: '男',
   time: '2017-08-09'
  }, {
   id: 2,
   name: '王五',
   sex: '女',
   time: '2017-08-09'
  }, {
   id: 3,
   name: '李四',
   sex: '男',
   time: '2017-08-09'
  }, {
   id: 4,
   name: '杨朝来',
   sex: '男',
   time: '2017-08-09'
  }, {
   id: 5,
   name: '蒋平',
   sex: '男',
   time: '2017-08-09'
  }, {
   id: 6,
   name: '唐灿华',
   sex: '男',
   time: '2017-08-09'
  }],
  columns: [{
   field: 'id',
   title: '序号'
  }, {
   field: 'name',
   title: '姓名',
   editable: {
    type: 'text', 
    validate: function (value) { 
     if ($.trim(value) == '') { 
      return '姓名不能为空!'; 
     } 
    }
   } 
  }, {
   field: 'sex',
   title: '性别',
   editable: {
    type: 'select',
    pk: 1,
    source: [
     {value: 1, text: '男'},
     {value: 2, text: '女'},
    ]
   }
  }, {
   field: 'time',
   title: '时间',
   editable: {
    type: 'date',
    format: 'yyyy-mm-dd', 
    viewformat: 'yyyy-mm-dd', 
    datepicker: {
     weekStart: 1
    }
   } 
  }]
 });

结果图如下:

bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题

由于开源,很快就找到原因,由于formatter我们没有写这个function导致调用的默认的formatter,默认的没有把表格的值传入html中,bootstrap-table-editable.js源码如下,初始定义_dont_edit_formatter为false,我们没有实现noeditFormatter的function就会执行第二个if语句,其中的标签中没有对内容赋值,导致最后显示结果为它默认的Empty:

column.formatter = function(value, row, index) {
    var result = column._formatter ? column._formatter(value, row, index) : value;
    $.each(column, processDataOptions);
    $.each(editableOptions, function(key, value) {
     editableDataMarkup.push(' ' + key + '="' + value + '"');
    });
    var _dont_edit_formatter = false;
    if (column.editable.hasOwnProperty('noeditFormatter')) {
     _dont_edit_formatter = column.editable.noeditFormatter(value, row, index);
    }
    if (_dont_edit_formatter === false) {
     return ['<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" ',
      ' data-name="' + column.field + '"',
      ' data-pk="' + row[that.options.idField] + '"',
      ' data-value="' + result + '"',
      editableDataMarkup.join(''),
      '>' + '</a>'
     ].join('');
    } else {
     return _dont_edit_formatter;
    }
   };

由于要实现多样式,则把上面的代码改变,并在使用的时候实现noeditFormatter:function(value){…}就是了。将上面的代码改为如下(此为我自己改的,你可以根据自己的需要做修改):

column.formatter = function(value, row, index) {
    var result = column._formatter ? column._formatter(value, row, index) : value;
    $.each(column, processDataOptions);
    $.each(editableOptions, function(key, value) {
     editableDataMarkup.push(' ' + key + '="' + value + '"');
    });
    var _dont_edit_formatter = false;
    if (column.editable.hasOwnProperty('noeditFormatter')) {
     var process = column.editable.noeditFormatter(value, row, index);
     if(!process.hasOwnProperty('class')){
      process.class = '';
     }
     if(!process.hasOwnProperty('style')){
      process.style = '';
     }
     _dont_edit_formatter = ['<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" ',
      ' data-name="'+process.filed+'"',
      ' data-pk="1"',
      ' data-value="' + process.value + '"',
      ' class="'+process.class+'" style="'+process.style+'"',
      '>' + process.value + '</a>'
     ].join('');
    }
    if (_dont_edit_formatter === false) {
     return ['<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" ',
      ' data-name="' + column.field + '"',
      ' data-pk="' + row[that.options.idField] + '"',
      ' data-value="' + result + '"',
      editableDataMarkup.join(''),
      '>' + value + '</a>'
     ].join('');
    } else {
     return _dont_edit_formatter;
    }
   };

结果如下:

bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题

bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题

然后是bootstrap table的使用js文件,在其中实现noeditFormatter函数。返回的result必须包含filed和value,class和style可以不需要,class可以额外用其它插件之类,比如badge,style是增加样式(背景,颜色,字体等)。

$('#db_dependences').bootstrapTable({
  method:'POST',
  dataType:'json',
  contentType: "application/x-www-form-urlencoded",
  cache: false,
  striped: true,        //是否显示行间隔色
  sidePagination: "client",   //分页方式:client客户端分页,server服务端分页(*)
  showColumns:true,
  pagination:true,
  minimumCountColumns:2,
  pageNumber:1,      //初始化加载第一页,默认第一页
  pageSize: 10,      //每页的记录行数(*)
  pageList: [10, 15, 20, 25],  //可供选择的每页的行数(*)
  uniqueId: "id",      //每一行的唯一标识,一般为主键列
  showExport: true,     
  exportDataType: 'all',
  exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'], //导出文件类型
  onEditableSave: function (field, row, oldValue, $el) {
   $.ajax({
    success: function (data, status) {
     if (status == "success") {
      alert("编辑成功");
     }
    },
    error: function () {
     alert("Error");
    },
    complete: function () {
    }
   });
  },
//  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');
//   }
//  },
  data: [{
   id: 1,
   name: '张三',
   sex: '男',
   time: '2017-08-09'
  }, {
   id: 2,
   name: '王五',
   sex: '女',
   time: '2017-08-09'
  }, {
   id: 3,
   name: '李四',
   sex: '男',
   time: '2017-08-09'
  }, {
   id: 4,
   name: '杨朝来',
   sex: '男',
   time: '2017-08-09'
  }, {
   id: 5,
   name: '蒋平',
   sex: '男',
   time: '2017-08-09'
  }, {
   id: 6,
   name: '唐灿华',
   sex: '男',
   time: '2017-08-09'
  }, {
   id: 7,
   name: '马达',
   sex: '男',
   time: '2017-08-09'
  }, {
   id: 8,
   name: '赵小雪',
   sex: '女',
   time: '2017-08-09'
  }, {
   id: 9,
   name: '薛文泉',
   sex: '男',
   time: '2017-08-09'
  }, {
   id: 10,
   name: '丁建',
   sex: '男',
   time: '2017-08-09'
  }, {
   id: 11,
   name: '王丽',
   sex: '女',
   time: '2017-08-09'
  }],
  columns: [{
   field: 'id',
   title: '序号'
  }, {
   field: 'name',
   title: '姓名',
   editable: {
    type: 'text', 
    validate: function (value) { 
     if ($.trim(value) == '') { 
      return '姓名不能为空!'; 
     } 
    }
   } 
  }, {
   field: 'sex',
   title: '性别',
   editable: {
    type: 'select',
    pk: 1,
    source: [
     {value: 1, text: '男'},
     {value: 2, text: '女'},
    ],
    noeditFormatter: function (value,row,index) {
     var result={filed:"sex",value:value,class:"badge",style:"background:#333;padding:5px 10px;"};
     return result;
    }
   }
  }, {
   field: 'time',
   title: '时间',
   editable: {
    type: 'date',
    format: 'yyyy-mm-dd', 
    viewformat: 'yyyy-mm-dd', 
    datepicker: {
     weekStart: 1
    },
    noeditFormatter: function (value,row,index) {
     var result={filed:"time",value:value,class:"badge",style:"background:#333;padding:5px 10px;"};
     return result;
    }
   } 
  }]
 });

关于bootstrap table的导出及使用可以看我另外一篇博客。

下载和引用

下载x-editable,并如下引用。

<link href="js/bootstrap_above/x-editable-develop/dist/bootstrap-editable/css/bootstrap-editable.css" rel="external nofollow" rel="stylesheet">
  <script src="js/bootstrap_above/x-editable-develop/dist/bootstrap-editable/js/bootstrap-editable.js"></script>
  <script src="js/bootstrap_above/bootstrap-table-develop/dist/extensions/editable/bootstrap-table-editable.js"></script>

然后讲上诉的一些文件修改添加,就完成了。

另外项目的结果展示

bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题

bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题

其中的样式都是自行在x-editable的基础上添加的。如配置出问题,以下是源码链接。

总结

以上所述是小编给大家介绍的bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js每次Title显示不同的名言
Sep 25 Javascript
jQuery选择器全面总结
Jan 06 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
13个PHP函数超实用
Oct 21 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
AngularJS基础 ng-model 指令详解及示例代码
Aug 02 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
微信小程序登录态控制深入分析
Apr 12 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 #Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 #Javascript
通过示例彻底搞懂js闭包
Aug 10 #Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 #Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 #Javascript
浅谈sass在vue注意的地方
Aug 10 #Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 #jQuery
You might like
PHP 第二节 数据类型之数值型
2012/04/28 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
Javascript 汉字字节判断
2009/08/01 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
ECMAScript6--解构
2017/03/30 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
Python多进程写入同一文件的方法
2019/01/14 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
关于Django Models CharField 参数说明
2020/03/31 Python
python模块如何查看
2020/06/16 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
读书活动实施方案
2014/03/10 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
帝企鹅日记观后感
2015/06/10 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
python解决12306登录验证码的实现
2021/04/18 Python