Population dynamique de JQGrid colModel et données

J'essaie de créer la grille dynamiquement. Mon objectif est de créer une sorte de frontal dynamique pour montrer certaines tables de la base de données. J'ai donc besoin d'ajouter/supprimer des colonnes dynamiquement. J'ai besoin de changer dynamiquement les types de données des colonnes. J'ai utilisé le script fourni comme réponse au a similar question.Population dynamique de JQGrid colModel et données

Je reçois ma grille construite, elle montre mes colonnes. Mais aucune donnée n'est chargée dans la grille. Firebug montre la demande d'être viré. Données json correctes renvoyées En fait, la grille déclenche également un événement gridComplete. Mais aucune donnée ne montre :-(

Quelqu'un at-il fait face à ce problème, j'ai passé toute la journée à peaufiner le jsonReader et colModel en vain

Mon exemple de fichier html:

<!doctype html> 
<html> 
<link href="../styles/layout.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" 
src="/struts2-jquery-grid-showcase/struts/js/base/jquery-1.4.2.js"></script> 
<script type="text/javascript" 
src="/struts2-jquery-grid-showcase/struts/js/base/jquery-ui.js"></script> 
<script type="text/javascript" 
src="/struts2-jquery-grid-showcase/struts/js/plugins/jquery.form.js"></script> 
<script type="text/javascript" 
src="/struts2-jquery-grid-showcase/struts/js/plugins/jquery.subscribe.js"></script> 
<link rel="stylesheet" href="../themes/showcase/jquery-ui.css" 
type="text/css" /> 
<script type="text/javascript" 
src="/struts2-jquery-grid-showcase/struts/js/plugins/jquery.jqGrid.js"></script> 
<script type="text/javascript" 
src="/struts2-jquery-grid-showcase/struts/js/struts2/jquery.struts2.js"></script> 
<script type="text/javascript" src="../js/refData.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function() { 
jQuery.struts2_jquery.debug = true; 
jQuery.struts2_jquery.loadAtOnce = true; 
    jQuery.scriptPath = "/struts2-jquery-grid-showcase/struts/"; 
jQuery.struts2_jquery.minSuffix = ""; 
jQuery.ajaxSettings.traditional = true; 

jQuery.ajaxSetup ({ 
    cache: false 
}); 
$.ajax(
     { 
     type: "POST", 
     url: "/struts2-jquery-grid-showcase/refData-table.action", 
     data: "", 
     dataType: "json", 
     success: function(result) 
     { 
       colD = result.gridModel; 
       colN = result.colNames; 
       colM = result.colModel; 

       jQuery("#refData").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, 
        loadComplete: function(data){alert('loaded');}, 
        loadError: function(xhr,status,error){alert('error');} 
       }) 
     }, 
     error: function(x, e) 
     { 
       alert(x.readyState + " "+ x.status +" "+ e.msg); 
     } 
     }); 
    setTimeout(function() {$("#refData").jqGrid('setGridParam',{datatype:'json'}); },500); 
}); 
</script> 
<h2>Maintain Reference Data</h2> 
<table id="refData"> 
<tr> 
    <td /> 
</tr> 
</table> 
<div id="pager"></div> 
</html>

Mes données JSON:

{"JSON":"success","colModel":[{"editable":true,"edittype":"integer","index":"userInfoId","jsonmap":"userInfoId","key":false,"name":"userInfoId","resizable":true,"search":false,"sortable":true,"width":300},{"editable":true,"edittype":"text","index":"UserID","jsonmap":"userID","key":true,"name":"userID","resizable":true,"search":false,"sortable":true,"width":300}],"colNames":["UserInfo ID","User ID"],"gridModel":[{"userID":"SMI","userInfoId":5},{"userID":"ABC","userInfoId":7},{"userID":"PQR","userInfoId":8},{"userID":"FUR","userInfoId":10},{"userID":"COO","userInfoId":13}],"page":1,"records":56,"rows":15,"sidx":null,"sord":"asc","total":0}

Source

2010-10-05 VJ.

Il me semble que vous oubliez d'inclure {} comme contiennent de gridModel. à l'heure actuelle les données ressemble

{ 
    "JSON": "success", 
    "colModel": [ 
     ... 
    ], 
"colNames": [ "UserInfo ID", "User ID" ], 
"gridModel": [ 
     {"userID": "SMI","userInfoId": 5}, 
     {"userID": "ABC","userInfoId": 7}, 
     {"userID": "PQR","userInfoId": 8}, 
     {"userID": "FUR","userInfoId": 10}, 
     {"userID": "COO","userInfoId": 13} 
    ], 
    "page": 1, 
    "records": 56, 
    "rows": 15, 
    "sidx": null, 
    "sord": "asc", 
    "total": 0 
}

au lieu de

{ 
    "JSON": "success", 
    "colModel": [ 
     ... 
    ], 
"colNames": [ "UserInfo ID", "User ID" ], 
"gridModel": { [ 
     {"userID": "SMI","userInfoId": 5}, 
     {"userID": "ABC","userInfoId": 7}, 
     {"userID": "PQR","userInfoId": 8}, 
     {"userID": "FUR","userInfoId": 10}, 
     {"userID": "COO","userInfoId": 13} 
    ], 
    "page": 1, 
    "records": 56, 
    "rows": 15, 
    "total": 0 
    } 
}

L'utilisation de "jsonmap" me semble pas non plus vraiment nécessaire.

Source

2010-10-05 23:32:04 Oleg

Vous avez été très près .. D'autres changements ont été nécessaires .. comme le tableau de dossiers devait avoir un nom pour bon json. donc {"dataset": [..], ...}. L'autre élément qui me manquait était de mettre le repeatitem sur false et de donner la racine droite attrib. –

Merci beaucoup Oleg. Après avoir modifié la structure de mon json comme suggéré par vous et après avoir débogué un peu pour corriger quelques attribs (comme root), j'ai réussi à le faire fonctionner. Voici finale JSON et html:

Html:

$.ajax(
    { 
     type: "POST", 
     url: "refData-table.json", 
     data: "", 
     dataType: "json", 
     success: function(result) 
     { 
      colD = result.gridModel; 
      colN = result.colNames; 
      colM = result.colModel; 

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

JSON:

{ 
"JSON":"success", 
"colModel":[ 
    {"editable":true,"edittype":"integer","index":"userInfoId","jsonmap":"userInfoId","key":false,"name":"userInfoId","resizable":true,"search":false,"sortable":true,"width":300}, 
    {"editable":true,"edittype":"text","index":"UserID","jsonmap":"userID","key":true,"name":"userID","resizable":true,"search":false,"sortable":true,"width":300} 
    ], 
"colNames":["UserInfo ID","User ID"], 
"gridModel":{ 
    "dataset":[ 
     {"userID":"SMI","userInfoId":5}, 
     {"userID":"ABC","userInfoId":7}, 
     {"userID":"PQR","userInfoId":8}, 
     {"userID":"FUR","userInfoId":10}, 
     {"userID":"COO","userInfoId":13} 
     ], 
    "page":1, 
    "records":56, 
    "rows":15, 
    "sidx":null, 
    "sord":"asc", 
    "total":0 
    } 
}

Source

2010-10-06 15:10:06

Votre dataset peut être optimisé en envoyant uniquement un tableau de valeurs et en spécifiant repeatitems: true (dans jsonReader) – msanjay

Population dynamique de JQGrid colModel et données

Répondre

Questions connexes