Angular UI-grid header 单元格图标交换

Question

我正在使用 angular ui-grid 构建网格。 headers 列有一个向下的人字形，如下所示：

我非常想将该图标更改为其他图标。有没有一种简单的方法可以做到这一点，而不必经历创建自定义的麻烦 headerCellTemplate?

Answer 1

是的。

由于此更改的性质，这不是建议，但您可以更改负责在 ui-grid.js 文件中附加该图标的 class：

在 ui-grid.js

ui-grid-icon-angle-down

它将出现在以下行中：

"<div role=\"columnheader\" ng-class=\"{ 'sortable': sortable }\" ui-grid-one-bind-aria-labelledby-grid=\"col.uid + '-header-text ' + col.uid + '-sortdir-text'\" aria-sort=\"{{col.sort.direction == asc ? 'ascending' : ( col.sort.direction == desc ? 'descending' : (!col.sort.direction ? 'none' : 'other'))}}\"><div role=\"button\" tabindex=\"0\" class=\"ui-grid-cell-contents ui-grid-header-cell-primary-focus\" col-index=\"renderIndex\" title=\"TOOLTIP\"><span class=\"ui-grid-header-cell-label\" ui-grid-one-bind-id-grid=\"col.uid + '-header-text'\">{{ col.displayName CUSTOM_FILTERS }}</span> <span ui-grid-one-bind-id-grid=\"col.uid + '-sortdir-text'\" ui-grid-visible=\"col.sort.direction\" aria-label=\"{{getSortDirectionAriaLabel()}}\"><i ng-class=\"{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }\" title=\"{{isSortPriorityVisible() ? i18n.headerCell.priority + ' ' + ( col.sort.priority + 1 )  : null}}\" aria-hidden=\"true\"></i> <sub ui-grid-visible=\"isSortPriorityVisible()\" class=\"ui-grid-sort-priority-number\">{{col.sort.priority + 1}}</sub></span></div><div role=\"button\" tabindex=\"0\" ui-grid-one-bind-id-grid=\"col.uid + '-menu-button'\" class=\"ui-grid-column-menu-button\" ng-if=\"grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false\" ng-click=\"toggleMenu($event)\" ng-class=\"{'ui-grid-column-menu-button-last-col': isLastCol}\" ui-grid-one-bind-aria-label=\"i18n.headerCell.aria.columnMenuButtonLabel\" aria-haspopup=\"true\"><i class=\"ui-grid-icon-angle-down\" aria-hidden=\"true\">&nbsp;</i></div><div ui-grid-filter></div></div>"

将 ui-grid-icon-angle-down 更改为其他内容，也许是另一种很棒的字体 class（我将使用 fa fa-cogs）

Answer 2

最后我走了另一条路。我们在现有图标之上添加了一个模板，因为它似乎比将原生代码更改为 ui grid

更好

.ui-grid-column-menu-button i{
  color: white;
  background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='7.91px' height='13.412px' viewBox='0 0 7.91 13.412' enable-background='new 0 0 7.91 13.412' xml:space='preserve'><polyline fill='none' stroke='#FFFFFF' stroke-miterlimit='10' points='-690,-124 -697,-117 -703.969,-123.938 '/><polyline fill='none' stroke='#FFFFFF' stroke-miterlimit='10' points='-704.406,-134 -697.406,-141 -690.438,-134.062 '/><polygon fill='#FFFFFF' points='4.058,13.412 0.22,9.592 0.925,8.883 4.056,12 7.203,8.854 7.91,9.561 '/><polygon fill='#FFFFFF' points='0.707,4.56 0,3.853 3.853,0 7.69,3.821 6.985,4.53 3.854,1.413 '/></svg>");
  background-position: 50% 85%;
  background-repeat: no-repeat;
  width: 100%;
}

Angular UI-grid header 单元格图标交换

Angular UI-grid header cell icon swap

angular-ui-grid