热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

bootstraptable实现横向合并与纵向合并

这篇文章主要为大家详细介绍了bootstraptable实现横向合并与纵向合并,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

先上html代码

在上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 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;
 
}

实现效果:

下面是横向合并,相对来说就比较简单了,只需要对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){
 
}
});

实现效果:

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


推荐阅读
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • 本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ... [详细]
  • 动态规划算法的基本步骤及最长递增子序列问题详解
    本文详细介绍了动态规划算法的基本步骤,包括划分阶段、选择状态、决策和状态转移方程,并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中,在以后尽可能多地利用这些子问题的解,从而提高算法的效率。 ... [详细]
  • http:valor-software.comng2-bootstraphttps:www.primefaces.orgprimeng#autocomplete转载于:https: ... [详细]
  • 1.脚本功能1)自动替换jar包中的配置文件。2)自动备份老版本的Jar包3)自动判断是初次启动还是更新服务2.脚本准备进入ho ... [详细]
  • javascript  –  RTL布局中的bootstrap datepicker无法正常工作
    RTL布局中的bootstrapdatepicker工作不正常,我正在使用这个bootstrapdatepickerhttp:bootstrap-datepicker.readth ... [详细]
  • PRML读书会第十四章 Combining Models(committees,Boosting,AdaBoost,决策树,条件混合模型)...
    主讲人网神(新浪微博:豆角茄子麻酱凉面)网神(66707180)18:57:18大家好,今天我们讲一下第14章combiningmodel ... [详细]
  • Bootstrap3 排版缩略语 ... [详细]
  • 本文摘要配置目的:寄存器配置用于更改路由器启动过程。配置目的:寄存器配置用于更改路由器启动过程。启动位由4位16进制寄存器组成格式:0xA ... [详细]
author-avatar
可乐加芬达61158
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有