angular ui.grid 列跨越
angular ui.grid column spanning
如何实现 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 以按照您想要的方式布置所有内容。
这是一个非常接近工作的 plunker:http://plnkr.co/edit/OTIu84JxiUnInr8w8XFT?p=preview
如何实现 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 以按照您想要的方式布置所有内容。
这是一个非常接近工作的 plunker:http://plnkr.co/edit/OTIu84JxiUnInr8w8XFT?p=preview