Bootstrap-table实现动态合并相同行

感谢蚊蚊蚊蚊蚊170624,终于实现了^v^

原创网址:https://www.cnblogs.com/eleven258/p/9686731.html

效果:

代码如下:

var firstSubjectCount="";
    var tegionCount="";

    //合并表格
    function mergeTable(data,tableId){
        //每次合并表格前 都要将全局变量清空
        firstSubjectCount="";
        tegionCount="";
        mergeCells(data.rows,0,data.rows.length,"firstSubject",$('#'+tableId));
        
        firstSubjectCount = firstSubjectCount.substring(0,firstSubjectCount.length-1);
        tegionCount = tegionCount.substring(0,tegionCount.length-1);
        var strArr1 = firstSubjectCount.split(",");
        var strArr2 = tegionCount.split(",");
        //根据次数进行表格合并
        //合并firstSubject
        var index = 0;
        for(var i=0;i<strArr1.length;i++){
            var count = strArr1[i] * 1;
            $('#'+tableId).bootstrapTable('mergeCells',{index:index, field:"firstSubject", colspan: 1, rowspan: count});
            index += count;
        }
        //合并tegion
        var index = 0;
        for(var i=0;i<strArr2.length;i++){
            var count = strArr2[i] * 1;
            $('#'+tableId).bootstrapTable('mergeCells',{index:index, field:"tegion", colspan: 1, rowspan: count});
            index += count;
        }
    }

    //排序后紧挨在一起 进行同名合并
    /**
     * @param datas --表格数据,一般为表格的rows数据
     * @param startIndex --开始下标
     * @param size --从开始下标起,到size结束,遍历合并多少个
     * @param fieldName --计算算哪个列
     * @param target --table表格对象
     */
    function mergeCells(datas,startIndex,size,fieldName,target) {
        var sortArr = new Array();
        for (var i = startIndex; i < size ; 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;
                    }
                }
            }
        }

        //遍历数组,将值装追加到对应的字符串后面
        for(var prop = 0; prop < sortArr.length; prop++){
            if(fieldName == "firstSubject"){
                firstSubjectCount += sortArr[prop] +",";
            }
            if(fieldName == "tegion"){
                tegionCount += sortArr[prop] +",";
            }
        }

        for(var prop = 0; prop < sortArr.length; prop++){
            if(fieldName == "firstSubject"){
                startIndex = 0;
                //tegion每次进去的startIndex为前面次数的和
                if(tegionCount.length>0){
                    var temp = tegionCount.substring(0,tegionCount.length-1);
                    var strArr1 = temp.split(",");
                    for(var i=0;i<strArr1.length;i++){
                        var count = strArr1[i] * 1;
                        startIndex += count;
                    }
                }

                if(sortArr[prop] >1){
                    mergeCells(datas,startIndex,(parseInt(startIndex)+parseInt(sortArr[prop])),"tegion",target);
                }else{
                    //当projName的次数为1就不进入循环
                    tegionCount +=1+",";
                }
            }
        }
    }

 

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
您,${username}!</h1> <p><a href="UserServlet?action=logout">退出登录</a></p要动态合并单元格,需要在渲染表格之前对表格数据进处理,合并需要合并> </body> </html> ``` 6. 配置web.xml文件 在`web.xml`文件中配置Servlet和JSP的或列,并将处理后的数据传递给 `react-bootstrap-table-next` 组件进渲染。 下面是一个例页面的映射关系: ```xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="子,演示如何在渲染表格之前动态合并单元格: ```javascript import BootstrapTable from 'http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" react-bootstrap-table-next'; import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css'; function mergeCells(data, mergeColumns) { xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web // 处理需要合并的列 const merged = []; let i = 0; while (i < data.length)-app_4_0.xsd" version="4.0"> <servlet> <servlet-name>UserServlet</s { const row = data[i]; let j = i + 1; while (j < data.length && mergeColumns.every((ervlet-name> <servlet-class>com.example.servlet.UserServlet</servlet-class> </servlet> <servlet-mcol) => data[j][col] === row[col])) { j++; } if (j - i > 1) { apping> <servlet-name>UserServlet</servlet-name> <url-pattern>/UserServlet</url-pattern> </servlet // 合并需要合并或列 const mergedRow = { ...row }; mergeColumns.forEach((col) =>-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web mergedRow[col] = { value: row[col], rowSpan: j - i }); merged.push(mergedRow); } else { -app> ``` 7. 运项目 将项目部署到Tomcat服务器上,启动服务器后在浏览器中 // 不需要合并或列 merged.push(row); } i = j; } return merged; 访问`http://localhost:8080/`即可进入主页,点击“立即开始”按钮进入登录页面} const data = [ { id: 1, name: 'John', age: 30, gender: ',输入正确的用户名和密码后,进入欢迎页面,点击“退出登录”按钮即可注销用户。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值