天天看點

kendoGrid合并單元格

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>
           

完成效果如圖:

kendoGrid合并單元格