如何创建nggrid自定义页脚

问题描述：

我要启用NG网页脚，但我想完全自定义，并覆盖在默认情况下所做的NG-电网。

I want to enable footers for ng-grid but I want to completely customize it and override what ng-grid does by default.

基本上，我只想要一个加载更多......在那个将从服务器根据什么pagingOptions.pageSize设置加载更多的行并将其附加到网格的底部格栅的底部链接而动态扩展的高度视所以没有滚动条。

Basically, I just want a 'Load more...' link at at the bottom of the grid that will load more rows from the server according to what pagingOptions.pageSize is set to and append it to the bottom of the grid while dynamically expanding the viewport height so there is no scrollbar.

是否有此配置挂钩，或/我该怎么做呢？

Is there a configuration hook for this, or where/how can I do this?

感谢。

答

虽然它不是 API中列出在NG-网网站部分，你可以自定义一个 $ scope.gridOptions.footerTemplate 。看看一个源$ C $ C，你会发现（这是不确定的，所以它会回到默认模板如下图所示）：

Although it is not listed in the API section of the ng-grid website, you can define a custom $scope.gridOptions.footerTemplate. Take a look a the source code and you will find (it is undefined, so it falls back to the default template as shown below):

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

这是默认的模板：

<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>

如何创建nggrid自定义页脚

相关推荐