Как добиться охвата столбца в UI-Grid для строки между ними. Такие строки могут быть отсортированы с помощью столбца с охватом столбца, который может быть в сортированном шаблоне.
как показано ниже
Как добиться охвата столбца в UI-Grid для строки между ними. Такие строки могут быть отсортированы с помощью столбца с охватом столбца, который может быть в сортированном шаблоне.
как показано ниже
Это не самое красивое, но я бы сделал это, создав собственный шаблон строки с ng-if
в нем. Если вашей строке назначено транспортное средство, покажите столбцы как обычно, если это не так, покажите первый столбец, а затем вашу кнопку.
<div>
<!-- normal rows with car -->
<div ng-if="row.entity.hasCar">
<div ng-repeat="(colRenderIndex, col) in 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>
<!-- first row and button with no car -->
<div ng-if="!row.entity.hasCar">
<div class="no-car-container">
<div ng-repeat="(colRenderIndex, col) in [colContainer.renderedColumns[0]] track by col.colDef.name"
class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }"
ui-grid-cell></div>
<div class="ui-grid-cell-contents">
<div class="no-car">
<button type="button" class="btn">Assign a vehicle</button>
</div>
</div>
</div>
</div>
</div>
Затем я бы добавил специальный шаблон ячейки и некоторый пользовательский CSS, чтобы все выглядело так, как вы хотите.
Вот очень хорошо работающий плункер: http://plnkr.co/edit/OTIu84JxiUnInr8w8XFT?p=preview< /а>