Plugin jqGrid, il ne m'affiche rien ! [Débutant(e)]

**FrankOVD** · 21/04/2011, 22h29

Bonjour,

Je n'ai jamais dans ma vie réussi à partir une liste JQGrid fonctionnelle de zéro même si j'ai déjà travaillé sur des intégrations existantes. Encore cette fois, rien ne se passe et je fait pourtant à la lettre ce qui se retrouve sur la doc en ligne que j'ai trouvé. Quelqu'un peut me dire ce qui ne fonctionne pas?

Version JQuery : 1.5.2
Version JQgrid : 4.0.0
Code JQuery

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
//Liste JQGrid
var JQGlist = $("<table>");
$(JQGlist).addClass(".JQGlist");
$(".module").append(JQGlist);
var JQGpager = $("<div>");
$(JQGpager).addClass(".JQGpager");
$(".module").append(JQGpager);
 
$(JQGlist).jqGrid({
  url:"jx.php?vmod="+nom_module+"&vfunc=get_JQGlist&page=1&rows=100&sidx=id_production&sord=asc",
  datatype: "json",
  colNames:['Production','Début production', 'Client', 'Amount','Tax','Total','Notes'],
  colModel:[
    {name:'id_production',index:'id_production', width:110},
    {name:'debut_production',index:'debut_production', width:140},
    {name:'name',index:'name asc, invdate', width:100},
    {name:'amount',index:'amount', width:80, align:"right"},
    {name:'tax',index:'tax', width:80, align:"right"},		
    {name:'total',index:'total', width:80,align:"right"},		
    {name:'note',index:'note', width:150, sortable:false}		
  ],
  rowNum:10,
  rowList:[10,20,30],
  pager: '.JQGpager',
  sortname: 'id',
  viewrecords: true,
  sortorder: "desc",
  caption:"JSON Example"
});
jQuery(JQGlist).jqGrid("navGrid",".JQGpager",{edit:false,add:false,del:false});

String JSon retournée par mon script PHP

Code :

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

{"page":"1","total":1,"records":13,"rows":[{"id":"VP11030015","cell":["VP11030015","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11030018","cell":["VP11030018","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11030025","cell":["VP11030025","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040001","cell":["VP11040001","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040004","cell":["VP11040004","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040005","cell":["VP11040005","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040008","cell":["VP11040008","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040009","cell":["VP11040009","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040010","cell":["VP11040010","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040012","cell":["VP11040012","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040013","cell":["VP11040013","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040014","cell":["VP11040014","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040015","cell":["VP11040015","0000-00-00 00:00:00",0,0,0,0,0]}]}

**danielhagnoul** · 21/04/2011, 22h44

Bonsoir

Après un coup d'oeil très rapide sur le code je vois des points inutiles ! addClass() attend simplement le nom de la classe. Quel est le résultat avec les modifications ci-dessous.

Code :

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

1
2
$(JQGlist).addClass("JQGlist");
$(JQGpager).addClass("JQGpager");

**FrankOVD** · 21/04/2011, 22h48

C'est une remarque pertinente mais ça n'a malheureusement pas aidé. Jusqu'à maintenant, en utilisant IE9 sur Windows 7 (au cas ou ca pourrait vous aider à m'aider), je n'obtiens toujours que deux résultats:

La grille s'affiche mais reste vide
J'ai une erreur javascript qui se réfère au code de jquery (tant v1.5.1 que v1.5.2)

Code :

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

1
2
3
4
5
Ligne: 16
Caractère: 40246
Code: 0
Message d'erreur: Syntax error, unrecognized expression: #
URL: http://127.0.0.1/dev/lib/jquery-1.5.2.min.js

**danielhagnoul** · 22/04/2011, 10h40

Bonjour

Je ne connais pas ce plugin, je viens de faire une première page de test, mais le résultat ne me plaît pas. Je préfère ma première page de test avec Datatable que je ne connais pas mieux.

Je ne peux donc pas vous être d'une grande aide, mais à toutes fins utiles, vérifier que vous avez bien téléchargé tous les éléments nécessaires. Dans mon test :

Code :

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

1
2
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/humanity/jquery-ui.css">
<link rel="stylesheet" media="screen" href="../jqGrid4/css/ui.jqgrid.css" />

Code :

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

1
2
3
4
<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script src="../jqGrid4/js/i18n/grid.locale-en.js"></script>
<script src="../jqGrid4/js/jquery.jqGrid.min.js"></script>

**FrankOVD** · 22/04/2011, 14h40

Voici le CSS et les scripts JS généraux qui sont associés à mon source. J'ai fait un test en éliminant YUI3 de l'équation mais ça ne change rien.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<link rel="stylesheet" type="text/css" href="lib/jq_plugins/css/smoothness/jquery-ui-1.8.11.custom.css" />
<link rel="stylesheet" type="text/css" href="lib/jq_plugins/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="lib/jq_plugins/thickboxify/jquery.thickboxify.css" />
<script type="text/javascript" src="lib/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="lib/jquery-json.js"></script>
<script type="text/javascript" src="lib/jq_plugins/sort.js"></script>
<script type="text/javascript" src="lib/jq_plugins/jquery.rightClick.js"></script>
<script type="text/javascript" src="lib/jq_plugins/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" src="lib/jq_plugins/thickboxify/jquery.thickboxify.js"></script>
<script type="text/javascript" src="lib/jq_plugins/grid.locale-fr.js"></script>
<script type="text/javascript" src="lib/jq_plugins/jquery.jqGrid.min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>

**FrankOVD** · 26/04/2011, 13h39

Pour vous aider à m'aider. Voici un code source résuit à sa plus simple expression. Je vous serai éternellement reconnaissant de m'aider.

index.php

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
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.11.custom.css" />
    <link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
		<script type="text/javascript" src="includes/jquery-1.5.2.min.js"></script>
		<script type="text/javascript" src="includes/jquery-ui-1.8.11.custom.min.js"></script>
		<script type="text/javascript" src="includes/grid.locale-fr.js"></script>
    <script type="text/javascript" src="includes/jquery.jqGrid.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(e) {
				$("#JQlist").jqGrid({
					url:"ajax.php",
					datatype: "json",
					colNames:['Production','Début production', 'Client', 'Amount','Tax','Total','Notes'],
					colModel:[
						{name:'id_production',index:'id_production', width:110},
						{name:'debut_production',index:'debut_production', width:140},
						{name:'name',index:'name asc, invdate', width:100},
						{name:'amount',index:'amount', width:80, align:"right"},
						{name:'tax',index:'tax', width:80, align:"right"},		
						{name:'total',index:'total', width:80,align:"right"},		
						{name:'note',index:'note', width:150, sortable:false}		
					],
					rowNum:10,
					rowList:[10,20,30],
					pager: '#JQGpager',
					sortname: 'id',
					viewrecords: true,
					sortorder: "desc",
					caption:"JSON Example"
				});
				jQuery("#JQlist").jqGrid("navGrid","#JQGpager",{edit:false,add:false,del:false});
			});
		</script>
	</head>
	<body>
		<table id="JQlist"></table>
		<div id="JQGpager"></div>
	</body>
</html>

ajax.php

Code :

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

1
2
3
4
5
6
<?php
$str = <<<JQGRID
{"page":"1","total":1,"records":13,"rows":[{"id":"VP11030015","cell":["VP11030015","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11030018","cell":["VP11030018","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11030025","cell":["VP11030025","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040001","cell":["VP11040001","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040004","cell":["VP11040004","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040005","cell":["VP11040005","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040008","cell":["VP11040008","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040009","cell":["VP11040009","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040010","cell":["VP11040010","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040012","cell":["VP11040012","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040013","cell":["VP11040013","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040014","cell":["VP11040014","0000-00-00 00:00:00",0,0,0,0,0]},{"id":"VP11040015","cell":["VP11040015","0000-00-00 00:00:00",0,0,0,0,0]}]}
JQGRID;
echo($str);
?>

Voilà! Ne vous reste qu'à lier correctement index.php aux librairies et feuilles de style standard. Dans mon test à moi, une grille s'affiche mais elle est vide !? Merci d'avance!

EDIT : Lorsque je clique sur les flèches de la colonne "Production" les résultats apparaissent!?

Plugin jqGrid, il ne m'affiche rien ! [Débutant(e)]

jQuery

Vue hybride

Discussions similaires

Partager

Partager