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 相关文章推荐
JavaScript 面向对象之命名空间
May 04 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
vue 请求后台数据的实例代码
Jun 22 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
深入理解Vue的数据响应式
May 15 Vue.js
纯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
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
Python struct.unpack
2008/09/06 Python
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
初中生学习的自我评价
2013/11/14 职场文书
小班秋游活动方案
2014/02/22 职场文书
大学社团计划书
2014/05/01 职场文书
党员个人公开承诺书
2014/08/29 职场文书
Node实现搜索框进行模糊查询
2021/06/28 Javascript
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle