Angular.js l'interface utilisateur personnalisé grille filtre de date
Je suis à l'aide de l'angle de la grille, de l'interface utilisateur-réseau, situé à ui-grid.info.
Je suis en train de faire un filtre personnalisé qui permettra de filtrer par date en utilisant la date d'entrées de commandes, l'une pour les moins de et un pour les plus de.
Je semble être en mesure de mettre à obtenir le contrôle là où je veux en utilisant cette dans le columnDefs: { field: 'mixedDate', cellFilter: 'date', filterHeaderTemplate: '<div>From <input type="date"> to <input type="date"></div>' }
. Je peux aussi obtenir une sorte de filtrage de travail par la mise en au data-ng-model="colFilter.terme" lors de la mise de ces choses dans un autre champ. Le filtrage ne semble pas à même de faire une égalité.
Quelqu'un aurait-il le code pour ce qui fonctionne ou peut me pointer dans la bonne direction?
Voici quelques tutoriels sur le sujet sur leur propre site, mais je ne suis pas tout à fait sûr de savoir comment les manipuler pour l'adapter à mes besoins ou si c'est encore possible.
- l'interface utilisateur de la grille de filtrage
- l'interface utilisateur de la grille de filtrage personnalisé
Voici un exemple: plnkr.co/modifier/R4cZa6dZllEjdHHMaHA9?p=preview. Je n'arrive pas à obtenir le colFilter.durée de travail maintenant bien. Il est basé sur l'original de l'échantillon à partir de l'interface utilisateur-réseau de la documentation
OriginalL'auteur jgerstle | 2015-07-23
Vous devez vous connecter pour publier un commentaire.
Voulez-vous dire quelque chose de ce genre ?
D'abord, vous devez inclure jQuery UI Datepicker
Puis vous permettra également de créer une directive pour elle:
Dans votre columnDefs vous aurez également besoin d'utiliser le client filtres et modèle d'en-tête:
filters:[{ condition: checkStart}, {condition:checkEnd}],filterHeaderTemplate: '<div class="ui-grid-filter-container">from : <input style="display:inline; width:30%" class="ui-grid-filter-input" date-picker type="text" ng-model="col.filters[0].term"/> to : <input style="display:inline; width:30%" class="ui-grid-filter-input" date-picker type="text" ng-model="col.filters[1].term"/></div>'
Supposent que vous utilisez momentjs
Les fonctions de filtrage sera comme ceci:
Une chance que je peux obtenir le code pour ce filtre
J'ai ajouté quelques détails
Le code pour checkStart et checkEnd travail dans angularJS autres que momentjs ? Et de fait ce code de travail jgerstle ?
Pouvez-vous ajouter plus description par exemple dans plnkr.co ?
OriginalL'auteur Qi Tang
Je suis en utilisant angulaire de l'interface utilisateur-réseau 3.1.1 et angular-ui-bootstrap 1.3.2.
Ma solution est basée sur l'interface utilisateur de la grille de filtre aider et Munna S /Bennett Adams commentaires. J'ai Obtenu une solution avec moins de code.
Il fonctionne avec deux filtres, et un modèle Personnalisé ('ui-grille/custom-ui-grille-filtre").
Rappeler que, dans l'état de la fonction, 'terme vient du DatePicker filtre et est une Date. Aussi, la valeur est une chaîne formatée comme 'yyyy-MM-dd" dans mon exemple.
Voici mon Plunkr
Espérons que cela aide et si vous avez des amélioration s'il vous plaît laissez-moi savoir.
Super, ça fonctionne parfaitement. Aussi, pas de changement pour l'interface utilisateur-réseau balise div, juste ajouter un peu de js.
Ce doit être le top meilleure solution à ce jour.
OriginalL'auteur Aquiles
je l'ai fait à l'aide d'un code javascript personnalisé méthode
OriginalL'auteur Munna S