Comment réinitialiser l'affichage du nombre en bas de la grille d'interface

J'ai besoin de filtrer les données ui-grille, mais pas à partir des filtres d'en-tête natifs fournis par la grille plutôt que sur un clic de bouton. Donc sur mon écouteur du bouton Filter, je filtre mon tableau de données d'origine et réattribue les entrées filtrées à l'objet $scope.gridData. J'ai aussi un bouton reset. En cliquant sur Reset, je réattribue le tableau de données d'origine à l'objet $scope.gridData.Comment réinitialiser l'affichage du nombre en bas de la grille d'interface

Avec ceci le filtrage fonctionne bien. Cependant, je suis confronté à un problème lorsque: Les données sont filtrées à l'aide du bouton externe Filter. Les filtres internes (filtres de grille) sont appliqués sur une colonne. Les données sont réinitialisées à l'aide du bouton Reset.

Lors de cette réinitialisation, la grille conserve les entrées filtrées par les filtres internes. Cependant, dans l'affichage du nombre de lignes, la grille affiche n-10 out of total items. L'élément total est le nombre de données d'origine alors que la grille contient les données filtrées.

Est-ce que c'est leur façon de changer manuellement l'affichage du nombre de grille.

Source

2017-03-25 Saurabh Tiwari

Ma mise à jour ci-dessous a-t-elle aidé? As-tu besoin d'autre chose? –

Si je comprends bien, vous pouvez remplacer le pied de page ui réseau et effectuer vos réglages:

var app = angular.module('app', ['ui.grid']); 
 
app.controller('MainCtrl', ['$scope', function($scope) { 
 
    var adjustedGridFooterTemplate = 
 
    //same as normal template, but with: + ' (+/- my adjustment)' AND + ' (+/- another adjustment)' 
 
    "<div class=\"ui-grid-footer-info ui-grid-grid-footer\"><span>{{'search.totalItems' | t}} {{grid.rows.length + ' (+/- my adjustment)'}}</span> <span ng-if=\"grid.renderContainers.body.visibleRowCache.length !== grid.rows.length\" class=\"ngLabel\">({{\"search.showingItems\" | t}} {{grid.renderContainers.body.visibleRowCache.length + ' (+/- another adjustment)'}})</span></div>"; 
 
    $scope.gridOptions = { 
 
    enableFiltering: true, 
 
    showGridFooter: true, 
 
    gridFooterTemplate: adjustedGridFooterTemplate, 
 
    data: [{name: "Moroni", age: 50}, 
 
      {name: "Tiancum", age: 43}, 
 
      {name: "Jacob", age: 27}] 
 
    } 
 
}]);

div[ui-grid] { 
 
    height: 200px; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script> 
 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" /> 
 
<div ng-app="app" ng-controller="MainCtrl"> 
 
    <div ui-grid="gridOptions" class="gridStyle"> 
 
    </div> 
 
</div>

Mise à jour (de commentaire ci-dessous)

Quand vous dites vous ré-affecter $scope.gridData, assurez-vous que vous utilisez angular.copy() pour faire la réaffectation, quelque chose comme $scope.gridData = angular.copy(newData); car cela permettra de faire re-tirer les montres de la grille interne.

J'espère que ça aide, faites-moi savoir si vous avez d'autres questions.

Source

2017-03-27 19:42:32

Appréciez vos efforts pour écrire ce modèle :). Cela peut certainement être un moyen de s'attaquer au problème. Cependant, pouvez-vous suggérer si cela peut être fait sans modèle personnalisé. Y a-t-il des objets exposés par la grille elle-même qui peuvent être manipulés? –

Sans voir plus de votre code, c'est difficile à dire, mais j'ai fourni une mise à jour ci-dessus. Faites-moi savoir si vous avez d'autres questions. Toujours heureux d'aider! –

Utilisé votre approche initiale –

Comment réinitialiser l'affichage du nombre en bas de la grille d'interface

Répondre

Questions connexes