ъглово ui.grid обхващаща колона

Как да постигнете обхвата на колоните в UI-Grid, за ред между тях. Такива редове могат да бъдат сортирани с колона с Обхващане на колони може да бъде в сортиран модел.

както е показано по-долу

въведете описание на изображението тук


person vamsikrishnamannem    schedule 09.04.2015    source източник


Отговори (1)


Не е най-красивото, но начинът, по който бих постъпил за това, е като направя персонализиран шаблон на ред с 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

person c0bra    schedule 09.04.2015