jqGrid et liaison dynamique des colonnes

Question

Comment lier dynamiquement une jqGrid ? Les colonnes ne sont pas disponibles au moment de la conception mais ne le seront qu'au moment de l'exécution.

Dans la conception actuelle de jqGrid, les modèles de colonnes et autres propriétés doivent être pré-remplis pour que la grille fonctionne correctement.

Toute contribution dans ce sens est grandement appréciée.

Answer 1

Essayez ceci dans document.ready :

$.ajax(
    {
       type: "POST",
       url: "SomeUrl/GetColumnsAndData",
       data: "",
       dataType: "json",
       success: function(result)
       {
            colD = result.colData;
            colN = result.colNames;
            colM = result.colModel;

            jQuery("#list").jqGrid({
                jsonReader : {
                    cell: "",
                    id: "0"
                },
                url: 'SomeUrl/Getdata',
                datatype: 'jsonstring',
                mtype: 'POST',
                datastr : colD,
                colNames:colN,
                colModel :colM,
                pager: jQuery('#pager'),
                rowNum: 5,
                rowList: [5, 10, 20, 50],
                viewrecords: true
            })
       },
       error: function(x, e)
       {
            alert(x.readyState + " "+ x.status +" "+ e.msg);   
       }
    });
setTimeout(function() {$("#list").jqGrid('setGridParam',{datatype:'json'}); },50);

cela fonctionne bien pour moi.

Answer 2

Si quelqu'un veut implémenter cette fonctionnalité en utilisant mvc alors http://blog.lieberlieber.com/2010/07/07/asp-net-mvc-and-a-generic-jqquery-grid-jqtgrid/ est une solution plus agréable.

Answer 3

Est-il possible de recréer la grille à chaque fois qu'une colonne est ajoutée ? Vous pourriez stocker les données localement et simplement décharger/recréer la grille à chaque fois, en utilisant un modèle de colonne dynamique.

Vous pouvez également consulter certaines des démos qui affichent/masquent les colonnes de manière dynamique. En fonction du nombre de colonnes dont vous disposez, vous pourrez peut-être utiliser le même concept dans votre application.

Est-ce que ça aide ?

Answer 4

Fonction columnsData(Data) {

var str = "[";
for (var i = 0; i < Data.length; i++) {
    str = str + "{name:'" + Data[i] + "', index:'" + Data[i] + "', editable: true}";
    if (i != Data.length - 1) {
        str = str + ",";
    }
}
str = str + "]";
return str;

}

Answer 5

J'ai essayé la solution suggérée par bruno à la fois avec le type de retour de données json et jsonstring, cela fonctionne MAIS
si l'option datastr : colD
   existe - les autres demandes de données ne sont pas exécutées, bien que le filtre fonctionne sur les premières données récupérées.
   n'existent pas - double demande de données sur le chargement des grilles