bootstrap表格某一列值相同时_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.

--%>

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);

%>

实现表格同名合并

$(function () {

//初始化Table

$('#table').bootstrapTable({

url: '${baseURL}/Views/cc.json',//请求后台的URL(*) 这里我用的是一个json文件

method: 'get',//请求方式(*)

toolbar: '#toolbar',//工具按钮用哪个容器

striped: true,//是否显示行间隔色

cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性(*)

pagination: true,//是否显示分页(*)

sortable: false,//是否启用排序

sortOrder: "asc",//排序方式

//queryParams: queryParams,//传递参数(*)

sidePagination: "server",//分页方式：client客户端分页，se