kendo ui grid 的行和列 合并

本文介绍如何使用 Kendo UI Grid 实现自定义表格布局,包括自定义表头、使用 Kendo 模板初始化 Grid 数据及实现单元格的横向与纵向合并等技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值