我认为这很简单,结果却不是......或者至少,我做错了什么而且我无法弄清楚是什么。
让我解释一下我要做的事情:
如果我有我的网格,我想要一个加号/添加'网格右上角的图标。所以我想,我编辑了headerTemplate
,这就是我被卡住的地方。这就是我现在拥有headerTemplate的方式:
<div role="rowgroup" class="ui-grid-header"> <!-- theader -->
<div class="ui-grid-top-panel">
<div class="ui-grid-header-viewport">
<div class="ui-grid-header-canvas">
<div class="ui-grid-header-cell-wrapper" ng-style="colContainer.headerCellWrapperStyle()">
<div role="row" class="ui-grid-header-cell-row">
<div class="ui-grid-header-cell ui-grid-clearfix" ng-repeat="col in colContainer.renderedColumns track by col.uid" ui-grid-header-cell col="col" render-index="$index">
</div>
<div class="ui-grid-header-cell ui-grid-clearfix">Icon</div>
</div>
</div>
</div>
</div>
</div>
这&#34;添加&#34; div,但它不适合它在网格中,它将它放在外面..如何添加一个被识别为列的列,其中只包含图标。
我知道我可以使用gridOptions执行此操作,只添加另一个没有数据的字段,但我希望这个应用程序很宽,所以我真的希望这个作为模板。说实话,ui-grid的模板方式让我感到困惑..任何帮助都会非常感激!
如果我不清楚,请告诉我,我会尽力澄清。
答案 0 :(得分:0)
我找到了解决办法:
<div role="rowgroup" class="ui-grid-header"> <!-- theader -->
<div class="ui-grid-top-panel">
<div class="ui-grid-header-viewport">
<div class="ui-grid-header-canvas">
<div class="ui-grid-header-cell-wrapper" ng-style="colContainer.headerCellWrapperStyle()">
<div role="row" class="ui-grid-header-cell-row">
<div class="ui-grid-header-cell ui-grid-clearfix"
ng-repeat="col in colContainer.renderedColumns track by col.uid" ui-grid-header-cell
col="col" render-index="$index">
</div>
<div role="button"
class="ui-grid-column-menu-button"
ng-click="addRecord()"
ng-class="{'ui-grid-column-menu-button-last-col': isLastCol}"
ui-grid-one-bind-aria-label="i18n.headerCell.aria.columnMenuButtonLabel"
aria-haspopup="true">
<span class="material-icons" style="padding: 5px; cursor:pointer;">add</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我使用ui-grid-column-menu-button
类来显示我自己的图标。这很像一个魅力,不幸的是你使用网格菜单的功能。我在其他地方有我的菜单,所以这对我来说很有用。
这是最终结果: