Angular UI-Grid的图钉图标

问题描述：

我正在寻找在固定列的列名旁边显示一个小图钉图像，以便更明显。Angular UI-Grid的图钉图标

我已经在使用自定义标头，因为我为每列提供功能的每个列显示一个菜单图标，但不知道如何判断该列是否被固定，然后在固定时显示图像。

这里是我当前的自定义标题：

解决此

var newValuesColumnHeaderTemplate = '<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 class="list-icon">' + 
    '  <span class="glyphicon glyphicon-list" ng-click="grid.appScope.editOptionValues(col.field)"></span>' + 
    ' </div>' + 
    '' + 
    ' <div role="button"' + 
    '   tabindex="-1"' + 
    '   style="padding-left:15%"' + 
    '   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="{{col.sort.priority ? i18n.headerCell.priority + \' \' + col.sort.priority : null}}"' + 
    '    aria-hidden="true">' + 
    '   </i>' + 
    '   <sub class="ui-grid-sort-priority-number">' + 
    '    {{}}' + 
    '   </sub>' + 
    '  </span>' + 
    ' </div>' + 
    ' <div role="button"' + 
    '   tabindex="-1"' + 
    '   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">' + 
    '    ' + 
    '  </i>' + 
    ' </div>' + 
    ' <div ui-grid-filter></div>' + 
    '</div>';

人可能更渴望帮助你，如果你用一个例子创建的jsfiddle（https://jsfiddle.net/）。这将减少使您成为工作解决方案的时间。 – tiblu

答

一种方式可以是目标通过CSS，如钉扎列（假设FontAwesome已针对图像参考）：

.ui-grid-pinned-container .ui-grid-header-cell { 
    position: relative; 
} 

.ui-grid-pinned-container .ui-grid-header-cell:after { 
    position: absolute; 
    font-family: 'FontAwesome'; 
    content: '\f08d'; // fa-thumb-tack 
    font-size: .75em; 
    right: 2em; 
    top: 0.5em; 
    width: 1em; 
    height: 1em; 
}

参见：http://plnkr.co/edit/RU4KnysM6s0aeYzI3KYJ?p=preview

辉煌。非常感谢！ – user441521

Angular UI-Grid的图钉图标

相关推荐