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

这篇文章主要介绍了Bootstrap-table如何实现动态合并相同行，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

　　有时候表格的需求就是奇奇怪怪的，最近要做的表格需要实现当紧挨着的记录的某一列的行元素内容相同，就将其合并。要是不是相同的就不合并。如果表格数据的顺序不需要被改变，这个样子是可以很简单就完成的(只需要计算出所有相同元素出现的次数即可，不需要考虑是否紧挨着)，但是当可以改变排序的时候，这个时候就有点儿问题了。可能表述的有点儿不明白，下面具体看图描述问题吧。

　具体的需求，假设现在有三条记录，后台按照顺序x排好后传递给前台页面进行显示。

　页面拿到数据后将相同行进行合并后可以得到右边图的效果，但是如果现在在页面选择了一个排序按钮后，现在的排序被打乱了，又该怎样去实现合并？

　　这里值得思考的是，后面每个列的最多的合并次数是基于前一个列的合并的次数来的，所以这里是个切入点，记录下第一列所有紧挨着的相同行内容出现的次数，然后遍历，去计算第二列所有紧挨着的相同行内容出现的次数，然后遍历，去计算第三列所有紧挨着的相同行内容出现的次数，依次下去。。。。。将每一列紧挨着的相同元素的次数都记录下来，然后拿到了这些次数，最后使用bootstrapTable自带的mergeCells方法去合并即可。越来越觉得数据结构以及算法重要性，最近太多写的程序都涉及到一些逻辑的算法，还是上学时要把这两个学好呀~~~~~~~

下面看看代码：

<%--  Created by IntelliJ IDEA.  User: Administrator  Date: 2018/6/20  Time: 14:21  To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><%    String scheme = request.getScheme();    String serverName = request.getServerName();    String contextPath = request.getContextPath();    int port = request.getServerPort();    //网站的访问跟路径    String baseURL = scheme + "://" + serverName + ":" + port            + contextPath;    request.setAttribute("baseURL", baseURL);%>            <%--设置IE渲染方式(文档)默认为最高(这部分可以选择添加也可以不添加)--%>                                                
            

　上面就是完整的代码了，效果图如下：(此代码只需要计算projName,subProj,phase的合并就可以了，后面workitem不需要再合并了，因为后台查询的就是每一条workitem记录)

其中对于bootstrap-table自带的合并单元格的方法,也是很好用的,也是基于此基础上才能完成。

$('#table').bootstrapTable('mergeCells',{index:index, field:"projName", colspan: 1, rowspan: count});

感谢你能够认真阅读完这篇文章，希望小编分享的"Bootstrap-table如何实现动态合并相同行"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!