web-dev-qa-db-fra.com

Charger des données JSON locales dans jQgrid sans AddJsonRows

J'utilise la méthode addJsonRows pour ajouter des données locales à un jQgrid. Comme cette méthode désactive le tri, j'ai besoin d'une autre solution. Une restriction: je ne peux pas définir l'URL ni récupérer les données du serveur car celles-ci ont été transmises via un autre composant.

Sous l'extrait éclaire le cas. La ligne commentée montre la restriction, je l'ai remplacée en définissant une variable locale pour avoir un scénario de test.

<script type="text/javascript" language="javascript">
    function loadPackageGrid() {
    // Get package grid data from hidden input.
    // var data = eval("("+$("#qsmId").find(".qsm-data-packages").first().val()+")");
        var data =  {
            "page": "1",
            "records": "2",
            "rows": [
                { "id": "83123a", "PackageCode": "83123a" },
                { "id": "83566a", "PackageCode": "83566a" }
            ]
        };

        $("#packages")[0].addJSONData(data);
    };

    $(document).ready(function() {
        $("#packages").jqGrid({
            colModel: [
                { name: 'PackageCode', index: 'PackageCode', width: "110" },
                { name: 'Name', index: 'Name', width: "300" }
            ],
            pager: $('#packagePager'),
            datatype: "local",
            rowNum: 10000,
            viewrecords: true,
            caption: "Packages",
            height: 150,
            pgbuttons: false,
            loadonce: true
        });
    });
</script>

Je me demande comment je pourrais le faire d’une autre manière (meilleure) pour conserver la fonction de tri .. J'ai essayé quelque chose avec l’option data, sans résultat.

jqgrid
28
Brecht

Je suppose que la même question est intéressante pour d'autres personnes. Alors +1 de moi pour la question.

Vous pouvez résoudre le problème de deux manières au moins. Le premier, vous pouvez utiliser type de données: "jsonstring" et datastr: data. Dans le cas où vous devez ajouter un paramètre supplémentaire jsonReader: { repeatitems: false }.

La deuxième méthode consiste à utiliser datatype: "local" et data: data.rows. Dans le cas où localReader sera utilisé pour lire les données du tableau data.rows. La valeur par défaut localReader peut lire les données.

Les démos correspondantes sont ici et ici .

J'ai légèrement modifié vos données: remplissez la colonne "Nom" et insérez le troisième élément dans les données d'entrée. 

Vous pouvez maintenant utiliser la pagination, le tri et le filtrage/recherche locaux des données. J'ai inclus un peu plus de code pour illustrer les fonctionnalités. Ci-dessous, vous trouverez le code de l'une des démos:

$(document).ready(function () {
    'use strict';
    var data = {
            "page": "1",
            "records": "3",
            "rows": [
                { "id": "83123a", Name: "Name 1", "PackageCode": "83123a" },
                { "id": "83432a", Name: "Name 3", "PackageCode": "83432a" },
                { "id": "83566a", Name: "Name 2", "PackageCode": "83566a" }
            ]
        },
        grid = $("#packages");

    grid.jqGrid({
        colModel: [
            { name: 'PackageCode', index: 'PackageCode', width: "110" },
            { name: 'Name', index: 'Name', width: "300" }
        ],
        pager: '#packagePager',
        datatype: "jsonstring",
        datastr: data,
        jsonReader: { repeatitems: false },
        rowNum: 2,
        viewrecords: true,
        caption: "Packages",
        height: "auto",
        ignoreCase: true
    });
    grid.jqGrid('navGrid', '#packagePager',
        { add: false, edit: false, del: false }, {}, {}, {},
        { multipleSearch: true, multipleGroup: true });
    grid.jqGrid('filterToolbar', { defaultSearch: 'cn', stringResult: true });
});

MIS &AGRAVE; JOUR: J'ai décidé d'ajouter plus de détails sur les différences entre les scénarios datatype: "jsonstring" et datatype: "local" car l'ancienne réponse était lue et votée par de nombreux lecteurs.

Je suggère de modifier un peu le code ci-dessus pour mieux montrer les différences. Le premier code utilise datatype: "jsonstring"

$(function () {
    "use strict";
    var data = [
            { id: "10", Name: "Name 1", PackageCode: "83123a", other: "x", subobject: { x: "a", y: "b", z: [1, 2, 3]} },
            { id: "20", Name: "Name 3", PackageCode: "83432a", other: "y", subobject: { x: "c", y: "d", z: [4, 5, 6]} },
            { id: "30", Name: "Name 2", PackageCode: "83566a", other: "z", subobject: { x: "e", y: "f", z: [7, 8, 9]} }
        ],
        $grid = $("#packages");

    $grid.jqGrid({
        data: data,
        datatype: "local",
        colModel: [
            { name: "PackageCode", width: 110 },
            { name: "Name", width: 300 }
        ],
        pager: "#packagePager",
        rowNum: 2,
        rowList: [1, 2, 10],
        viewrecords: true,
        rownumbers: true,
        caption: "Packages",
        height: "auto",
        sortname: "Name",
        autoencode: true,
        gridview: true,
        ignoreCase: true,
        onSelectRow: function (rowid) {
            var rowData = $(this).jqGrid("getLocalRow", rowid), str = "", p;
            for (p in rowData) {
                if (rowData.hasOwnProperty(p)) {
                    str += "propery \"" + p + "\" + have the value \"" + rowData[p] + "\n";
                }
            }
            alert("all properties of selected row having id=\"" + rowid + "\":\n\n" + str);
        }
    });
    $grid.jqGrid("navGrid", "#packagePager",
        { add: false, edit: false, del: false }, {}, {}, {},
        { multipleSearch: true, multipleGroup: true });
    $grid.jqGrid("filterToolbar", { defaultSearch: "cn", stringResult: true });
});

Il affiche (voir la démo )

enter image description here

Vous pouvez voir les éléments unsorted dans le même ordre que les données d'entrée. Les éléments de données d'entrée seront sauvegardés dans les paramètres internes data et _index. La méthode getLocalRow utilisée dans onSelectRow montre que les éléments internes de data ne contiennent que des propriétés d'éléments d'entrée dont le nom correspond à la propriété name de certaines colonnes jqGrid. De plus, la propriété _id_ non nécessaire sera ajoutée.

De l'autre côté la prochaine démo qui utilise datatype: "local" affiche les données triées et toutes les propriétés comprenant les objets complexes seront toujours enregistrées dans le data interne:

enter image description here

Le code utilisé dans la dernière démo est inclus ci-dessous:

$(function () {
    "use strict";
    var data = [
            { id: "10", Name: "Name 1", PackageCode: "83123a", other: "x", subobject: { x: "a", y: "b", z: [1, 2, 3]} },
            { id: "20", Name: "Name 3", PackageCode: "83432a", other: "y", subobject: { x: "c", y: "d", z: [4, 5, 6]} },
            { id: "30", Name: "Name 2", PackageCode: "83566a", other: "z", subobject: { x: "e", y: "f", z: [7, 8, 9]} }
        ],
        $grid = $("#packages");

    $grid.jqGrid({
        data: data,
        datatype: "local",
        colModel: [
            { name: "PackageCode", width: 110 },
            { name: "Name", width: 300 }
        ],
        pager: "#packagePager",
        rowNum: 2,
        rowList: [1, 2, 10],
        viewrecords: true,
        rownumbers: true,
        caption: "Packages",
        height: "auto",
        sortname: "Name",
        autoencode: true,
        gridview: true,
        ignoreCase: true,
        onSelectRow: function (rowid) {
            var rowData = $(this).jqGrid("getLocalRow", rowid), str = "", p;
            for (p in rowData) {
                if (rowData.hasOwnProperty(p)) {
                    str += "propery \"" + p + "\" + have the value \"" + rowData[p] + "\"\n";
                }
            }
            alert("all properties of selected row having id=\"" + rowid + "\":\n\n" + str);
        }
    });
    $grid.jqGrid("navGrid", "#packagePager",
        { add: false, edit: false, del: false }, {}, {}, {},
        { multipleSearch: true, multipleGroup: true });
    $grid.jqGrid("filterToolbar", { defaultSearch: "cn", stringResult: true });
});

Je recommanderais donc d'utiliser datatype: "local" au lieu de datatype: "jsonstring". datatype: "jsonstring" pourrait présenter certains avantages uniquement dans des scénarios très spécifiques.

40
Oleg

En utilisant la fonction beforeSubmit (), vous pouvez intervenir entre l'envoi de données par jqgridatting et le serveur, tout en ajoutant, modifiant et supprimant des lignes.

  1. En utilisant l'option de fonction beforeSubmit (), vous pouvez capturer les données publiées tout en ajoutant une nouvelle ligne et mettre à jour les données JSON locales.

    beforeSubmit: function (postdata, formid) {

// capture posted data, create JOSN item and add to the JSON array.
customersData.Push({ id: guid(), FirstName: postdata.FirstName, LastName: postdata.LastName, sendEmail: postdata.sendEmail });

// Refresh the grid, so that changes to the underlining 
// local data array is reflected in the grid. 
$('#customerGrid').jqGrid('setGridParam', { datatype: 'local', data: customersData }).trigger('reloadGrid');

// Close the dialog.
try {
      $(".ui-icon-closethick").trigger('click');
    }
    catch (ex) { }
    return [false, ''];
    }
  2. De même, vous pouvez utiliser l'option de fonction beforeSubmit () pour capturer les valeurs de champ mises à jour et mettre à jour les données JSON locales. 
  3. La même chose peut être faite pour supprimer une ligne de la grille également, ce qui se reflète dans un élément ayant été supprimé des données locales.

Pour une solution complète, vous pouvez afficher travailler avec des données locales dans jqgrid

0
Ranganatha