我想为 ng-grid 启用页脚,但我想完全自定义它并覆盖 ng-grid 默认情况下的功能。
基本上,我只想要网格底部的“加载更多...”链接,该链接将根据 pagingOptions.pageSize 设置的内容从服务器加载更多行,并将其附加到网格底部,同时动态扩展视口高度,因此没有滚动条。
是否有一个配置挂钩,或者我在哪里/如何做到这一点?
Thanks.
虽然它没有被列入API http://angular-ui.github.io/ng-grid/#aping-grid 网站的部分,您可以定义自定义$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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)