plugin jqGrig, charger des données JSON

**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

plugin jqGrig, charger des données JSON

jQuery

Discussions similaires

Partager

Partager