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判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
vue.js使用3DES加密的方法示例
May 18 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 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学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
js文件中调用js的实现方法小结
2009/10/23 Javascript
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
探究Python中isalnum()方法的使用
2015/05/18 Python
Python贪心算法实例小结
2018/04/22 Python
python中for用来遍历range函数的方法
2018/06/08 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
师范生个人推荐信
2013/11/29 职场文书
书法培训心得体会
2014/01/05 职场文书
民事授权委托书范文
2014/08/02 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
美术教师个人总结
2015/02/06 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python
Log4j.properties配置及其使用
2021/08/02 Java/Android