bootstrap Table实现合并相同行


Posted in Javascript onJuly 19, 2019

本文实例为大家分享了bootstrapTable实现合并相同行的具体代码,供大家参考,具体内容如下

方法:调用mergeCells(data, fieldName, target),可以实现合并相同行

bootstrap Table实现合并相同行

var table = $("#table");
 // 初始化表格
    table.bootstrapTable({
     url: $.fn.bootstrapTable.defaults.extend.index_url,
     pk: 'id',
     sortName: 'update_time',
     search: false,
     toolbar: '#toolbar',
     commonSearch: true,
     pageSize : 12,
     searchFormVisible: true,
     queryParams: function (params) {
      //这里可以追加搜索条件
      var filter = JSON.parse(params.filter);
      var op = JSON.parse(params.op);
      //这里可以动态赋值,比如从URL中获取admin_id的值,filter.admin_id=Fast.api.query('admin_id');
      // filter.admin_id = 1;
      if(filter.is_bujiao=='是')
       filter.is_bujiao=1
      if(filter.is_bujiao=='否')
       filter.is_bujiao=0
      op.username = "like";
      params.filter = JSON.stringify(filter);
      params.op = JSON.stringify(op);
      return params;
     },
     columns: [
      [ 
      {field: 'total_order_id', title: '总订单号',sortable: true,width: "150px",formatter: Table.api.formatter.search}
      ]
     ],
     
     onLoadSuccess: function (data) {
      mergeCells(data, "total_order_id", $("#table"));
     },
    });
 
// 为表格绑定事件
Table.api.bindevent(table);
/**
 * 合并相同行
 * @param data 原始数据(在服务端完成排序)
 * @param fieldName 合并属性数组
 * @param target 目标表格对象
 */
function mergeCells(data, fieldName, target) {
 setTimeout(function () {
  if (data.rows.length == 0) {
   return;
  }
  var numArr = [];
  var number=0;
  var classzhi='dan';
  if( data.rows.length>1){
   for (let i = 0; i < data.rows.length; i++) {
    if(data.rows[i][fieldName]!='' && data.rows[i][fieldName]!='-'){
     if(data.rows[i-1]){
      if(data.rows[i-1][fieldName]!='' && data.rows[i-1][fieldName]!='-'){
       if(data.rows[i-1][fieldName]==data.rows[i][fieldName]){
        number++
       }
       else{
        number=number+1
        numArr.push({index:i-number,number:number,pan:'1'})
        number=0
       }
      }
     }
     if(!data.rows[i+1]){
      number=number
      numArr.push({index:i-number,number:number+1,pan:'2'})
      number=0
     }else{
      if(data.rows[i+1][fieldName]=='' || data.rows[i+1][fieldName]=='-'){
       number=number
       numArr.push({index:i-number,number:number+1,pan:'3'})
       number=0
      }
     }
    }else{
     numArr.push({index:i,number:1,pan:'4'})
    }
   }
  }else{
   numArr.push({index:0,number:1,pan:'5'})
  }
  // console.log(numArr);
  for (let x = 0; x < numArr.length; x++) {
   if(x%2){
    for(let y=0;y<numArr[x]['number'];y++){
     $(target).children('tbody').children('tr').eq(numArr[x]['index']+y).css('background','#ccc')
    }
   }else{
    for(let y=0;y<numArr[x]['number'];y++){
     $(target).children('tbody').children('tr').eq(numArr[x]['index']+y).css('background','#FFF')
    }
   }
   $(target).bootstrapTable('mergeCells', { index: numArr[x]['index'], field: fieldName, colspan: 1, rowspan: numArr[x]['number']});
  }
 },0)
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 插件学习(三)
Aug 06 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 #Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 #Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 #Javascript
bootstrap table插件动态加载表头
Jul 19 #Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 #Javascript
VueJS 取得 URL 参数值的方法
Jul 19 #Javascript
vue自定义表单生成器form-create使用详解
Jul 19 #Javascript
You might like
php中随机显示图片的函数代码
2011/06/23 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
Python中super函数的用法
2017/11/17 Python
Python----数据预处理代码实例
2019/03/20 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
python中pyqtgraph知识点总结
2021/01/26 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
倩碧英国官网:Clinique英国
2018/08/10 全球购物
Shell如何接收变量输入
2016/08/06 面试题
高考励志标语
2014/06/05 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
pytorch 使用半精度模型部署的操作
2021/05/24 Python