web-dev-qa-db-fra.com

jqGrid: POST données sur le serveur pour récupérer les données de ligne (filtrage et recherche)

J'ai un formulaire comme celui-ci:

<form id='myForm'>
<input type='text' name='search' />
<input type='text' name='maxPrice' />
</form>

et table pour mon jqGrid:

<table id='myGrid'></table>

Je dois POST (pas GET) les données de myForm à ma méthode serveur afin de récupérer les données de ligne et de remplir la grille. Jusqu'à présent, je n'ai pas été capable d'obtenir jqGrid à POST n'importe quoi. J'ai revérifié ma sérialisation de données et il sérialise correctement mes données de formulaire. Voici mon code jqGrid:

$("#myGrid").jqGrid({
    url: '/Products/Search") %>',
    postData: $("#myForm").serialize(),
    datatype: "json",
    mtype: 'POST',
    colNames: ['Product Name', 'Price', 'Weight'],
    colModel: [
        { name: 'ProductName', index: 'ProductName', width: 100, align: 'left' },
        { name: 'Price', index: 'Price', width: 50, align: 'left' },
        { name: 'Weight', index: 'Weight', width: 50, align: 'left' }
    ],
    rowNum: 20,
    rowList: [10, 20, 30],
    imgpath: gridimgpath,
    height: 'auto',
    width: '700',
    //pager: $('#pager'),
    sortname: 'ProductName',
    viewrecords: true,
    sortorder: "desc",
    caption: "Products",
    ajaxGridOptions: { contentType: "application/json" },
    headertitles: true,
    sortable: true,
    jsonReader: {
        repeatitems: false,
        root: function(obj) { return obj.Items; },
        page: function(obj) { return obj.CurrentPage; },
        total: function(obj) { return obj.TotalPages; },
        records: function(obj) { return obj.ItemCount; },
        id: "ProductId"
    }
});

Pouvez-vous voir ce que je fais mal ou devrait faire différemment?

jqueryjqgrid
20
Byron Sommardahl

Votre erreur principale est l'utilisation du paramètre postData dans le formulaire:

postData: $("#myForm").serialize()

Cette utilisation pose deux problèmes:

  1. La valeur $("#myForm").serialize() écrase tous les paramètres des requêtes POST au lieu d'ajouter des paramètres supplémentaires.
  2. La valeur $("#myForm").serialize() sera calculée une seule fois pendant le temps d'initialisation de la grille. Vous enverrez donc toujours search="" Et maxPrice="" Au serveur.

Je vous suggère de remplacer le formulaire par des champs d'édition nommés pour

<fieldset>
<input type='text' id='search' />
<input type='text' id='maxPrice' />
<button type='button' id='startSearch'>Search</button>
</fieldset>

définir le paramètre postData comme objet avec des méthodes:

postData: {
    search: function() { return $("#search").val(); },
    maxPrice: function() { return $("#maxPrice").val(); },
},

et ajouter onclick gestionnaire d'événements au bouton "Rechercher" (voir ci-dessus le fragment HTML)

$("#startSearch").click(function() {
    $("#myGrid").trigger("reloadGrid");
});

De plus, vous n'écrivez rien sur la technologie de serveur que vous utilisez. Une modification supplémentaire peut être nécessaire pour pouvoir lire les paramètres côté serveur (par exemple serializeRowData: function (data) {return JSON.stringify(data);} voir this et this ). Je vous recommande également de lire une autre vieille réponse: Comment filtrer les données jqGrid NON en utilisant la boîte de recherche/filtre intégrée .

Quelques autres petites erreurs comme '/Products/Search") %>' Au lieu de '/ Products/Search' ou l'utilisation du paramètre obsolète imgpath (voir documentation ) sont moins importantes. Les options de colonne par défaut comme align: 'left' Devraient être mieux supprimées.

Pensez également à utiliser la recherche dans la grille. Par exemple recherche avancée

$("#myGrid").jqGrid('navGrid','#pager',
                    {add:false,edit:false,del:false,search:true,refresh:true},
                    {},{},{},{multipleSearch:true});

et aussi recherche dans la barre d'outils :

$("#myGrid").jqGrid('filterToolbar',
                    {stringResult:true,searchOnEnter:true,defaultSearch:"cn"});

il peut probablement remplacer le formulaire de recherche que vous utilisez.

42
Oleg