我在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
不确定如何使用模板完成。
答案 0 :(得分：2)
不支持合并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++;
});
});
}
答案 1 :(得分：1)
我正在扩展上述代码，以处理所有情况。
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;
}
答案 2 :(得分：0)
我要扩展上面的代码，该代码支持多个网格列合并使用网格数据绑定的名称。 需要进行函数调用---> MergeGridRows（GridId，[“ Column1”，“ Column2”，“ Column3”，..，“ Column Nth ”]））; <---
function MergeGridRows(gridId, colTitles) {
debugger;
$(gridId + '>.k-grid-content-locked>table').each(function (index, item) {
$(gridId + '>.k-grid-header>.k-grid-header-locked>table').find('th').each(function () {
var _this = $(this);
var IsExistVal = $.grep(colTitles, function (e) { return e == _this.text(); });
if (IsExistVal.length > 0) {
// First, scan first row of headers for the "Dimensions" column.
var dimension_col = colTitles.indexOf(_this.text()) + 1;
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 PrevCombText = '';
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 + ')');
var FullTxt = "";
for (var CellInd = dimension_col-1; CellInd > 0; CellInd--) {
FullTxt += $(this).find('td:nth-child(' + CellInd + ')').text();
}
if (first_instance == null) {
first_instance = dimension_td;
cellText = first_instance.text();
} else if (FullTxt + dimension_td.text() == PrevCombText+cellText) {
// if current td is identical to the previous
dimension_td.css('border-top', '0px');
PrevCombText = FullTxt;
} else {
// this cell is different from the last
arrCells = ChangeMergedCells(arrCells, cellText, true);
//first_instance = dimension_td;
cellText = dimension_td.text();
PrevCombText = "";
}
arrCells.push(dimension_td);
dimension_td.text("");
dimension_td.css('background-color', bgColor).css('color', foreColor).css('border-bottom-color', 'transparent');
});
arrCells = ChangeMergedCells(arrCells, cellText, true);
return;
}
dimension_col++;
});
});
}
function ChangeMergedCells(arrCells, cellText, addBorderToCell) {
//Clusters are taken from the code every where (not anything from DB)
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;
}
答案 3 :(得分：-1)
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 = [];
var prev = null;
$(item).find('tr').each(function (i) {
// find the td of the correct column (determined by the colTitle)
var dimension_td = $(this).find('td:nth-child(' + dimension_col + ')');
dimension_td.css('background-color', 'white').css('color', 'black').css('border-bottom-color', 'transparent');
!dimension_td.data("cell") && dimension_td.attr("data-cell", dimension_td.text())
if (first_instance == null) {
first_instance = dimension_td;
cellText = first_instance.data("cell");
} else if (dimension_td.data("cell") == cellText) {
// if current td is identical to the previous
dimension_td.css('border-top', '0px');
} else {
prev.css('border-bottom', 'solid 1px #ddd');
arrCells = ChangeMergedCells(arrCells, cellText, false);
cellText = dimension_td.data("cell");
}
prev = dimension_td;
arrCells.push(dimension_td);
dimension_td.text("");
});
arrCells = ChangeMergedCells(arrCells, cellText, true);
return;
}
dimension_col++;
});
});
}
function ChangeMergedCells(arrCells, cellText, isLastCell) {
var cellsCount = arrCells.length;
if (cellsCount > 1) {
var index = Math.ceil(cellsCount / 2);
arrCells[index - 1].text(cellText);
}
if (cellsCount == 1) {
arrCells[0].text(cellText);
}
isLastCell && arrCells[cellsCount - 1].css('border-bottom', 'solid 1px #ddd');
arrCells = [];
return arrCells;
}