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);