Question

我希望在固定的列上的列名旁边显示一个小图钉图像，这样就更明显了。

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

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

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

Answer 1

解决这个问题的一种方法可能是通过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

Angular UI-Grid的图钉图标

1 个答案: