Как объединить ячейки в сетке пользовательского интерфейса Kendo
я хочу объединить ячейки (Row span или col span) в сетке Kendo ui Grid, как мы можем это сделать?
да, вы правы: "слияние ячеек в сетке Kendo UI не поддерживается", поэтому в конце концов я решил объединить ячейки после рендеринга сетки kendo ui, поэтому я использовал javascript для слияния ячеек в событии DataBound сетки kendo ui.
определение функции, которое я вызвал в событии 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++;
});
});
}
+5!
Слияние ячеек в сетке Kendo UI не поддерживается
Пожалуйста, прочтите это: Динамическое добавление / удаление столбцов и слияние ячеек сетки пользовательского интерфейса Kendo[^]
поддерживается несколько столбцов!
использование в Примере databound :
mergeGridRows("GridID", ["Column1", "Column2", "Column3"])
function mergeGridRows(gridId, colTitles) {
$('#' + gridId + '>.k-grid-content>table').each(function (index, item) {
debugger;
var dimension_col = 1;
var sutunSayisi = parseInt($('#' + gridId + '>.k-grid-header>.k-grid-header-wrap>table').find('th').size()) / 2;
// First, scan first row of headers for the "Dimensions" column.
$('#' + gridId + '>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function () {
var indexOf = colTitles.indexOf($(this).text());
if (indexOf>-1) {
// first_instance holds the first instance of identical td
var first_instance = null;
dimension_col = $(this).index() + 1;
$(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-(sutunSayisi-$(this).find('td').size())) + ')');
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 : parseInt(first_instance.attr('rowspan')) + 1);
} else {
// this cell is different from the last
first_instance = dimension_td;
}
});
return;
}
});
});
}
Решение 2 хорошо для сетки кендо, но для редактируемой сетки кендо оно сдвинет следующие столбцы вправо на один столбец.
Вот исправление для этой проблемы:
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', bgColor).css('color', foreColor).css('border-bottom-color', rightBorderColor);
});
arrCells = ChangeMergedCells(arrCells, cellText, false);
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
}
return arrCells;
}