58 votes

Comment filtrer les jqGrid PAS de données en utilisant le construit en recherche/filtre de la boîte de

Je veux que les utilisateurs soient en mesure de filtre de la grille de données sans l'aide de la intrinsèques de la zone de recherche.

J'ai créé deux champs de saisie de la date (à partir de et vers) et maintenant besoin de le dire à la grille d'adopter ce filtre, puis de demander à de nouvelles données.

Forger une demande au serveur pour la grille de données (sans passer par la grille) et de réglage de la grille de données les données de réponse coutume de travail - parce que dès que l'utilisateur essaie de ré-ordonner les résultats ou de modifier la page, etc. la grille de la demande de nouvelles données à partir du serveur à l'aide d'un filtre vide.

Je ne peux pas l'air de trouver la grille de l'API pour atteindre ce - quelqu'un aurait-il des idées? Merci.

80voto

Oleg Points 136406

Votre problème peut être très facilement résolus avec le respect de l' postData paramètre y compris les fonctions et trigger('reloadGrid'). J'essaie d'expliquer l'idée plus détaillée.

Nous utilisons mtype: "GET". La seule chose à quelle norme de recherche/filtre de la boîte de le faire après l'affichage de l'interface est d'ajouter des paramètres supplémentaires pour l'url, envoyer à un serveur et le rechargement de la grille de données. Si vous avez votre propre interface pour la recherche/filtrage (certains contrôles ou des cases à cocher, par exemple), vous devez juste ajouter votre url vous-même et de recharger la grille à l'égard de l' trigger('reloadGrid'). Pour la réinitialisation de l'information dans la grille, vous pouvez choisir n'importe quelle manière que vous préférez. Par exemple, vous pouvez inclure dans les commandes select qui vous avez une option comme "pas de filtrage".

Pour être plus précis de votre code devrait ressembler à la code de la réponse comment le recharger jqgrid dans asp.net mvc quand je change de dropdownlist:

var myGrid = jQuery("#list").jqGrid({
    url: gridDataUrl,
    postData: {
        StateId: function() { return jQuery("#StateId option:selected").val(); },
        CityId: function() { return jQuery("#CityId option:selected").val(); },
        hospname: function() { return jQuery("#HospitalName").val(); }
    }
    // ...
});
//
var myReload = function() {
    myGrid.trigger('reloadGrid');
};
var keyupHandler = function (e,refreshFunction,obj) {
    var keyCode = e.keyCode || e.which;
    if (keyCode === 33 /*page up*/|| keyCode === 34 /*page down*/||
        keyCode === 35 /*end*/|| keyCode === 36 /*home*/||
        keyCode === 38 /*up arrow*/|| keyCode === 40 /*down arrow*/) {

        if (typeof refreshFunction === "function") {
            refreshFunction(obj);
       }
    }
};

// ...
$("#StateId").change(myReload).keyup(function (e) {
    keyupHandler(e,myReload,this);
});
$("#CityId").change(myReload).keyup(function (e) {
    keyupHandler(e,myReload,this);
});

Si l'utilisateur de changer l'option sélectionnée dans la boîte de sélection avec des id=StateId ou d'une autre boîte de sélection avec des id=CityId (avec la souris ou le clavier), la fonction myReload sera appelé, qui vient de forcer le rechargement de données dans jqGrid. Pendant correspondante $.ajax la demande, qui jqGrid faire pour nous, la valeur de postData paramètre sera transmis $.ajax comme data paramètre. Si certains de propriétés de l' data sont des fonctions, ces fonctions seront appelées par $.ajax. Si les données réelles à partir des listes de sélection sera chargé et toutes les données seront ajoutées aux données envoyées au serveur. Vous avez seulement besoin de mettre en œuvre la lecture de ces paramètres dans votre partie du serveur.

Ainsi, les données de l' postData paramètre sera ajouté à l'url (symbole '?' et '&' sera ajouté automatiquement et tous les symboles spéciaux comme les blancs seront également codée comme d'habitude). Les avantages de l'utilisation de l' postData est:

  1. utilisation de fonctions à l'intérieur d' postData paramètre permet de charger les réelles valeurs de tous utilisé des contrôles au moment de rechargement;
  2. Votre code séjour très clair de la structure.
  3. Tous fonctionne bien, non seulement avec les requêtes HTTP GET, mais avec HTTP POST aussi;

Si vous utilisez un "pas de filtrage" ou "tous" les entrées dans la zone de sélection d' StateId, vous pouvez modifier la fonction qui calcule la valeur de StateId paramètre qui doit ajouté à l'url du serveur de

StateId: function() { return jQuery("#StateId option:selected").val(); }

à quelque chose comme suit:

StateId: function() {
    var val = jQuery("#StateId option:selected").val();
    return val === "all"? "": val;
}

Du côté serveur, vous devriez ne fait pas de filtrage pour StateId si vous recevez une valeur vide comme un paramètre.

Optionnellement, vous pouvez utiliser myGrid.setCaption('A text'); de variation d'une grille de titre. Cela permet à l'utilisateur de voir plus clair, que les données dans la grille sont filtrées avec certains critères.

2voto

Mike Gledhill Points 2105

J'ai eu les mêmes exigences, et (avec Oleg aide) est venu à ceci:

enter image description here

En gros, l'utilisateur commence à taper dans le "nom de l'Employé" zone de texte, et immédiatement les résultats apparaissent dans le jqGrid.

Les détails de la façon dont j'ai mis en place ce sont ici:

jqGrid de Changement de filtre/de recherche pop-up forme du plat sur page pas un dialogue

Notez que j'ai spécifiquement charger toutes les données JSON pour mon jqGrid à l'avance, et que pour de grands ensembles de données, il y a un retard lors de l'exécution de ce code sur un iPhone ou un appareil Android comme vous le type de chaque personnage.

Mais, pour le bureau, web apps, c'est une excellente solution, et rend jqGrid beaucoup friendler pour l'utilisateur.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X