在Kendo网格中为分组数据重复辅助标题
如何创建以下设计的剑道网格。基本上，我需要在kendo网格中绑定分组的数据。例如，同一问题可能存在于多个设备上，因此对于具有相同问题的所有设备，问题详细信息应绑定一次，并且每个问题都应重复制作模型标题
如何为每个问题组重复制作“模型”标题
我可以创建以下内容：
具有以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Reorder Column</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1118/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script></head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
columns: [
{ field: "Issue", title:"Issue"},
{ field: "Description", title:"Description"},
{ field:"Components", columns:[
{ field: "Make", title: "Make"},
{ field: "Model", title: "Model"},
]}
],
dataSource: [
{ Issue: "1", Description: "Test", Make: "K1", Model: "L1"},
{ Issue: "1", Description: "Test", Make: "K2", Model: "L2"},
{ Issue: "1", Description: "Test", Make: "K3", Model: "L3"},
{ Issue: "2", Description: "Check", Make: "K4", Model: "L4"},
{ Issue: "2", Description: "Check", Make: "K4", Model: "L4"}] ,
reorderable: true
});
// Merging cells should start from Right to Left. Otherwise, column index will change & hence will create issue
mergeGridRows("grid", "Description");
mergeGridRows("grid", "Issue");
});
function mergeGridRows(gridId, colTitle) {
// looping through grid data
$('#' + gridId + '>.k-grid-content>table').each(function (index, item) {
var colIndex = 1;
// looping through grid header
$('#' + gridId + '>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function () {
// Get the column for which rows need to be merged
if ($(this).text() == colTitle) {
// first instance of the identical cell(td) value to be merged
var firstCell = null;
$(item).find('tr').each(function () {
// get the td to be merged
var currentCell = $(this).find('td:nth-child(' + colIndex + ')');
if (firstCell == null) {
firstCell = currentCell;
} else if (currentCell.text() == firstCell.text()) {
// if value in current td & prevous td is same, remove the current td & increase rowspan of the 1st td
currentCell.remove();
var firstCellRowSpan = firstCell.attr('rowspan');
// increment rowspan of the first td
firstCell.attr('rowspan', typeof firstCellRowSpan == "undefined" ? 2 : parseInt(firstCellRowSpan) + 1);
}
else {
// this cell is different from the last
firstCell = currentCell;
}
});
return;
}
// increment the col index, to scan for the next td, nth column may need merging
colIndex++;
});
});
}
</script>
</div>
</body>
</html>
1 个答案:
答案 0 :(得分：0)
我编写了一个JS函数，以便在每组数据之后插入新行。它不是很通用，但是解决了我的目的。以下是代码段
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Reorder Column</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1118/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script></head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
columns: [
{ field: "Issue", title:"Issue"},
{ field: "Description", title:"Description"},
{ field:"Components", columns:[
{ field: "Make", title: "Make"},
{ field: "Model", title: "Model"},
]}
],
dataSource: [
{ Issue: "1", Description: "Test", Make: "K1", Model: "L1"},
{ Issue: "1", Description: "Test", Make: "K2", Model: "L2"},
{ Issue: "1", Description: "Test", Make: "K3", Model: "L3"},
{ Issue: "2", Description: "Check", Make: "K4", Model: "L4"},
{ Issue: "2", Description: "Check", Make: "K4", Model: "L4"}] ,
reorderable: true
});
addGroupHeader("grid", "Description");
// Merging cells should start from Right to Left. Otherwise, column index will change & hence will create issue
mergeGridRows("grid", "Description");
mergeGridRows("grid", "Issue");
});
function mergeGridRows(gridId, colTitle) {
// looping through grid data
$('#' + gridId + '>.k-grid-content>table').each(function (index, item) {
var colIndex = 1;
// looping through grid header
$('#' + gridId + '>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function () {
// Get the column for which rows need to be merged
if ($(this).text() == colTitle) {
// first instance of the identical cell(td) value to be merged
var firstCell = null;
$(item).find('tr').each(function () {
// get the td to be merged
var currentCell = $(this).find('td:nth-child(' + colIndex + ')');
if (firstCell == null) {
firstCell = currentCell;
} else if (currentCell.text() == firstCell.text()) {
// if value in current td & prevous td is same, remove the current td & increase rowspan of the 1st td
currentCell.remove();
var firstCellRowSpan = firstCell.attr('rowspan');
// increment rowspan of the first td
firstCell.attr('rowspan', typeof firstCellRowSpan == "undefined" ? 2 : parseInt(firstCellRowSpan) + 1);
}
else {
// this cell is different from the last
firstCell = currentCell;
}
});
return;
}
// increment the col index, to scan for the next td, nth column may need merging
colIndex++;
});
});
}
// title of column, after which secondary header should be placed
function addGroupHeader(gridId, colTitle){
// When value in 2 adjacent cells for the column varies, add a tr with secondary header
// looping through grid data
$('#' + gridId + '>.k-grid-content>table').each(function (index, item) {
var colIndex = 1;
// looping through grid header
$('#' + gridId + '>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function () {
// Get the column for which rows need to be merged
if ($(this).text() == colTitle) {
// first instance of the identical cell(td) value to be merged
var firstCell = null;
$(item).find('tr').each(function () {
// get the td to be merged
var currentCell = $(this).find('td:nth-child(' + colIndex + ')');
if (firstCell == null) {
firstCell = currentCell;
} else if (currentCell.text() !== firstCell.text()) {
// if value in current td & prevous td are different, add a tr before parent of first cell
$('<tr><td></td><td></td><td class = "secondaryheader">Make</td><td class = "secondaryheader">Model</td></tr>').insertAfter(firstCell.parent());
}
firstCell = currentCell;
});
return;
}
// increment the col index, to scan for the next td, nth column may need grouping
colIndex++;
});
});
}
</script>
<style>
.secondaryheader{
font-weight: bold;
border: 1px solid black !important;
}
</style>
</div>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？