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

我把它改成了下面的，但结果是我得到了 2 行.顶行左边有我的图标，右边是排序下拉菜单，然后第二行有列标题，当你点击时，它会切换排序 asc/desc.我不是最擅长的，所以想知道如何在同一行上获得所有这些(只有 1 行我的列表图标在左侧，右侧是列标签，然后是排序下拉列表箭头).

<跨度class="ui-grid-header-cell-label"ui-grid-one-bind-id-grid="col.uid + '-header-text'">{{ col.displayName CUSTOM_FILTERS }}</span><跨度ui-grid-one-bind-id-grid="col.uid + '-sortdir-text'"ui-grid-visible="col.sort.direction"aria-label="{{getSortDirectionAriaLabel()}}"><我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}}"咏叹调隐藏=真"></i><子ui-grid-visible="isSortPriorityVisible()"class="ui-grid-sort-priority-number">{{col.sort.priority + 1}}</sub></span>

<我class="ui-grid-icon-angle-down"咏叹调隐藏=真">&nbsp;</i>

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

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

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

解决方案

• 要添加glyphicon glyphicon-list，您只需要将标题单元format 放入headerCellTemplate 指向的HTML 中.

• 要在点击 glyphicon 时添加函数调用，您需要将其添加到您的 gulp 图标容器 ng-click="grid.appScope.callFunction()".

  演示

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

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

解决方案

• 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()".

  DEMO

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