Easyui datagrid 动态合并单元格实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012760435/article/details/54291091

最近在页面开发商遇到了一个新需求，要求在datagrid中实现同名单元格纵向合并效果，类似这样

官方demo中用的是死数据，不符合实际要求。通过对查看API，确定datagrid的合并单元格通过提供起始位置（index），合并长度（rowspan）以及合并字段名（field）。于是问题简化为：给定任意一个字符串（AAAAABCDD），如何确定每一段重复内容的开始和结束为止。如AAAAA的起始位置为0结束位置为4。
现贴上关键代码，以求抛砖引玉。

onLoadSuccess: function (data) {
        var start = 0;
        var end = 0;
        if (data.total > 0) {
            var temp = data.rows[0].displayname;
            for (var i = 1; i < data.rows.length; i++) {
                if (temp == data.rows[i].displayname) {
                    end++;
                } else {
                    if (end > start) {
                        $(this).datagrid('mergeCells', {
                            index: start,
                            rowspan: end - start + 1,
                            field: 'displayname'
                        })
                    }
                    temp = data.rows[i].displayname;
                    start = i;
                    end = i;
                }
            }
            /*这里是为了判断重复内容出现在最后的情况，如ABCC*/
            if (end > start) {
                $(this).datagrid('mergeCells', {
                    index: start,
                    rowspan: end - start + 1,
                    field: 'displayname'
                })
            }
        }
    }

稍作解释，代码主体思想是先取出基准字符串，然后依次用后一个对象与其进行对比，判断相同结束游标+1，判断不同则先判断结束游标是否大于起始游标，如是，则表明上一个连续相同的内容已经结束（如AAAB）；如不是，这说明这是两个相邻的不同字符串（如AB）。
另外值得一提的是，datagrid回调数据的时候是包含rows和total两个字段的，在取值时要注意。