Dev Faq
7
votes

Filtre de date personnalisé ui-grille angulaire.js ui-grille

J'utilise la grille angulaire, UI-Grid, située à ui-grid.info .

J'essaie de créer un filtre personnalisé qui filtrera la grille par date à l'aide des commandes d'entrée de la date, une pour moins d'une et une pour la plus grande que.

Je semble pouvoir mettre les commandes là où je les souhaite à l'aide de ceci dans la colonneDefs: {champ: 'mixtdate', cell -filter: "date", filtreheertemplate: '

de à '} . Je peux également obtenir une sorte de filtrage pour fonctionner en définissant le modèle-ng-modèle = "colfilter.term" lors de la mise dans une autre portée. Le filtrage ne semble même pas faire un égal cependant.

Quelqu'un a-t-il un code pour cela qui fonctionne ou peut me signaler dans la bonne direction?

Voici quelques didacticiels sur le sujet sur leur propre site, mais je ne suis pas tout à fait sûr de les manipuler pour répondre à mes besoins ou si c'est même possible.

2 commentaires

Pouvez-vous faire un PLNKR pour montrer votre problème.

Voici un exemple: PLNKR.CO/EDIT/R4CZA6DZLLEJDHHMAHA9?p=preview . Je ne peux pas sembler avoir le colfilter.term pour travailler maintenant. Il est basé sur l'échantillon d'origine de la documentation UI-Grid

4 Réponses :

4
votes

Voulez-vous dire quelque chose comme ça?

Tout d'abord, vous devez d'abord inclure jQuery ui datePicker

Ensuite, vous allez également créer une directive pour cela: p> 

function checkStart(term, value, row, column) {
        term = term.replace(/\\/g,"")
        var now = moment(value);
        if(term) {
            if(moment(term).isAfter(now, 'day')) return false;;
        } 
        return true;
    }

    function checkEnd(term, value, row, column) {
        term = term.replace(/\\/g,"")
        var now = moment(value);
        if(term) {
            if(moment(term).isBefore(now, 'day')) return false;;
        } 
        return true;
    }

4 commentaires

Oui, exactement que supposer que le filtre fonctionne réellement correctement.

Le code de CheckStart et de contrôle de contrôle dans Angularjs autres que Momentsjs? Et ce code a-t-il fonctionné Jgerstle?

Pouvez-vous ajouter plus de description par exemple dans plnkr.co?

Je ne l'ai pas testé parce que j'ai abandonné le projet avant que cette réponse ait été donnée.

3
votes

Si quelqu'un d'autre cherche une solution à cela, j'ai mis en œuvre la personnalisation à partir de code> et à code> des filtres de l'en-tête de grille à l'aide des modaux d'ui-bootstrap avec des pickers. Voir ce plunker pour plus de détails .

Il est évident dans Retrospect, mais l'un des trip -waires Lors de la recherche de la solution, assurez-vous que les valeurs de date de remplissage de la colonne Date de la grille étaient en réalité de type date code>. Comme il s'avère, la comparaison des dates choisies parmi les satchickers aux chaînes ne vous mènera pas très loin. P>

Remarque: cette solution dépend de Lodash pour une transformation de données. EM> p>

p> 

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="https://cdn.jsdelivr.net/lodash/4.6.1/lodash.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.1/ui-grid.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.1/ui-grid.min.css" type="text/css" />
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.css" />
    <link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script src="script.js"></script>
  </head>

  <body> 
    
    <div ng-controller="MainCtrl">
      <div id="grid1" ui-grid="gridOptions" class="grid"></div>
    </div>
    
    <script type="text/ng-template" id="custom-date-filter.html">
    
      <div class="col-md-12 col-md-offset-0 col-sm-12 col-sm-offset-0 col-xs-12 col-xs-offset-0">
  
        <div class="modal-header">
          <p class="modal-title well custom-date-filter-header">
            <span class="custom-date-filter-title-text">
              {{ custom.title }}
            </span>
          </p>
        </div>
  
        <div class="row modal-body custom-date-filter-container-row">
  
          <form name="custom.customDateFilterForm"
                ng-submit="custom.setFilterDate(custom.filterDate)"
                no-validation>

            <div class="row custom-filter-date-input-row">
            
              <div class="well col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1 custom-date-filter-input">
              
                <uib-datepicker ng-model="custom.filterDate" 
                    min-date="custom.minDate" 
                    max-date="custom.maxDate"
                    ng-change="custom.filterDateChanged()"
                    class="well well-sm">
                </uib-datepicker>

              </div>

            </div>

            <div class="row modal-footer custom-date-filter-submit-buttons-row">

              <div class="custom-date-filter-submit-buttons-div col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1">

                <button class="btn btn-success btn-lg custom-date-filter-submit-button"
                        type="submit">
                  Apply
                </button>

                <button type="button"
                        class="btn btn-warning btn-lg custom-date-filter-cancel-button"
                        ng-click="custom.cancelDateFilter()">
                  Cancel
                </button>

              </div>

            </div>

          </form>
  
        </div>
  
      </div>
    
    </script>
  </body>

</html>

1 commentaires

Le filtre de plage de date ci-dessus J'ai essayé de mettre en œuvre son amende fonctionnant. Merci pour votre bon travail. Actuellement, j'ai besoin d'un seul élément de saisie dans lequel la date du calendrier et le calendrier de date devraient être dans une seule pop.

1
votes

Je l'ai fait à l'aide d'une méthode JavaScript personnalisée 

condition: function(term, value){
    if (!term) return true;
    var valueDate = new Date(value);
    var replaced = term.replace(/\\/g,'');
    var termDate = new Date(replaced);
    return valueDate < termDate;
},
placeholder: 'less than'

1 commentaires

Pour une solution agnostique plus navigante, je passerais à ValueDate.BetTime () Stackoverflow .Com / Questions / 338463 / ... Vous pouvez également vouloir essayer, attraper ou vérifier les dates non valides.

2
votes

J'utilise l'utilisation de l'ui-grille angulaire 3.1.1 et de l'ui-ui-ui-bootstrap 1.3.2.

Ma solution est basée sur filtre ui-grille Aide et Munna S / Bennett Adams Commentaires. J'ai obtenu une solution avec moins de code. p>

Il fonctionne avec deux filtres et un modèle personnalisé («UI-Grid / UI-filtre-filtre UI»). P> 

  { field: 'DATE_TIME', name: 'Date Time', cellTooltip: true,
    cellFilter: 'date:\'yyyy-MM-dd\'',
    cellTemplate: 'ui-grid/date-cell',
    filterHeaderTemplate: 'ui-grid/custom-ui-grid-filter',
    width: '40%',
    filters: [
        {
          condition: function(term, value, row, column){
                if (!term) return true;
                var valueDate = new Date(value);
                return valueDate >= term;
            },
          placeholder: 'Greater than or equal'
        },
        {
          condition: function(term, value, row, column){
                if (!term) return true;
                var valueDate = new Date(value);
                return valueDate <= term;
            },
          placeholder: 'Less than or equal'
        }
    ],
    headerCellClass: $scope.highlightFilteredHeader }

3 commentaires

Même filtre dont j'ai besoin, mais sur le côté de la grille "personnalisé un", pas un filtre de cellules de gird intérieure. Aidez-moi à vous aider à affecter Mindate et maxdate à filtrer de l'objet?

Génial, ça marche parfait. En outre, aucun changement pour l'étiquette de divication UI-Grid Div, il suffit d'ajouter des JS.

Cela devrait être la meilleure meilleure solution jusqu'à présent.

Articles qui pourrait vous intéresser :

Recherche d'un div dans une vue AngualrJS ui-router, en utilisant document.querySelector
Problème avec la visibilité des options dans ui-select + parent div a overflow-x pour faire défiler
Rapporteur: Erreur lors de l'attente de la synchronisation de Protractor avec la page: "La testabilité angularJS et la testabilité angulaire ne sont pas définies
Comment utiliser correctement AngularJS $ http.post pour mettre à jour la table MySQLi via PHP?