Объединить определенные столбцы в сетке пользовательского интерфейса

Question

У меня есть сетка пользовательского интерфейса, где мне нужно объединить некоторые средние столбцы.Это должно выглядеть примерно так:

Name   | Address  | Comment  | Job  |  College | Married
----------------------------------------------------------
Keshvi | India    | New      | Not applicable  | No
----------------------------------------------------------

В настоящее время я использую rowTemplate.

function rowTemplate() {
    return  '  <div ng-repeat="(colRenderIndex, col) in grid.appScope.customiseRowsDeletedBy(colContainer.renderedColumns) track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }"  ui-grid-cell></div>' +
        '  <div class="other-override-background" >{{row.entity.job}}</div>' +
        '  <div ng-repeat="(colRenderIndex, col) in [colContainer.renderedColumns[5]]) track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ng-style="{position:\'absolute\, display:\'block\'}" ui-grid-cell ></div>' 
        '</div>';
}


$scope.customiseRowsDeletedBy = (arr) => arr.slice(0, 2);

однако мой вывод выглядит примерно так:

Name   | Address  | Comment  | Job  |  College | Married
----------------------------------------------------------
Keshvi | India    | New      | Not applicable  | 
----------------------------------------------------------
No
----------------------------------------------------------

Третий div сдвигает содержимое вниз.

Есть идеи, как это сделать?

Answer 1

Объекты TableData имеют свойство ColSpan, которое вы можете использовать.

    document.getElementById("myTd").colSpan = "2";

Я не слишком знаком с rowTemplate, но, возможно, у него есть похожее свойство.