具有相同值的单元格可以跨行或列合并吗？

Question

我计划在AngularJS中使用Kendo UI Grid。我有一个方案，具有相同值的单元格可以跨行合并。

我想在附加图片中实现Kendo UI网格中的行跨度？

任何人都可以帮助我。

提前非常感谢..

Answer 1

我从merging tables in javascript，kendo UI rowspan获取了代码并将其转换为有效的角度指令，我希望这可以解决您的问题。

JSFiddle： here

<强>代码：

myApp.directive('spanSupport', function() {
    return {
        restrict: 'A',
        link: function(scope,element,attrs) {
            var listOfColumns = scope.$eval(attrs.spanSupport) || [];
            console.log(listOfColumns);
                listOfColumns.forEach(function(column){
            angular.element('#' + attrs.id + '>.k-grid-content>table').each(function (index, item) {

                var dimension_col = 1;
                // First, scan first row of headers for the "Dimensions" column.
                angular.element('#' + attrs.id + '>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function () {
                  if (angular.element(this).text() == column) {

                    // first_instance holds the first instance of identical td
                    var first_instance = null;

                    angular.element(item).find('tr').each(function () {

                      // find the td of the correct column (determined by the column)
                      var dimension_td = angular.element(this).find('td:nth-child(' + dimension_col + ')');
                      if (first_instance == null) {
                        first_instance = dimension_td;
                      } else if (dimension_td.text() == first_instance.text()) {
                        // if current td is identical to the previous
                        // then remove the current td
                        dimension_td.remove();
                        if(angular.element(this).find('td:nth-child(' + dimension_col + ')')[0] !== undefined){
                            var next_td = angular.element(this).find('td:nth-child(' + dimension_col + ')');
                            next_td.css("border-left-width", "1px");                          
                        } 
                        // increment the rowspan attribute of the first instance
                        first_instance.attr('rowspan', typeof first_instance.attr('rowspan') == "undefined" ? 2 : parseInt(first_instance.attr('rowspan')) + 1);
                      } else {
                        // this cell is different from the last
                        first_instance = dimension_td;
                      }
                    });
                    return;
                  }
                  dimension_col++;
                });
              });
            });
        }
    };
});