Ich versuche, ein Glyphicon Glyphon-Thlist (das kann ich klicken und rufen Sie eine Controller-Funktion) auf der linken Seite der Standard-Header. Ich nahm den Standard-Header und versuchte, es zu manipulieren, um dies zu tun. Die Standard-Kopfzeile befindet sich: https://raw.githubusercontent.com/angular-ui/ui-grid/master/src/templates/ui-grid/uiGridHeaderCell.htmleckig ui-grid benutzerdefinierte header html
Ich änderte es auf die unten, aber was passiert, ist, dass ich mit 2 Zeilen enden. Die obere Reihe hat mein Symbol auf der linken Seite, auf der rechten Seite ist das Dropdown-Menü für die Sortierung und dann die zweite Zeile hat die Spaltenüberschrift, die beim Anklicken die Sortierung asc/desc ändert. Ich bin nicht der Beste dabei, also frage mich, wie ich all diese in der gleichen Zeile (nur 1 Zeile, wo meine Liste Symbol auf der linken Seite ist und direkt daneben ist die Spalte Label, und dann die Sortierung Drop-Down) Pfeil).
<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"
ui-grid-one-bind-id-grid="col.uid + \'-menu-button\'"
class="glyphicon glyphicon-th-list"
ng-if="grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false"
ng-click="editOptionValues($event)"
ng-class="{\'ui-grid-column-menu-button-last-col\': isLastCol}"
ui-grid-one-bind-aria-label="i18n.headerCell.aria.columnMenuButtonLabel"
aria-haspopup="true">
</div>
<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">
</i>
</div>
<div ui-grid-filter></div>
</div>
Das ist nicht mein Beispiel, aber es hat die Header-Template so kann es mit gearbeitet werden:
http://plnkr.co/edit/KitYBfKuRTQppuSRUCh7?p=preview
können Sie vielleicht einen bieten [jsfiddle] (https://jsfiddle.net/)/[Plunker] (https://plnkr.co/)? –
Ich habe am Ende der ursprünglichen Frage einen Plunder hinzugefügt. Vielen Dank. – user441521
@ user441521 Überprüfen Sie meine Antwort. Ich hoffe, es wird Ihre Anforderung erfüllen. –