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 Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
Jun 26 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
Mar 04 Javascript
JS搜狐面试题分析
Dec 16 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
Vuex实现购物车小功能
Aug 17 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
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
php session安全问题分析
2011/06/24 PHP
php中经典方法实现判断多维数组是否为空
2011/10/23 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
jQuery知识点整理
2015/01/30 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
nodejs基础知识
2017/02/03 NodeJs
javascript  删除select中的所有option的实例
2017/09/17 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
python从入门到精通(DAY 1)
2015/12/20 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
python获取多线程及子线程的返回值
2017/11/15 Python
Python 错误和异常代码详解
2018/01/29 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
英国健身超市:Fitness Superstore
2019/06/17 全球购物
促销活动方案模板
2014/02/24 职场文书
党性心得体会
2014/09/03 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python