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 定义新对象方法
Feb 20 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 Javascript
小程序实现左滑删除效果
Jul 25 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
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
JS实现选项卡实例详解
2015/11/17 Javascript
js格式化时间的方法
2015/12/18 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
Python标准库之sqlite3使用实例
2014/11/25 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
Django中的文件的上传的几种方式
2018/07/23 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
安全资料员岗位职责
2013/12/14 职场文书
2014年消防工作实施方案
2014/02/20 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
保护环境标语
2014/06/09 职场文书
科技节口号
2014/06/19 职场文书
暑期培训心得体会
2014/09/02 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
邀请函格式范文
2015/02/02 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
24年收藏2000多部退役军用电台
2022/02/18 无线电
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers