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>';

來源

2017-04-06 user441521

人可能更渴望幫助你，如果你用一個例子創建的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

來源

2017-04-18 11:51:17 Conan

輝煌。非常感謝！ – user441521

Angular UI-Grid的圖釘圖標

回答

相關問題