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 相关文章推荐
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
javascript数组快速打乱重排的方法
Jan 02 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
js实现聊天对话框
Feb 08 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 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
php jquery 多文件上传简单实例
2013/12/23 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
JS常用算法实现代码
2016/11/14 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
python求众数问题实例
2014/09/26 Python
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
python去掉行尾的换行符方法
2017/01/04 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
python中subprocess批量执行linux命令
2018/04/27 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
np.dot()函数的用法详解
2020/01/17 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
SQL语言面试题
2013/08/27 面试题
DBA的职责都有哪些
2012/05/16 面试题
军训生自我鉴定范文
2013/12/27 职场文书
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
大学班级干部的自我评价分享
2014/02/10 职场文书
促销活动总结
2014/04/28 职场文书
死亡赔偿协议书
2015/01/28 职场文书
毕业论文致谢词
2015/05/14 职场文书
财务人员入职担保书
2015/09/22 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS