首先看效果图
接着是定义js方法
//合并单元格 主要实现代码
jQuery.fn.rowspan = function (array) {
return this.each(function () {
for(var i=0;i<array.length;i++){ //首先循环数组中的每条数据
$('tr',this).each(function(){ //接着依次找出需要跨行的tr
if($(this).index()==array[i][0]){ //通过第一个值确认tr
//通过第一个值确认td给需要跨行的td加上rowspan属性及相对的数值
$(this).children('td').eq(array[i][1]).attr('rowspan',array[i][2]);
//最重要的一点就是隐藏tr下的对应td节点,
var $next = $(this).next();
for(var j=0;j<array[i][2] - 1;j++){ //通过第三个值确认需要隐藏的td节点数
$next.children('td').eq(array[i][1]).hide();
$next = $next.next(); //第三个值较大时重新确认新的tr节点
}
}
})
}
});
};
在ligerGrid配置时调用定义好的方法
var ligerGrid= $("#ligerGrid").ligerGrid({
columns:'自定义',
pageSize: 10,
rowHeight:36,
headerRowHeight: 36,
width: '100%',
usePager :false,
data :data03 ,
frozenRownumbers: false,
rownumbersColWidth: 50,
fixedCellHeight:false,
onAfterShowData: function () {
var array = [[0,0,3],[0,2,3]];
//[trIndex,tdIndex,num]
// trIndex:tr的下表 tdindex:td的下表 num:需要跨的行数
$('#ligerGrid .l-grid-body-table tbody').rowspan(array);
}
})
主要就是对ligerGrid已经渲染好的demo进行操作,明白原理其实还挺简单的。