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 相关文章推荐
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
javascript制作2048游戏
Mar 30 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
js实现数字滚动特效
Dec 16 Javascript
Postman动态获取返回值过程详解
Jun 30 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
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
js动态创建、删除表格示例代码
2013/08/07 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
大学生先进事迹材料
2014/02/16 职场文书
鼋头渚导游词
2015/02/05 职场文书