मैं डिफ़ॉल्ट हेडर के बाईं ओर एक ग्लिफिकॉन ग्लाइफिकॉन-थलिस्ट (जिसे मैं नियंत्रक फ़ंक्शन पर क्लिक और कॉल कर सकता हूं) जोड़ने की कोशिश कर रहा हूं। मैंने डिफ़ॉल्ट हेडर लिया और ऐसा करने के लिए इसे कुशल बनाने की कोशिश की। डिफ़ॉल्ट शीर्षलेख स्थित है: https://raw.githubusercontent.com/angular-ui/ui-grid/master/src/templates/ui-grid/uiGridHeaderCell.htmlकोणीय यूई-ग्रिड कस्टम हेडर एचटीएमएल
मैंने इसे नीचे बदल दिया, लेकिन क्या होता है मैं 2 पंक्तियों के साथ समाप्त होता हूं। शीर्ष पंक्ति में बाईं ओर मेरा आइकन है, दाईं तरफ सॉर्टिंग ड्रॉपडाउन है और फिर दूसरी पंक्ति में कॉलम हेडर होता है जब आप सॉर्टिंग एसी/desc को टॉगल करते हैं। मैं इस पर सबसे अच्छा नहीं हूं, इसलिए सोच रहा हूं कि मैं इन सभी को एक ही पंक्ति पर कैसे प्राप्त कर सकता हूं (केवल 1 पंक्ति जहां मेरी सूची आइकन बाईं ओर है और इसके ठीक आगे कॉलम लेबल है, और फिर सॉर्ट ड्रॉपडाउन तीर)।
<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>
यह मेरा उदाहरण नहीं है, बल्कि इसलिए यह के साथ काम किया जा सकता है यह हैडर टेम्पलेट है:
http://plnkr.co/edit/KitYBfKuRTQppuSRUCh7?p=preview
आप शायद एक [jsfiddle] (https://jsfiddle.net/)/[plunker] प्रदान कर सकते हैं (https://plnkr.co/)? –
मैंने मूल प्रश्न के नीचे एक प्लंकर जोड़ा है। धन्यवाद। – user441521
@ user441521 मेरा जवाब चेक करें। मुझे उम्मीद है कि यह आपकी आवश्यकता को पूरा करेगा। –