版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/HZMand1/article/details/81115280
1.自定义Header:
通过修改 columns[] 来自定义头的合并
2.通过kendo 模板来自定义 初始化grid 的数据
$("id").kendoGrid({
scrollable : true,
sortable : true,
filterable:false,
resizable: true,
rowTemplate: kendo.template($("#rowTmpl").html()),
navigatable: true,
columns : [
{
field : "A",
title : "A",
width : '100px',
},
{
title : "B",
columns : [
{
title : "C",
field : "C"
},
{
title : "C",
field : "C"
},
{
title : "C",
field : "C"
},
{
title : "C",
field : "C"
}
]
}
]
});
4.rowTmpl 是写在html 上的模板数据 通过 setDatasource 来 初始化这个模板
rowTmpl 的代码
<script type="text/x-kendo-tmpl" id="rowTmpl">
#
var uid = kendo.guid();
for (var i = 0, len = list.length; i < len; i ++) {
#
<tr role="row" data-caseStatus="caseStatus_#:caseStatus#" class="caseStatus_#:caseStatus#">
<td>#:list[i].A#</td>
<td>#:list[i].B#</td>
<td>#:list[i].C#</td>
</tr>
#
}
#
</script>
注意的是 <td> 的标签 的数据 对应 grid 头定义的 列数,不然会排版有误。
看到<tr> <td> 的标签 就好办了 和我们 通常用的table 是一样的,根据自己的 业务需要使用colspan、rowspan 横向合并和纵向合并。
注意的是纵向合并的时候 可以先对数据进行分组 在加载数据
var finalList = [];
$.each(resultList, function(index, item){
//校验是否存在
var exist = _.find(finalList, function(obj){
return obj.A == item.B;
});
if (exist) {
exist.list.push(item);
} else {
var group = {submitChannel: item.A, list: []};
group.list.push(item);
finalList.push(group);
}
});
var dataSource = new kendo.data.DataSource({data: resultList});
$("#id").data("kendoGrid").setDataSource(dataSource);