kendoGrid合并单元格

最新推荐文章于 2022-10-26 09:24:52 发布

风水月

最新推荐文章于 2022-10-26 09:24:52 发布

阅读量1.6k

点赞数 2

分类专栏： js 文章标签： kendoGrid 合并单元格

本文链接：https://blog.csdn.net/fengshuiyue/article/details/102570616

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

kendoGrid默认API中并没有合并单元格的方法，故自己借鉴网友的代码并做了改造，下述代码及完成了kendoGrid中的行的合并（在 dataBound事件中完成）

//合并单元格
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.917/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.917/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.917/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.917/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.3.917/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "school" },
    { field: "grade" },
    { field: "class" },
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
    data: [
      { school:'一中',grade:'高三',class:'一班',name: "张三", age: 18 },
      { school:'一中',grade:'高三',class:'二班',name: "李四", age: 18 },
      { school:'一中',grade:'高二',class:'一班',name: "王五", age: 17 },
      { school:'一中',grade:'高二',class:'二班',name: "魏无羡", age: 17 },
      { school:'一中',grade:'高二',class:'三班',name: "蓝忘机", age: 17 },
      { school:'一中',grade:'高一',class:'一班',name: "江城", age: 16 },
      { school:'一中',grade:'高一',class:'二班',name: "江厌离", age: 16 },
      { school:'二中',grade:'高三',class:'一班',name: "金石轩", age: 18 },
      { school:'二中',grade:'高三',class:'二班',name: "温宁", age: 17 },
      { school:'二中',grade:'高二',class:'一班',name: "金光瑶", age: 17 },
      { school:'三中',grade:'高三',class:'一班',name: "温兆", age: 16 },
    ]
  },
  dataBound: function () {
    $('#grid>.k-grid-content>table').each(function (index, item) {

      var dimension_col = 1;
      $('#grid>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function () {
        if ($(this).text() == 'school' || $(this).text()=='grade'
           		||$(this).text()=='class') {
          var firstTd = null;
          var rowspan = 0;
          $(item).find('tr').each(function (trIndex,trItem) {
            var currentTd = $(this).find('td:nth-child(' + dimension_col + ')');
            if (firstTd == null) {
              firstTd = currentTd;
              rowspan = 0;
            } else if (currentTd.text() == firstTd.text()) {
              if(firstTd.attr('rowspan')==null||firstTd.attr('rowspan')==0){
                var preCol = null;
                $(item).find('tr').each(function (nTrIndex,nTrItem) {
                	if(nTrIndex<trIndex-1){
                    	return true;
					}
                	var currCol = $(this).find('td:nth-child(' + dimension_col + ')');
					if(preCol == null){
						preCol=currCol;
					}
					if (currCol.text() == firstTd.text()) {
						rowspan++;
					}
					if(preCol.text()!=currCol.text()){
						return false;
					}
                });

                currentTd.hide();
                firstTd.attr('rowspan', rowspan);
                rowspan = 0;
            	}else{
                	currentTd.hide()
				}
            } else {
              rowspan = 0;
              firstTd = currentTd;
            }
          });
        }
        dimension_col++;
      });

    });
  }
});
</script>
</body>
</html>

完成效果如图：
合并单元格

风水月

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
1
评论
kendoGrid合并单元格

kendoGrid默认API中并没有合并单元格的方法，故自己借鉴网友的代码并做了改造，下述代码及完成了kendoGrid中的行的合并（在 dataBound事件中完成）//合并单元格<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>Kendo UI...
复制链接

扫一扫