Wie erstelle ich eine nggrid benutzerdefinierte Fußzeile

Question

Ich möchte Fußzeilen für ng-Grid aktivieren, aber ich möchte es vollständig anpassen und überschreiben was ng-Grid standardmäßig tut.

Grundsätzlich, ich möchte nur eine 'Load more ...' Link am unteren Rand des Grid, die mehr Zeilen vom Server nach was pagingOptions.pageSize wird auf und an die Unterseite des geladen werden Raster, während die Ansichtsfensterhöhe dynamisch erweitert wird, sodass keine Bildlaufleiste vorhanden ist.

Gibt es dafür einen Konfigurations-Haken oder wo/wie kann ich das tun?

Danke.

Answer 1

Obwohl es nicht im Abschnitt API der ng-Grid-Website aufgeführt ist, können Sie eine benutzerdefinierte $scope.gridOptions.footerTemplate definieren. Werfen Sie einen einen Blick den Quellcode und Sie finden (es ist nicht definiert, so dass es auf die Standardvorlage zurückfällt, wie unten dargestellt):

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

Und hier ist die Standardvorlage:

<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

Hier ist, wie ich es inline gemacht habe. Diese benutzerdefinierte Fußzeile entfernt die Paging-Option, während die aktuelle Seite, Summe, Seite zuerst, nächste, vorherige und letzte Schaltflächen angezeigt werden.

Sie legen es in den Optionen für das Raster.

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

Hier ist, wie ich die Seitengröße Picker versteckte.

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