bootstrap table实现横向合并与纵向合并


Posted in Javascript onJuly 18, 2019

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下

先上html代码

<div id="test" class="table-responsive" style="padding: 0;overflow:auto;">
 <table id="resourceTable" style="min-width:1500px;" class="table table-nowrap"></table>
</div>

在上js代码

/**
 * 合并单元格,同一列相同数据会合并到同一单元格
 * field:要合并的field列
 */
function mergeTable(field){
 
 var obj=getObjFromTable($resAlertTable,field);
 
 for(var item in obj){ 
  $resAlertTable.bootstrapTable('mergeCells',{
 index:obj[item].index,
 field:field,
 colspan:1,
 rowspan:obj[item].row,
 });
  }
}
function getObjFromTable($resAlertTable,field){
 var obj=[];
 var maxV=$resAlertTable.find("th").length;
 var columnIndex=0;
 var filedVar;
 for(columnIndex=0;columnIndex<maxV;columnIndex++){
 filedVar=$resAlertTable.find("th").eq(columnIndex).attr("data-field");
 if(filedVar==field) break;
 
 }
 var $trs=$resAlertTable.find("tbody > tr");
 var $tr;
 var index=0;
 var content="";
 var row=1;
 for (var i = 0; i <$trs.length;i++)
 {  
 $tr=$trs.eq(i);
 var contentItem=$tr.find("td").eq(columnIndex).html();
 //exist
 if(contentItem.length>0 && content==contentItem ){
  row++;
 }else{
  //save
  if(row>1){
  obj.push({"index":index,"row":row});
  }
  index=i;
  content=contentItem;
  row=1;
 }
 }
 if(row>1)obj.push({"index":index,"row":row});
 return obj;
 
}

实现效果:

bootstrap table实现横向合并与纵向合并

下面是横向合并,相对来说就比较简单了,只需要对table进行一些设置即可

cache : false, // 不缓存
pagination : false, // 开启分页功能
striped : false, // 隔行加亮
data:testData,
search:true,
toolbar:'#toolbar',
height: tableHeight(),//高度调整
silence : true,
sortName : 'lastTime', // 设置默认排序为 id
sortOrder : 'desc', // 设置排序为升序 asc/反序desc
 
columns: [
  [
  {
  field: 'resourceName',
  title: '资源名称',
  align: 'center',
  valign: 'middle',
  width: '8%',
  colspan:1,
  rowspan:2
  },
  {
  title: '流入速率',
  align: 'center',
  valign: 'middle',
  sortable : true,
  colspan:3,
  rowspan:1
  },
  {
  title: '流出速率',
  align: 'center',
  valign: 'middle',
  sortable : true,
  colspan:3,
  rowspan:1
  }
   ],
   [
  {
  field: 'netUpSpeed',
  title: "最大值",
  align: 'center',
  valign: 'middle',
  width: '6%',
  sortable:true
  },{
  field: 'netUpSpeed',
  title: "最小值",
  align: 'center',
  valign: 'middle',
  width: '6%',
  sortable:true
  },{
  field: 'netUpSpeed',
  title: "平均值",
  align: 'center',
  valign: 'middle',
  width: '6%',
  sortable:true
  },{
  field: 'netUpSpeed',
  title: "最大值",
  align: 'center',
  valign: 'middle',
  width: '6%',
  sortable:true
  },{
  field: 'netUpSpeed',
  title: "最小值",
  align: 'center',
  valign: 'middle',
  width: '6%',
  sortable:true
  },{
  field: 'netUpSpeed',
  title: "平均值",
  align: 'center',
  valign: 'middle',
  width: '6%',
  sortable:true
  }
  ]
 ],
 onPreBody:function(data){
 
}
});

实现效果:

bootstrap table实现横向合并与纵向合并

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

Javascript 相关文章推荐
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
防止文件缓存的js代码
Jan 10 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
用p5.js制作烟花特效的示例代码
Mar 21 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 Javascript
JS的深浅复制详细
Oct 16 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 #Javascript
Vue动态生成表格的行和列
Jul 18 #Javascript
vue通过数据过滤实现表格合并
Nov 30 #Javascript
Vue实现数据表格合并列rowspan效果
Nov 30 #Javascript
小程序分页实践之编写可复用分页组件
Jul 18 #Javascript
在vue项目中使用sass语法问题
Jul 18 #Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 #Javascript
You might like
当海贼王变成JOJO风
2020/03/02 日漫
在数据量大(超过10万)的情况下
2007/01/15 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
简单介绍Ruby中的CGI编程
2015/04/10 Python
Python中functools模块函数解析
2017/03/12 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
《赠汪伦》教学反思
2014/04/12 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
面试感谢信范文
2015/01/22 职场文书
个人求职意向书
2015/05/11 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python