Angular UI-grid header cell icon swap

Question

我正在使用角度ui网格构建网格。列标题有一个向下的V形符号，如下所示：

我非常希望将该图标更改为其他内容。有没有一种简单的方法可以做到这一点，而不必经历创建自定义headerCellTemplate的头痛？

Answer 1

最后我走了另一条路。我们添加了现有图标的模板，因为它似乎比将原生代码更改为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%;
}

Answer 2

烨。

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

1. 在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>"

1. 将ui-grid-icon-angle-down更改为其他内容，可能是另一个字体非常棒的类（我将使用fa fa-cogs）