Question

我正在尝试将一个glyphicon glyphicon-thlist（我可以单击并调用控制器函数）添加到默认标头的左侧。我采用了默认标头并尝试操纵它来执行此操作。默认标头位于：https://raw.githubusercontent.com/angular-ui/ui-grid/master/src/templates/ui-grid/uiGridHeaderCell.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

Answer 1

要将glyphicon glyphicon-list添加到format，您需要headerCellTemplate将标题单元格添加到glyphicon指向的HTML中。
要点击ng-click="grid.appScope.callFunction()"添加功能调用，您需要将其添加到gulp图标容器your_data <- read.csv("") #Subsetting your data location12 <- subset(your_data, latitude == 1 & column2_value == 2) Data_location12 <- table(location12) timeseries12 <- ts(Data_location12)中。

DEMO

角度ui-grid自定义标头html

1 个答案: