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的试卷自动排版系统实现代码
Jan 06 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
JavaScript prototype属性详解
Oct 25 Javascript
JS将unicode码转中文方法
May 08 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
javascript实现电商放大镜效果
Nov 23 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 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获取表单中多个同名input元素的值
2014/03/20 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
2016/06/16 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
python生成日历实例解析
2014/08/21 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
计算机专业推荐信范文
2013/11/20 职场文书
便利店投资的创业计划书
2014/01/12 职场文书
小学生考试获奖感言
2014/01/30 职场文书
股东合作协议书范本
2014/04/14 职场文书
梅花魂教学反思
2014/04/25 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
市场营销毕业求职信
2014/08/07 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
详解MySQL集群搭建
2021/05/26 MySQL