Récupérer données XML vers un affichage dojox DataGrid

kcin · 15/11/2012, 00h44

Bonjour,

Je ne savais pas trop où mettre ce sujet, vu qu'il touche aussi bien XML, Ajax et javascript, jelaisse donc le soin aux modérateurs de choisir le plus approprié

Sinon voici mon problème : Je dois récupérer les données d'un XML via un dojo.xhr pour les afficher sous forme de tableau à l'aide de dojo DataGrid. J'arrive à récupérer les données et dans un autre contexte, j'arrive à faire afficher un DataGrid. Mais je bloque pour faire les deux en même temps. Du moins, j'arrive à afficher l'entête de mon tableau, mais pour les données, çà me marque : Une erreur est survenue. Coooollll Mais c'est quoi cette erreur plus précisément XD !

Voici le code que j'utilise :

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
70
71
72
73
74
<!DOCTYPE html>
<html>
<head>
	<title>Dojo</title>
	<link type="text/css" rel="stylesheet" href="claro.css"/>	
	<style type="text/css">
		@import "Grid.css";
		@import "nihiloGrid.css";
 
		.dojoxGrid table {
		  margin: 0;
		}
	</style>
 
	<script>dojoConfig = {parseOnLoad: true}</script>
	<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"></script>
	<script src="xml2jsobj.js"></script>
	<script>
		dojo.require("dojox.grid.DataGrid");
		dojo.require("dojox.data.XmlStore");
		dojo.require("dojox.data.JsonRestStore");
		dojo.require("dojo.data.ItemFileReadStore");
 
		dojo.ready(function(){
 
			var targetNode = dojo.byId("grid.DataGrid");
 
			var xhrArgs = {
			    url: "../vehicules.xml",
			    handleAs: "xml",
			    load: function(data, ioArgs){
			    	var JSONData = xml2json.parser(data);
 
					var newData = {
						identifier: 'vehicules',
						items: data
					};
 
					//var dataStore = new dojox.data.XmlStore({data: data});
			    	var dataStore = new dojo.data.ItemFileReadStore({data: newData, id:"dataStoreId"});
					var gridStructure = [
	                   [
	                     { field: "numero", 	 	 name: "Numéro", 			width: 5,  },
	                     { field: "marque", 	 	 name: "Marque", 			width: 5,  },
	                     { field: "modele",  		 name: "Modèle", 			width: 10, },
	                     { field: "immatriculation", name: "Immatriculation", 	width: 15, },
	                     { field: "date_immat", 	 name: "Date immat", 		width: 10, }
	                   ]
	                 ];					                 
 
					var grid = new dojox.grid.DataGrid({
						structure: gridStructure
					});
					grid.setStore(dataStore);
					grid.placeAt(targetNode);				
					grid.startup(); 
			    },
			    error: function(error){
			        targetNode.innerHTML = "An unexpected error occurred: " + error;
			    }
			};
 
			var deferred = dojo.xhrGet(xhrArgs);
		});
	</script>
</head>
<body class='claro'>
 
<h1>Dojo</h1>
 
<div id="grid.DataGrid" style="width:900px; height:200px;"></div>
 
</body>
</html>

Le fichier XML est ce qu'il y a de plus classique, rien de compliqué.

J'ai essayé avec deux Data store différent, l'un pour XML et un autre pour du JSON.

Si quelqu'un aurait la gentillesse de m'aider, je lui en serais grandement reconnaissant

Merci d'avance.

kcin · 15/11/2012, 12h40

Bon, j'ai un peu avancer sur mon problème, mais celui-ci n'est pas entièrement résolu...

Je vous remet le dernier code :

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
dojo.require("dojox.grid.DataGrid");
		dojo.require("dojo.data.ItemFileReadStore");
		dojo.require("dojo.data.ObjectStore");
 
		dojo.ready(function(){
 
			var targetNode = dojo.byId("grid.debug");
 
			var xhrArgs = {
			    url: "../vehicules.xml",
			    load: function(data, ioArgs){
				    var DOM = parseXml(data);
			    	var JSONData = xml2json(DOM);
 
					var newData = {
						identifier: 'vehicule',
						items: JSONData
					};
 
					var dataStore = new dojo.data.ObjectStore({objectStore: newData});
			    	//var dataStore = new dojo.data.ItemFileReadStore({data: {items: newData}, id:"dataStoreId"});
					var gridStructure = [
	                   [
	                     { field: "numero", 	 	 name: "Numéro", 			width: 5,  },
	                     { field: "marque", 	 	 name: "Marque", 			width: 5,  },
	                     { field: "modele",  		 name: "Modèle", 			width: 10, },
	                     { field: "immatriculation", name: "Immatriculation", 	width: 15, },
	                     { field: "date_immat", 	 name: "Date immat", 		width: 10, }
	                   ]
	                 ];
 
					targetNode.innerHTML = data + "<br /><br />" + JSONData;
					console.log(newData);
					console.log(dataStore);			                 
 
					var grid = new dojox.grid.DataGrid({
						id: "grid",
						jsid: "grid",
						store: dataStore,
						structure: gridStructure,
						style: 'width:900px;height:300px;'
					}, dojo.byId("grid.DataGrid"));
 
					grid.startup(); 
			    },
			    error: function(error){
			        targetNode.innerHTML = "An unexpected error occurred: " + error;
			    }
			};
 
			var deferred = dojo.xhrGet(xhrArgs);
		});

Donc maintenant, j'ai réussi à parser mon XML puis à le mettre sous format JSON. Quand je fais afficher le contenu de mes objets, çà me semble correct. Reste le soucis de mettre ces données au format JSON dans le datagrid.

J'ai testé avec dojo.data.ObjectStore et dojo.data.ItemFileReadStore mais le résultat est le même.

Pourrait on m'éclairer ?

Merci d'avance

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