PHP建站技术分享-从入门到精通PHP建站技术分享-从入门到精通PHP建站技术分享-从入门到精通

QQ:420220301 微信/手机:150-3210-7690
当前位置:首页 > CMS教程 > Fastadmin

动态合并内容相同的单元格

管理员 2024-12-14
Fastadmin
3

开发应该偶尔会遇到合并单元格,将相同的单元格进行合并。
话不多说,先上效果图:
image.png
这个需求主要是合并前两列
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");                }

image.png

实现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;                }            }

image.png

实现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 + ",";                        }                    }                }            }

image.png

这样就实现了指定的字段动态合并。
参考文章: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修复,程序杀毒,插件定制都可以提供最佳解决方案。

相关推荐

扫码关注

qrcode

QQ交谈

回顶部