Question

我想为ng-grid启用页脚，但我想完全自定义它并覆盖默认情况下ng-grid的功能。

基本上，我只想在网格底部添加一个'加载更多...'链接，根据pagingOptions.pageSize的设置从服务器加载更多行，并将其附加到网格的底部同时动态扩展视口高度，因此没有滚动条。

是否有配置挂钩，或者我在哪里/怎么做？

感谢。

Answer 1

虽然它没有列在ng-grid网站的API部分，但您可以定义自定义$scope.gridOptions.footerTemplate。看看源代码，你会发现（它是未定义的，所以它回退到默认模板，如下所示）：

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

Answer 2

以下是我内联的方式。此自定义页脚会在显示当前页面，总页数，第一页，下一页，上一页和最后一页按钮时删除分页选项。

你把它放在网格的选项中。

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

以下是我隐藏PageSize选择器的方法。

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

如何创建一个nggrid自定义页脚

3 个答案: