kendoGrid合并单元格
kendoGrid默认API中并没有合并单元格的方法，故自己借鉴网友的代码并做了改造，下述代码及完成了kendoGrid中的行的合并（在 dataBound事件中完成）
//合并单元格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.917/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.917/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.917/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.917/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.917/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "school" },
{ field: "grade" },
{ field: "class" },
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ school:'一中',grade:'高三',class:'一班',name: "张三", age: 18 },
{ school:'一中',grade:'高三',class:'二班',name: "李四", age: 18 },
{ school:'一中',grade:'高二',class:'一班',name: "王五", age: 17 },
{ school:'一中',grade:'高二',class:'二班',name: "魏无羡", age: 17 },
{ school:'一中',grade:'高二',class:'三班',name: "蓝忘机", age: 17 },
{ school:'一中',grade:'高一',class:'一班',name: "江城", age: 16 },
{ school:'一中',grade:'高一',class:'二班',name: "江厌离", age: 16 },
{ school:'二中',grade:'高三',class:'一班',name: "金石轩", age: 18 },
{ school:'二中',grade:'高三',class:'二班',name: "温宁", age: 17 },
{ school:'二中',grade:'高二',class:'一班',name: "金光瑶", age: 17 },
{ school:'三中',grade:'高三',class:'一班',name: "温兆", age: 16 },
]
},
dataBound: function () {
$('#grid>.k-grid-content>table').each(function (index, item) {
var dimension_col = 1;
$('#grid>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function () {
if ($(this).text() == 'school' || $(this).text()=='grade'
||$(this).text()=='class') {
var firstTd = null;
var rowspan = 0;
$(item).find('tr').each(function (trIndex,trItem) {
var currentTd = $(this).find('td:nth-child(' + dimension_col + ')');
if (firstTd == null) {
firstTd = currentTd;
rowspan = 0;
} else if (currentTd.text() == firstTd.text()) {
if(firstTd.attr('rowspan')==null||firstTd.attr('rowspan')==0){
var preCol = null;
$(item).find('tr').each(function (nTrIndex,nTrItem) {
if(nTrIndex<trIndex-1){
return true;
}
var currCol = $(this).find('td:nth-child(' + dimension_col + ')');
if(preCol == null){
preCol=currCol;
}
if (currCol.text() == firstTd.text()) {
rowspan++;
}
if(preCol.text()!=currCol.text()){
return false;
}
});
currentTd.hide();
firstTd.attr('rowspan', rowspan);
rowspan = 0;
}else{
currentTd.hide()
}
} else {
rowspan = 0;
firstTd = currentTd;
}
});
}
dimension_col++;
});
});
}
});
</script>
</body>
</html>
完成效果如图：
