tiêu đề tùy chỉnh góc ui-lưới html

Question

Tôi đang cố gắng thêm một glyphicon-thlist (mà tôi có thể nhấp và gọi hàm điều khiển) ở phía bên trái của tiêu đề mặc định. Tôi đã lấy tiêu đề mặc định và cố gắng thao tác nó để làm điều này. Tiêu đề mặc định nằm ở: https://raw.githubusercontent.com/angular-ui/ui-grid/master/src/templates/ui-grid/uiGridHeaderCell.html

Tôi đã đổi nó thành bên dưới, nhưng điều gì xảy ra là tôi kết thúc bằng 2 hàng. Hàng trên cùng có biểu tượng của tôi ở bên trái, bên phải là danh sách thả xuống sắp xếp và sau đó hàng thứ 2 có tiêu đề cột khi bạn nhấp vào chuyển đổi sắp xếp asc/desc. Tôi không phải là người giỏi nhất, vì vậy tôi tự hỏi làm thế nào tôi có thể có được tất cả những điều này trên cùng một dòng (chỉ có 1 hàng mà biểu tượng danh sách của tôi ở phía bên trái và bên phải là nhãn cột và sau đó thả xuống sắp xếp mũi tên).

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

Đây không phải là ví dụ của tôi nhưng nó có mẫu tiêu đề để nó có thể được làm việc với:

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

Answer 1

• Để thêm các glyphicon glyphicon-list bạn chỉ cần format ô tiêu đề của bạn vào HTML được chỉ bởi headerCellTemplate.

• Để thêm cuộc gọi chức năng khi nhấp vào số glyphicon, bạn cần phải thêm số này vào thùng chứa biểu tượng gulp ng-click="grid.appScope.callFunction()".

  DEMO