Ui-Grid header - 在最后添加图标 header-column

Question

我想的很简单，结果证明不是..或者至少，我做错了什么，我不知道是什么。

让我解释一下我要做什么：

如果我有自己的网格，我希望在网格的右上角有一个 'plus/add' 图标。所以我想，我编辑了 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>

这个 "adds" div，但它不适合网格，它只是放在外面..我如何添加一个被识别为列的列，与只是其中的图标。

我知道我可以使用 gridOptions 来做到这一点，只需添加另一个没有数据的字段，但我希望这个应用程序更广泛，所以我真的很喜欢这个作为模板。老实说，ui-grids 的模板化方式让我感到困惑。任何帮助将不胜感激！

如果我不清楚，请告诉我，我会尽力澄清。

Answer 1

我找到了解决方法：

<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-buttonclass来显示我自己的图标。这就像一个魅力，不幸的是你使用了网格菜单的功能。我的菜单在别处，所以这个对我来说很合适。

这是最终结果：

Ui-Grid header - 在最后添加图标 header-column

Ui-Grid header - Add Icon in last header-column

javascript

angularjs

angular-ui-grid