web-dev-qa-db-fra.com

Comment filtrer les données jqGrid sans utiliser la boîte de recherche/filtre intégrée

Je souhaite que les utilisateurs puissent filtrer les données de la grille sans utiliser le champ de recherche intrinsèque.

J'ai créé deux champs d'entrée pour la date (de et à) et je dois maintenant indiquer à la grille de l'adopter en tant que filtre puis de demander de nouvelles données.

Forger une demande de serveur pour les données de grille (en contournant la grille) et définir les données de la grille pour que les données de réponse ne fonctionnent pas - car dès que l'utilisateur tente de réorganiser les résultats ou de changer de page, etc. du serveur en utilisant un filtre vierge.

Je n'arrive pas à trouver l'API de grille pour y parvenir - quelqu'un a-t-il des idées? Merci.

jquerysearchfilterjqgrid
57
Jimbo

Votre problème peut être très facilement résolu en respectant le paramètre postData, y compris les fonctions et trigger('reloadGrid'). J'essaie d'expliquer l'idée plus en détail.

Utilisons mtype: "GET". La seule chose que la boîte de recherche/filtre standard fait après l'affichage de l'interface est l'ajout de certains paramètres supplémentaires à l'URL, l'envoi au serveur et le rechargement des données de la grille. Si vous avez votre propre interface pour la recherche/le filtrage (certains contrôles sélectionnés ou cases à cocher, par exemple), vous devez simplement ajouter votre url vous-même et recharger la grille en respectant trigger('reloadGrid'). Pour réinitialiser les informations dans la grille, vous pouvez choisir le moyen que vous préférez. Par exemple, vous pouvez inclure dans les contrôles de sélection une option du type "pas de filtrage".

Pour être plus précis, votre code devrait ressembler à celui de la réponse comment recharger jqgrid dans asp.net mvc lorsque je change de liste déroulante :

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 modifie l'option sélectionnée dans la zone de sélection avec id=StateId ou une autre zone de sélection avec id=CityId (avec la souris ou le clavier), la fonction myReload sera appelée, ce qui forcera simplement le rechargement de données dans jqGrid. Au cours de la demande $.ajax correspondante, ce que jqGrid fait pour nous, la valeur du paramètre postData sera transmise à $.ajax en tant que paramètre data. Si certaines des propriétés de data sont des fonctions, celles-ci seront appelées par $.ajax. Ainsi, les données réelles des boîtes de sélection seront chargées et toutes les données seront ajoutées aux données envoyées au serveur. Vous devez uniquement implémenter la lecture de ces paramètres dans votre partie serveur.

Ainsi, les données du paramètre postData seront ajoutées à l'URL (les symboles '?' Et '&' seront ajoutés automatiquement et tous les symboles spéciaux, tels que les blancs, seront également codés comme d'habitude). Les avantages de l'utilisation de postData sont les suivants:

  1. utilisation des fonctions dans le paramètre postData vous permet de charger les valeurs réelles de tous les contrôles utilisés jusqu'au moment du rechargement;
  2. Votre code reste ont une structure très claire.
  3. Tout fonctionne bien non seulement avec les requêtes HTTP GET, mais également avec HTTP POST;

Si vous utilisez des entrées "aucun filtrage" ou "toutes" dans la liste de sélection StateId, vous pouvez modifier la fonction qui calcule la valeur du paramètre StateId qui doit être ajouté à l'URL du serveur à partir 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é du serveur, vous ne devriez pas filtrer pour StateId si vous recevez une valeur vide en tant que paramètre.

Vous pouvez éventuellement utiliser myGrid.setCaption('A text'); pour modifier le titre de la grille. Cela permet à l'utilisateur de voir plus clairement que les données de la grille sont filtrées avec certains critères.

78
Oleg

J'avais les mêmes exigences et (avec l'aide d'Oleg), j'ai eu ceci:

enter image description here

Fondamentalement, l'utilisateur commence à taper dans la zone de texte "Nom de l'employé", et immédiatement les résultats sont affichés dans jqGrid.

Les détails de la façon dont j'ai implémenté ceci sont ici:

jqGrid - Change le formulaire de filtre/recherche - pour être à plat sur la page - pas une boîte de dialogue

Notez que je charge spécifiquement all des données JSON pour mon jqGrid in advance, et que pour les grands ensembles de données, il y a un délai lors de l'exécution de ce code sur un périphérique iPhone/Android lorsque vous tapez chaque caractère . 

Mais, pour les applications Web de bureau, c'est une excellente solution et rend jqGrid beaucoup plus convivial pour l'utilisateur.

2
Mike Gledhill

En utilisant les fonctions ReloadGrid() et jquery, vous pouvez créer vos propres fonctions de filtrage personnalisées.

0
신유진