最近在页面开发上遇到了一个新需求,要求在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两个字段的,在取值时要注意。