角度ui-grid自定义标头html [英] angular ui-grid custom header html

问题描述

我试图在默认标题的左侧添加一个glyphicon glyphicon-thlist(可以单击并调用一个控制器函数).我采用了默认标头并尝试对其进行操作.默认标头位于: https ://raw.githubusercontent.com/angular-ui/ui-grid/master/src/templates/ui-grid/uiGridHeaderCell.html

I'm trying to add a glyphicon glyphicon-thlist (that I can click and call a controller function) to the left hand side of the default header. I took the default header and trying to manipulate it to do this. The default header is located: https://raw.githubusercontent.com/angular-ui/ui-grid/master/src/templates/ui-grid/uiGridHeaderCell.html

我将其更改为以下内容，但是最终我得到了2行.第一行的左边是我的图标，右边是排序下拉列表，第二行有一个列标题，当您单击时可以切换排序的asc/desc.我不是最擅长的，所以想知道如何将所有这些都放在同一行上(只有1行，其中我的列表图标在左侧，旁边是列表标签，然后是下拉列表)箭头).

I changed it to the below, but what happens is I end up with 2 rows. The top row has my icon on the left, on the right is the sorting dropdown and then 2nd row has the column header that when you click toggles the sorting asc/desc. I'm not the best at this, so wondering how I can get all these on the same line (only 1 row where my list icon is on the left hand side and right next to it is the column label, and then the sort dropdown arrow).

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

这不是我的示例，但是它具有标题模板，因此可以与以下模板一起使用:

This isn't my example but it has the header template so it can be worked with:

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

推荐答案

• 要添加glyphicon glyphicon-list，您只需要将标头单元格format插入headerCellTemplate指向的HTML中即可.

• 要在单击glyphicon时添加功能调用，您需要将此功能添加到gulp图标容器ng-click="grid.appScope.callFunction()"中.

  • To add the glyphicon glyphicon-list you just need to format your header cell into the HTML pointed by headerCellTemplate.

  • To add the function call on click of the glyphicon you need to add this in your gulp icon container ng-click="grid.appScope.callFunction()".

    演示

    这篇关于角度ui-grid自定义标头html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！