角度ui.grid列跨越

Question

如何实现UI-Grid中的列跨越，用于中间行。 这样的行可以与列匹配，列跨越可以是各种模式。

如下所示

Answer 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