如何创建nggrid自定义页脚 [英] how to create a nggrid custom footer

查看：23
本文介绍了如何创建nggrid自定义页脚的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

是否有针对此的配置挂钩，或者我在哪里/如何执行此操作?

谢谢.

解决方案

虽然在 API 中没有列出在 ng-grid 网站的 部分，您可以定义自定义 $scope.gridOptions.footerTemplate.看一看源码，你会发现(未定义，所以回退到默认模板，如下图):

//列菜单和过滤器的模板，包括按钮.页脚模板:未定义，

这是默认模板:

<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 class="ngFooterSelectedItems" ng-show="multiSelect"><span class="ngLabel">{{i18n.ngSelectedItemsLabel}} {{selectedItems.length}}</span>

<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="pagesOptions.pageSizes 中的大小">{{size}}</option></选择>

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

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

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?

Thanks.

解决方案

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,

And here is the default template:

<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自定义页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆