come creare un footer personalizzato nggrid

Question

Voglio abilitare i piè di pagina per ng-grid ma voglio personalizzarlo completamente e sovrascrivere quello che ng-grid fa di default.

In sostanza, desidero solo un collegamento "Carica altro ..." nella parte inferiore della griglia che caricherà più righe dal server in base a quale pagingOptions.pageSize è impostato su e aggiungerlo alla fine del griglia espandendo dinamicamente l'altezza del viewport in modo che non vi sia alcuna barra di scorrimento.

C'è un hook di configurazione per questo o dove/come posso fare questo?

Grazie.

Answer 1

Sebbene non sia elencato nella sezione API del sito Web ng-grid, è possibile definire un numero personalizzato $scope.gridOptions.footerTemplate. Date un'occhiata a Il codice sorgente e troverete (non è definito, per cui ricade il modello predefinito come mostrato qui sotto):

// the template for the column menu and filter, including the button. 
footerTemplate: undefined, 

E qui è il modello predefinito:

<div ng-show="showFooter" class="ngFooterPanel" ng-class="{'ui-widget-content': jqueryUITheme, 'ui-corner-bottom': jqueryUITheme}" ng-style="footerStyle()"> 
    <div class="ngTotalSelectContainer" > 
     <div class="ngFooterTotalItems" ng-class="{'ngNoMultiSelect': !multiSelect}" > 
      <span class="ngLabel">{{i18n.ngTotalItemsLabel}} {{maxRows()}}</span><span ng-show="filterText.length > 0" class="ngLabel">({{i18n.ngShowingItemsLabel}} {{totalFilteredItemsLength()}})</span> 
     </div> 
     <div class="ngFooterSelectedItems" ng-show="multiSelect"> 
      <span class="ngLabel">{{i18n.ngSelectedItemsLabel}} {{selectedItems.length}}</span> 
     </div> 
    </div> 
    <div class="ngPagerContainer" style="float: right; margin-top: 10px;" ng-show="enablePaging" ng-class="{'ngNoMultiSelect': !multiSelect}"> 
     <div style="float:left; margin-right: 10px;" class="ngRowCountPicker"> 
      <span style="float: left; margin-top: 3px;" class="ngLabel">{{i18n.ngPageSizeLabel}}</span> 
      <select style="float: left;height: 27px; width: 100px" ng-model="pagingOptions.pageSize" > 
       <option ng-repeat="size in pagingOptions.pageSizes">{{size}}</option> 
      </select> 
     </div> 
     <div style="float:left; margin-right: 10px; line-height:25px;" class="ngPagerControl" style="float: left; min-width: 135px;"> 
      <button class="ngPagerButton" ng-click="pageToFirst()" ng-disabled="cantPageBackward()" title="{{i18n.ngPagerFirstTitle}}"><div class="ngPagerFirstTriangle"><div class="ngPagerFirstBar"></div></div></button> 
      <button class="ngPagerButton" ng-click="pageBackward()" ng-disabled="cantPageBackward()" title="{{i18n.ngPagerPrevTitle}}"><div class="ngPagerFirstTriangle ngPagerPrevTriangle"></div></button> 
      <input class="ngPagerCurrent" min="1" max="{{maxPages()}}" type="number" style="width:50px; height: 24px; margin-top: 1px; padding: 0 4px;" ng-model="pagingOptions.currentPage"/> 
      <button class="ngPagerButton" ng-click="pageForward()" ng-disabled="cantPageForward()" title="{{i18n.ngPagerNextTitle}}"><div class="ngPagerLastTriangle ngPagerNextTriangle"></div></button> 
      <button class="ngPagerButton" ng-click="pageToLast()" ng-disabled="cantPageToLast()" title="{{i18n.ngPagerLastTitle}}"><div class="ngPagerLastTriangle"><div class="ngPagerLastBar"></div></div></button> 
     </div> 
    </div> 
</div> 

Answer 2

Ecco come l'ho fatto in linea. Questo piè di pagina personalizzato rimuove l'opzione di impaginazione mentre mostra la pagina corrente, il totale, la pagina prima, il prossimo, il precedente e l'ultimo pulsante.

Si inserisce nelle opzioni per la griglia.

footerTemplate: "<div ng-grid-footer=\"\" class=\"ng-scope\"><div ng-show=\"showFooter\" class=\"ngFooterPanel ng-scope\" ng-class=\"{'ui-widget-content': jqueryUITheme, 'ui-corner-bottom': jqueryUITheme}\" ng-style=\"footerStyle()\" style=\"width: 600px; height: 55px;\">" + 
 
      "<div class=\"ngTotalSelectContainer\" >" + 
 
       "<div class=\"ngFooterTotalItems\" ng-class=\"{'ngNoMultiSelect': !multiSelect}\" >" + 
 
        "<span class=\"ngLabel\">{{i18n.ngTotalItemsLabel}} {{maxRows()}}</span><span ng-show=\"filterText.length > 0\" class=\"ngLabel\">({{i18n.ngShowingItemsLabel}} {{totalFilteredItemsLength()}})</span>" + 
 
       "</div>" + 
 
       "<div class=\"ngFooterSelectedItems\" ng-show=\"multiSelect\">" + 
 
        "<span class=\"ngLabel\">{{i18n.ngSelectedItemsLabel}} {{selectedItems.length}}</span>" + 
 
       "</div>" + 
 
      "</div>" + 
 
       "<div class=\"ngPagerContainer ngNoMultiSelect\" style=\"float: right; margin-top: 10px;\" ng-show=\"enablePaging\" ng-class=\"{'ngNoMultiSelect': !multiSelect}\">" + 
 

 
        " <div style=\"float:left; margin-right: 10px; line-height:25px;\" class=\"ngPagerControl\">" + 
 
        "page {{pagingOptions.currentPage}} of {{maxPages()}} " + 
 
        " <button class=\"ngPagerButton\" ng-click=\"pageToFirst()\" ng-disabled=\"cantPageBackward()\" title=\"{{i18n.ngPagerFirstTitle}}\"><div class=\"ngPagerFirstTriangle\"><div class=\"ngPagerFirstBar\"></div></div></button>" + 
 
         " <button type=\"button\" class=\"ngPagerButton\" ng-click=\"pageBackward()\" ng-disabled=\"cantPageBackward()\" title=\"Previous Page\"><div class=\"ngPagerFirstTriangle ngPagerPrevTriangle\"></div></button>" + 
 
         " <button type=\"button\" class=\"ngPagerButton\" ng-click=\"pageForward()\" ng-disabled=\"cantPageForward()\" title=\"Next Page\" disabled=\"disabled\"><div class=\"ngPagerLastTriangle ngPagerNextTriangle\"></div></button>" + 
 
         " <button class=\"ngPagerButton\" ng-click=\"pageToLast()\" ng-disabled=\"cantPageToLast()\" title=\"{{i18n.ngPagerLastTitle}}\"><div class=\"ngPagerLastTriangle\"><div class=\"ngPagerLastBar\"></div></div></button>" + 
 
         
 
         " </div>" + 
 
       "</div>" + 
 
      "</div></div>"

Answer 3

Ecco come ho nascosto il selettore PageSize.

.ui-grid-pager-row-count-picker { 
    display: none !important; 
}