我没有在Kendo UI的官方文档中看到任何内容。只是检查某人是否已完成自定义以合并Kendo UI Grid中的单元格。
我有这样的内容：
Technology Core Language & Communication 15
----------------------------------------------------------------------------------
Technology Mathematics & Application 20
----------------------------------------------------------------------------------
Technology Science Application & Understanding 30
---------------------------------------------------------------------------------
Communication Using language to reason, interpret & analyse 40
---------------------------------------------------------------------------------
Communication Using visualization for design/creating 40
我需要获得以下输出：
Technology Core Language & Communication 15
-----------------------------------------------------------------
Mathematics & Application 20
-----------------------------------------------------------------
Science Application & Understanding 30
---------------------------------------------------------------------------------
Communication Using language to reason, interpret & analyse 40
-----------------------------------------------------------------
Using visualization for design/creating 40
不确定如何使用模板完成。
不支持在Kendo UI网格中合并单元格。
所以最后我决定在渲染kendo ui网格后合并单元格，所以我使用javascript合并了kendo ui Grid的DataBound事件中的单元格。
function mergeGridRows(gridId, colTitle) {
$('#' + gridId + '>.k-grid-content>table').each(function (index, item) {
var dimension_col = 1;
// First, scan first row of headers for the "Dimensions" column.
$('#' + gridId + '>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function () {
if ($(this).text() == colTitle) {
// first_instance holds the first instance of identical td
var first_instance = null;
$(item).find('tr').each(function () {
// find the td of the correct column (determined by the colTitle)
var dimension_td = $(this).find('td:nth-child(' + dimension_col + ')');
if (first_instance == null) {
first_instance = dimension_td;
} else if (dimension_td.text() == first_instance.text()) {
// if current td is identical to the previous
// then remove the current td
dimension_td.remove();
// increment the rowspan attribute of the first instance
first_instance.attr('rowspan', typeof first_instance.attr('rowspan') == "undefined" ? 2 : first_instance.attr('rowspan') + 1);
} else {
// this cell is different from the last
first_instance = dimension_td;
}
});
return;
}
dimension_col++;
});
});
}
我正在扩展处理所有场景的上述代码。
function MergeGridRows(gridId, colTitle) {
$('#' + gridId + '>.k-grid-content>table').each(function (index, item) {
var dimension_col = 1;
// First, scan first row of headers for the "Dimensions" column.
$('#' + gridId + '>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function () {
var _this = $(this);
if (_this.text() == colTitle) {
var bgColor = _this.css('background-color');
var foreColor = _this.css('color');
var rightBorderColor = _this.css('border-right-color');
// first_instance holds the first instance of identical td
var first_instance = null;
var cellText = '';
var arrCells = [];
$(item).find('tr').each(function () {
// find the td of the correct column (determined by the colTitle)
var dimension_td = $(this).find('td:nth-child(' + dimension_col + ')');
if (first_instance == null) {
first_instance = dimension_td;
cellText = first_instance.text();
} else if (dimension_td.text() == cellText) {
// if current td is identical to the previous
dimension_td.css('border-top', '0px');
} else {
// this cell is different from the last
arrCells = ChangeMergedCells(arrCells, cellText, true);
//first_instance = dimension_td;
cellText = dimension_td.text();
}
arrCells.push(dimension_td);
dimension_td.text("");
dimension_td.css('background-color', 'white').css('color', 'black').css('border-bottom-color', 'transparent');
});
arrCells = ChangeMergedCells(arrCells, cellText, true);
return;
}
dimension_col++;
});
});
}
function ChangeMergedCells(arrCells, cellText, addBorderToCell) {
var cellsCount = arrCells.length;
if (cellsCount > 1) {
var index = parseInt(cellsCount / 2);
var cell = null;
if (cellsCount % 2 == 0) { // even number
cell = arrCells[index - 1];
arrCells[index - 1].css('vertical-align', 'bottom');
}
else { // odd number
cell = arrCells[index];
}
cell.text(cellText);
if (addBorderToCell) {
arrCells[cellsCount - 1].css('border-bottom', 'solid 1px #ddd');
}
arrCells = []; // clear array for next item
}
if (cellsCount == 1) {
cell = arrCells[0];
cell.text(cellText);
arrCells[0].css('border-bottom', 'solid 1px #ddd');
arrCells = [];
}
return arrCells;
}