角度用戶界面自定義頁眉html

我正在嘗試在默認頁眉的左側添加一個glyphicon glyphicon-thlist（我可以點擊並調用控制器函數）。我採取了默認標題，並試圖操縱它來做到這一點。默認頭文件位於：https://raw.githubusercontent.com/angular-ui/ui-grid/master/src/templates/ui-grid/uiGridHeaderCell.html 角度用戶界面自定義頁眉html

我將它更改爲下面的內容，但是會發生什麼情況是最終有2行。頂部的行在左側有我的圖標，右側是排序下拉列表，然後第二行有列標題，當您單擊切換排序asc/desc時。我不是最好的，所以想知道如何將所有這些放在同一行（只有一行，我的列表圖標位於左側，右側是列標籤，然後是排序下拉列表箭頭）。

<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"> 
     &nbsp; 
    </i> 
    </div> 

    <div ui-grid-filter></div> 
</div>

這不是我的例子，但它有頭模板，以便它可以與合作：

http://plnkr.co/edit/KitYBfKuRTQppuSRUCh7?p=preview

來源

2017-02-21 user441521

可你或許提供了一個[的jsfiddle（https://jsfiddle.net/）/ [plunker]（https://plnkr.co/）？ –

我在原始問題的底部添加了一個活塞。謝謝。 – user441521

@ user441521檢查我的答案。我希望它能滿足你的要求。 –

要添加glyphicon glyphicon-list你只需要format頁眉細胞成由headerCellTemplate指出的HTML。
要添加函數調用點擊您需要添加此在您的吞嚥圖標容器ng-click="grid.appScope.callFunction()"。

DEMO

來源

2017-02-25 20:36:00

這與掠奪者合作，所以我必須把它給你。但在我的項目中，這仍然顯示在不同的行上的圖形，不知道爲什麼。 – user441521

角度用戶界面自定義頁眉html

回答

相關問題