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 - 在最後一個標題欄中添加圖標

回答

相關問題