Ui-Grid header - Добавить иконку в последнем столбце заголовка

То, что я думал, было бы довольно простым, оказалось не так. Или, по крайней мере, я делаю что-то неправильно, и я не могу понять, что.Ui-Grid header - Добавить иконку в последнем столбце заголовка

Позвольте мне объяснить, что я пытаюсь сделать:

Если у меня есть сетка, как есть, я хотел бы значок «плюс/добавить» в правом верхнем углу сетки. Поэтому я подумал, что я редактирую headerTemplate, вот в чем я застрял. Вот как у меня HeaderTemplate сейчас:

<div role="rowgroup" class="ui-grid-header"> <!-- theader --> 
<div class="ui-grid-top-panel"> 
    <div class="ui-grid-header-viewport"> 
     <div class="ui-grid-header-canvas"> 
      <div class="ui-grid-header-cell-wrapper" ng-style="colContainer.headerCellWrapperStyle()"> 
       <div role="row" class="ui-grid-header-cell-row"> 
        <div class="ui-grid-header-cell ui-grid-clearfix" ng-repeat="col in colContainer.renderedColumns track by col.uid" ui-grid-header-cell col="col" render-index="$index"> 
        </div> 
        <div class="ui-grid-header-cell ui-grid-clearfix">Icon</div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

Это «добавляет» Див, но это не соответствует его в сетке, она ставит его только вне .. Как я могу добавить столбец, который распознается как столбец, и только значок в нем.

Я знаю, что могу сделать это с помощью gridOptions и просто добавить другое поле без данных, но я хочу, чтобы это приложение было широко, поэтому мне действительно понравится это как шаблон. И честно ui-grids способ шаблонов меня смущает .. Любая помощь была бы действительно оценена!

Если я неясен, сообщите мне, и я попытаюсь уточнить.

источник

2015-12-02 Billy

почему бы не использовать шаблон заголовка ячейки? –

Поскольку мне не нравится устанавливать этот шаблон во всех моих контроллерах в последнем столбце, я использую одну и ту же сетку в нескольких местах в своем приложении. Поправьте меня, если я переусердствую это. – Billy

Я нашел работу вокруг:

<div role="rowgroup" class="ui-grid-header"> <!-- theader --> 
    <div class="ui-grid-top-panel"> 
     <div class="ui-grid-header-viewport"> 
      <div class="ui-grid-header-canvas"> 
       <div class="ui-grid-header-cell-wrapper" ng-style="colContainer.headerCellWrapperStyle()"> 
        <div role="row" class="ui-grid-header-cell-row"> 
         <div class="ui-grid-header-cell ui-grid-clearfix" 
          ng-repeat="col in colContainer.renderedColumns track by col.uid" ui-grid-header-cell 
          col="col" render-index="$index"> 
         </div> 

         <div role="button" 
          class="ui-grid-column-menu-button" 
          ng-click="addRecord()" 
          ng-class="{'ui-grid-column-menu-button-last-col': isLastCol}" 
          ui-grid-one-bind-aria-label="i18n.headerCell.aria.columnMenuButtonLabel" 
          aria-haspopup="true"> 
          <span class="material-icons" style="padding: 5px; cursor:pointer;">add</span> 
         </div> 

        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

Я использовал ui-grid-column-menu-button класс, чтобы показать свою собственную иконку. Это работает как шарм, к сожалению, вы используете функциональность сетки. У меня есть мое меню где-то еще, так что это работает для меня.

Это конечный результат:

источник

2015-12-07 10:48:28 Billy

Ui-Grid header - Добавить иконку в последнем столбце заголовка

ответ

Смежные вопросы