plugin jqGrig, charger des données JSON [Résolu]

moutey · 14/06/2011, 16h57

Bonjour je souhaite charger des données d'un fichier json dans une jqgrid,
Voila mon code de la grille

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
 
<link rel="stylesheet" type="text/css" media="screen" href="css/custom-theme/jquery-ui-1.8.13.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
 
 <style>
html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}
</style>
 
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
 
  <script type="text/javascript">
$(function(){ 
	$("#list").jqGrid({
	    url: 'dbdata.txt',
	    datatype: 'json',
	    mtype: 'GET',
	    loadonce: true,
	    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
	    serializeGridData: function (postData) {
	        return JSON.stringify(postData);
	    },
	    jsonReader: {
	        root: function (obj) { return obj.d.rows; },
	        page: function (obj) { return obj.d.page; },
	        total: function (obj) { return obj.d.total; },
	        records: function (obj) { return obj.d.records; }
	    },
	    colModel: [
	        { name: 'firstname', label: 'firstName', width: 80 },
	        { name: 'lastname', label: 'Last Name', width: 80 },  
	        { name: 'age', label: 'age', width: 80 },
	        { name: 'adress', label: 'adress', width: 80 }
 
	    ],
	    rowNum: 10,
	    rowList: [10, 20, 300],
	  //  sortname: 'firstname',
	    sortorder: "asc",
	    pager: "#pager",
	    viewrecords: true,
	    gridview: true,
	    rownumbers: true,
	    height: 250,
	    caption: 'My first grid'
	}).jqGrid('navGrid', '#pager', {edit: false, add: false, del: false, search: true},
	    {},{},{},{multipleSearch : true});
 
}); 
 
jQuery("#list").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});
</script>
</head>
<body>
 
<table id="list"><tr><td/></tr></table> 
<div id="pager"></div> 
</body>
</html>

et ici du fichier json

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
[{"firstname":"Smith",
"lastname":"John",
 "age":15,
 "adress":"75 rue vincent fayo"},
 {"firstname":"Bibi",
"lastname":"Laurent",
 "age":15,
 "adress":"75 rue vincent fayo"},
 {"firstname":"Dere",
"lastname":"Herve",
 "age":15,
 "adress":"75 rue vincent fayo"}]

La page ne charge pas les données et reste sur loading,
le fichier est dit valide selon les sites de validation,le fichier json et le fichier de la grille sont au même niveau .

Merci de votre aide

moutey · 15/06/2011, 11h06

J'ai trouvé la réionse,
JQGrid attend un format particulier de JSON avec des détails avant de pouvoir charger le fichier JSON des détails tels que le nombre de pages,le nombre d'enregistrement, ainsi le fichier json à charger devient plutôt :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 {"page":"1","total":1,"records":"1","rows":[{"id":"1","cell":["Smith","john",15,"75 rue VF"]}]}

Si ça peut aider quelqu'un dans la même situation

Bien Cordialement

15/06/2011, 11h06	#2
moutey Membre du Club Inscription : mai 2003 Messages : 123 Détails du profil Informations forums : Inscription : mai 2003 Messages : 123 Points : 57 Points : 57	J'ai trouvé la réionse, JQGrid attend un format particulier de JSON avec des détails avant de pouvoir charger le fichier JSON des détails tels que le nombre de pages,le nombre d'enregistrement, ainsi le fichier json à charger devient plutôt : Code : Sélectionner tout - Visualiser dans une fenêtre à part {"page":"1","total":1,"records":"1","rows":[{"id":"1","cell":["Smith","john",15,"75 rue VF"]}]} Si ça peut aider quelqu'un dans la même situation Bien Cordialement
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email