कैसे एक nggrid कस्टम पाद लेख बनाने के लिए

Question

मैं एनजी-ग्रिड के लिए पाद लेख सक्षम करना चाहता हूं लेकिन मैं इसे पूरी तरह से अनुकूलित करना चाहता हूं और डिफ़ॉल्ट रूप से एनजी-ग्रिड क्या करता है ओवरराइड करना चाहता हूं।

असल में, मैं बस ग्रिड के निचले हिस्से में 'अधिक लोड करें ...' लिंक चाहता हूं जो सर्वर से अधिक पंक्तियों को लोड करेगा, जो पेजिंगऑप्शन। पेजसाइज सेट है और इसे नीचे के नीचे जोड़ दें ग्रिड गतिशील रूप से व्यूपोर्ट ऊंचाई का विस्तार करते समय कोई स्क्रॉलबार नहीं है।

क्या इसके लिए कोई कॉन्फ़िगरेशन हुक है, या मैं यह कहां/कैसे कर सकता हूं?

धन्यवाद।

Answer 1

हालांकि यह एनजी-ग्रिड वेबसाइट के API अनुभाग में सूचीबद्ध नहीं है, तो आप कस्टम $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> 
     <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

:

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

और यहाँ डिफ़ॉल्ट टेम्पलेट है यहां बताया गया है कि मैंने इसे इनलाइन कैसे किया। यह कस्टम पाद लेख वर्तमान पृष्ठ, कुल, पृष्ठ पहले, अगले, पिछले और अंतिम बटन दिखाते समय पेजिंग विकल्प को हटा देता है।

आपने इसे ग्रिड के विकल्पों में रखा है।

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