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

  • 时间:
  • 浏览:45

本文真例为各人分享了Android9宫格图片展现的详细代码,供各人参考,详细内容以下

先上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停止1些设置便可

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){
 
}
});

真现结果:

以上便是本文的全数内容,期望对各人的进修有所帮忙,也期望各人多多撑持剧本之家。