开发应该偶尔会遇到合并单元格,将相同的单元格进行合并。
话不多说,先上效果图:
这个需求主要是合并前两列
bootstraptable 自带有这个方法:
$('#table').bootstrapTable('mergeCells',{index:0, field:"name", colspan: 1, rowspan: 2});
index: 行索引,
field: 字段名称,
rowspan: 要合并的rowspan数量,
colspan: 要合并的colspan数量。
不过由于我们是动态合并rowspan这个值是动态变化,不能写死,所以经过分析:只要动态计算出这值就能实现效果。
第一步
添加:
onLoadSuccess: function (data) { //数据加载成功后 进行合并 mergeTable(data,"table"); }
实现mergeTable函数
//合并表格 var agentListCount=""; var agentIdCount=""; function mergeTable(data,tableId){ //每次合并表格前 都要将全局变量清空 agentListCount=""; agentIdCount=""; //计算每一列相同内容出现的次数 mergeCells(data.rows,0,data.rows.length,"agent_list",$('#'+tableId)); //对字符串进行分割 var strArr1 = agentListCount.split(","); var strArr2 = agentIdCount.split(","); //进行合并 var index = 0; for(var i=0;i<strArr1.length;i++){ var count = strArr1[i] * 1; $('#table').bootstrapTable('mergeCells',{index:index, field:"agent_list", colspan: 1, rowspan: count}); index += count; } var index = 0; for(var i=0;i<strArr2.length;i++){ var count = strArr2[i] * 1; $('#table').bootstrapTable('mergeCells',{index:index, field:"agent_id", colspan: 1, rowspan: count}); index += count; } }
实现mergeCells函数
function mergeCells(datas,startIndex,size,fieldName,target) { //声明一个数组计算相同属性值在data对象出现的次数和 //这里不能使用map,因为如果涉及到排序后,相同的属性并不是紧挨在一起,那么后面的次数会覆盖前面的次数,故这里用数组 var sortArr = new Array(); for (var i = startIndex; i < size - 1; i++) { for (var j = i + 1; j < size; j++) { if (datas[i][fieldName] != datas[j][fieldName]) { //相同属性值不同 if (j - i > 1) { sortArr.push(j - i); i = j - 1; //如果是最后一个元素 把最后一个元素的次数也装进去 if (i == size - 1 - 1) { sortArr.push(1); } } else { sortArr.push(j - i); //如果j是最后一个元素 把最后一个元素的次数装进去 if (j == size - 1) { sortArr.push(1); } } break; } else { //相同属性值相同 直到最后一次的时候才会装 否则在他们的值不同时再装进去 if (j == size - 1) { sortArr.push(j - i + 1); i = j; } } } } var index = 0; //遍历数组,将值装追加到对应的字符串后面 下面的这几个判断是满足我自己项目的需求的,可以根据自己的需求来改变对应记录的列, for (var prop in sortArr) { //列名为agent_list的记录下来 if (fieldName == "agent_list") { var count = sortArr[prop] * 1; agentListCount += count + ","; } //列名为subProj的记录下来 if (fieldName == "agent_id") { var count = sortArr[prop] * 1; agentIdCount += count + ","; } } //循环遍历第一列的每个次数,然后基于第一列出现的次数去计算记录下第二列相同出现的次数 for (var prop in sortArr) { if (fieldName == "agent_list") { if (sortArr[prop] > 1) { //再次调用mergeCells()方法 mergeCells(datas, startIndex, startIndex + sortArr[prop], "agent_id", target); startIndex = startIndex + sortArr[prop]; } else { //当agent_id的次数为1就不进入循环 agentIdCount += 1 + ","; } } } }
这样就实现了指定的字段动态合并。
参考文章:https://www.cnblogs.com/eleven258/p/9686731.html
希望以上内容对你有所帮助!如果还有其他问题,请随时提问。 各类知识收集 拥有多年CMS企业建站经验,对 iCMS, Fastadmin, ClassCMS, LeCMS, PbootCMS, PHPCMS, 易优CMS, YzmCMS, 讯睿CMS, 极致CMS, Wordpress, HkCMS, YznCMS, WellCMS, ThinkCMF, 等各类cms的相互转化,程序开发,网站制作,bug修复,程序杀毒,插件定制都可以提供最佳解决方案。