平武建站

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

如何使用Bootstrap-table实现动态合并相同行？相信很多新手小白还没学会这个技能，通过这篇文章的总结，希望你能学会学会这个技能。以下资料是实现的步骤。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：主机域名、网站空间、营销软件、网站建设、永宁网站维护、网站推广。

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

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

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

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

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

这里值得思考的是，后面每个列的最多的合并次数是基于前一个列的合并的次数来的，所以这里是个切入点，记录下第一列所有紧挨着的相同行内容出现的次数，然后遍历，去计算第二列所有紧挨着的相同行内容出现的次数，然后遍历，去计算第三列所有紧挨着的相同行内容出现的次数，依次下去。。。。。将每一列紧挨着的相同元素的次数都记录下来，然后拿到了这些次数，最后使用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实现动态合并相同行

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

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

上述就是小编为大家分享的使用Bootstrap-table实现动态合并相同行的方法了，如果您也有类似的疑惑，不妨参照上述方法进行尝试。如果想了解更多相关内容，请关注创新互联行业资讯。


网页名称：如何使用Bootstrap-table实现动态合并相同行
网址分享：http://pwwzsj.com/article/geojdh.html

其他资讯