bootstrap-table-单元格动态合并(直接用就行)

最近在开发项目的同时,出现的RuoYi 框架,需求是动态单元格合成,但是RuoYi虽然是基于bootstrap的,但是没有提供单元格合并的方法.

开篇

所以我采用的方法是动态获取RuoYi框架的table的页面的数据,因为是bootstarp-table,所以可以找的对应的表单,通过下面方法获取

let data=$("#bootstrap-table").bootstrapTable("getData");

同时

你想要获取到需要setTimeout让原有表单渲染完后才能获取

精华

直接上我已经封装好的代码

    /**
     *
     * @param target 目标表单,用若依框架的可以直接这样用
     * 或者表单已经渲染上去的可以,把目标表单放上来(个人封装,不推荐)
     */
    function autoCombineAll(target){
        let data=target.bootstrapTable("getData");
        let params=Object.keys(data[0]);
        for (const paramsKey in params) {
            combineRowByName(data,target,params[paramsKey]);
        }
    }

    /**
     *
     * @param data 目标数据源,也就是表单数据,要数组类型
     * @param target 需要修改的表单
     * @param fieldName 需要合并的列名
     */
    function combineRowByName(data,target,fieldName){
        //初始位置集合
        let firstIndexs=[];
        //对应合并的长度
        let publicRowNumbers=[];
        //开始位置
        let firstIndex=0;
        //共有值,对照数组
        let publicRow=data[0][fieldName];
        //当前共有值数量
        let publicRowNumber=0;
        for (let i = 0; i < data.length; i++) {
            if(publicRow===data[i][fieldName]){//如果同行相等,则长度增加
                publicRowNumber++;
            }else{//不相等
                if(publicRowNumber>1){//超过一个则合并到一起,保存
                    firstIndexs.push(firstIndex);
                    publicRowNumbers.push(publicRowNumber);
                }
                //重置数量,共有值,初始值
                publicRowNumber=1;
                publicRow=data[i][fieldName];
                firstIndex=i;
            }
            if(i===data.length-1){//结束时在进行一次判断
                if(publicRowNumber>1){
                    firstIndexs.push(firstIndex);
                    publicRowNumbers.push(publicRowNumber);
                }
                //重置数量,共有值,初始值
                publicRowNumber=1;
                publicRow=data[i][fieldName];
                firstIndex=i;
            }
        }
        for (let i = 0; i < firstIndexs.length; i++) {//循环修改表单
            target.bootstrapTable('mergeCells',{index:firstIndexs[i], field:fieldName, colspan: 1, rowspan: publicRowNumbers[i]});
        }
    }

使用

autoCombineAll($("#bootstrap-table"));
//或者下面这样
combineRowByName(data(自己的数据源),$("#bootstrap-table")(自己的对应table的Id),"combineName(自己的对应列的名字)");