plugin jqGrid, création difficile

**thor76160** · 12/10/2010, 15h00

bonjour à tous.
voilà je viens je découvrir jqGrid et j'essaye de l'utiliser ! à l'adresse suivante : http://trirand.com/blog/jqgrid/jqgrid.html >> Live Data Manipulation >> Navigator

Une doc assez "light" est dispo sur le site, comme vous le voyez ils proposent le code javascript :

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
jQuery("#navgrid").jqGrid(
	{
		url:'client_edit.php',
		datatype: "xml",
		colNames:['ID','Nom', 'Lien'],
		colModel:[
			{name:'id_client',index:'id_client', width:55,editable:false,editoptions:{readonly:true,size:10}},
			{name:'nom_client',index:'nom_client', width:80,editable:true,editoptions:{size:10}},
			{name:'lien_client',index:'lien_client', width:90,editable:true,editoptions:{size:25}}
		],
		rowNum:10,
		rowList:[10,20,30],
		pager: '#pagernav',
		sortname: 'id_client',
		viewrecords: true,
		sortorder: "desc",
		caption:"Navigator Example",
		editurl:"client_edit.php",
		height:210
	});
 
	jQuery("#navgrid").jqGrid('navgrid','#pagernav',
		{}, //options
		{height:280,reloadAfterSubmit:false}, // edit options
		{height:280,reloadAfterSubmit:false}, // add options
		{reloadAfterSubmit:false}, // del options
		{} // search options
	);

le problème c'est qu'ils ne disent pas quels fichiers .js il faut importer

alors je suis sûr que c'est à cause de ça que rien ne marche, je ne vois aucune grille dans ma page php.
après j'aimerais apprendre à utiliser les boutons "add", "modify" et "delete".

qui serait assez gentil pour me décoincer svp ?
merci ^^

[Edit 15:35] j'ai un peu progressé :

client.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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Gestion des clients</title>
 
	<link rel="stylesheet" href="css/style.css">
 
	<link rel="stylesheet" type="text/css" media="screen" href="js/jqueryui/css/ui-lightness/jquery-ui-1.8.5.custom.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="js/jquery.jqGrid-3.8/css/ui.jqgrid.css" />
 
	<script type="text/javascript" src="js/jquery.jqGrid-3.8/js/jquery-1.4.2.min.js"></script>
 
	<script type="text/javascript" src="js/jquery.jqGrid-3.8/js/i18n/grid.locale-fr.js"></script>
	<script type="text/javascript" src="js/jquery.jqGrid-3.8/js/jquery.jqGrid.min.js"></script>
 
	<script type="text/javascript">
 
	jQuery(document).ready(function()
	{
		jQuery("#navgrid").jqGrid(
		{
			url:'client_xml.php',
			datatype: "xml",
			colNames:['Identifiant','Nom', 'Lien', 'Nombre de photos'],
			colModel:[
				{name:'id_client',index:'id_client', width:100,editable:false,editoptions:{readonly:true,size:10}},
				{name:'nom_client',index:'nom_client', width:150,editable:true,editoptions:{size:10}},
				{name:'lien_client',index:'lien_client', width:300,editable:true,editoptions:{size:25}},
				{name:'nb_photos',index:'nb_photos', width:200,editable:false,editoptions:{size:25}}
			],
			rowNum:10,
			rowList:[10,20,30],
			pager: '#pagernav',
			sortname: 'id_client',
			viewrecords: true,
			sortorder: "desc",
			caption:"Gestion des clients",
			editurl:"client_edit.php",
			height:310
		});
 
		jQuery("#navgrid").jqGrid('navGrid','#pagernav',
			{}, //options
			{height:130,reloadAfterSubmit:true}, // edit options
			{height:130,reloadAfterSubmit:true}, // add options
			{reloadAfterSubmit:true}, // del options
			{} // search options
		);
	});
 
	</script>
</head>
<body>
 
	<table id="navgrid"></table>
 
	<div id="pagernav"></div>
 
</body>
</html>

client_xml.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
<?php
 
include('inc/config.php');
 
// GENERATION DE L'ARBRE XML
/*$qte_par_page = $_GET["rowList"];
$nb_clients = mysql_fetch_object(mysql_query("SELECT COUNT(*) AS nb_clients
											FROM client;"))->nb_clients;
$nb_pages = ceil($nb_clients / $qte_par_page);*/
 
$xml = "<rows>\n";
$xml .= "\t<page>1</page>\n";
$xml .= "\t<total>1</total>\n";
$xml .= "\t<records>5</records>\n";
 
$sql = mysql_query("SELECT id_client, nom_client, lien_client
					FROM client;");
while($rs = mysql_fetch_object($sql))
{
	$xml .= "\t<row>\n";
 
	$xml .= "\t\t<cell>".addslashes($rs->id_client)."</cell>\n";
	$xml .= "\t\t<cell>".addslashes($rs->nom_client)."</cell>\n";
	$xml .= "\t\t<cell>".addslashes($rs->lien_client)."</cell>\n";
 
	$xml .= "\t</row>\n";
}
 
$xml .= "</rows>\n";
 
echo $xml;
 
?>

malheureusement je n'arrive tjr pas à afficher la liste de mes clients, le fichier php génère pourtant un xml :

<rows>
<page>1</page>
<total>1</total>
<records>5</records>
<row>
<cell>1</cell>
<cell>bamby</cell>

<cell>www.bamby.fr</cell>
</row>
<row>
<cell>2</cell>
<cell>pinnoccio</cell>
<cell>www.pinnoccio.fr</cell>
</row>

<row>
<cell>3</cell>
<cell>dark vador</cell>
<cell>www.vador.fr</cell>
</row>
<row>
<cell>4</cell>

<cell>françois perrusse</cell>
<cell>www.perrusse.fr</cell>
</row>
</rows>

[Edit 20:54] dernière version de mes codes :

client.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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Gestion des clients</title>
 
	<link rel="stylesheet" href="css/style.css">
 
	<link rel="stylesheet" type="text/css" media="screen" href="js/jqueryui/css/ui-lightness/jquery-ui-1.8.5.custom.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="js/jquery.jqGrid-3.8/css/ui.jqgrid.css" />
 
	<script type="text/javascript" src="js/jquery.jqGrid-3.8/js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.jqGrid-3.8/js/i18n/grid.locale-fr.js"></script>
	<script type="text/javascript" src="js/jquery.jqGrid-3.8/js/jquery.jqGrid.min.js"></script>
 
	<script type="text/javascript">
 
	jQuery(document).ready(function()
	{
		jQuery("#navgrid").jqGrid(
		{
			url:'http://localhost/site/admin/client_xml.php?q=1',
			datatype: "xml",
			colNames:['Identifiant','Nom', 'Lien', 'Nombre de photos'],
			colModel:[
				{name:'id_client',index:'id_client', width:100,editable:false,editoptions:{readonly:true,size:10}},
				{name:'nom_client',index:'nom_client', width:150,editable:true,editoptions:{size:10}},
				{name:'lien_client',index:'lien_client', width:300,editable:true,editoptions:{size:25}},
				{name:'nb_photos',index:'nb_photos', width:200,editable:false,editoptions:{size:25}}
			],
			rowNum:10,
			rowList:[10,20,30],
			pager: jQuery('#pagernav'), 
			sortname: 'id_client',
			viewrecords: true,
			sortorder: "ASC",
			caption:"Gestion des clients",
			editurl:"http://localhost/site/admin/client_edit.php",
			height:310
		});
 
		jQuery("#navgrid").jqGrid('navGrid','#pagernav',
			{}, //options
			{height:130,reloadAfterSubmit:true}, // edit options
			{height:130,reloadAfterSubmit:true}, // add options
			{reloadAfterSubmit:true}, // del options
			{} // search options
		);
	});
 
	</script>
</head>
<body>
 
	<table id="navgrid"></table>
 
	<div id="pagernav"></div>
 
</body>
</html>

client_xml.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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<?php
 
include('inc/config.php');
 
// réception des variables GET
$page = $_GET['page']; // numéro de page
$limit = $_GET['rows']; // quantité de réponse par page
$sidx = $_GET['sidx']; // order by (champ)
$sord = $_GET['sord']; // order by (sens)
 
// gestion de la pagination
$nb_clients = mysql_fetch_object(mysql_query("SELECT COUNT(*) AS nb_clients FROM client;"))->nb_clients;
$nb_pages = 0; if($nb_clients > 0) { $nb_pages = ceil($nb_clients / $limit); }
if($page > $nb_pages) { $page = $nb_pages; }
$start = $limit * $page - $limit;
 
if (stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml"))
{
        header("Content-type: application/xhtml+xml;charset=utf-8");
}
else
{
        header("Content-type: text/xml;charset=utf-8");
}
 
$xml = "<?xml version='1.0' encoding='utf-8'?>\n";
 
$xml .= "<rows>\n";
$xml .= "\t<page>".$page."</page>\n";
$xml .= "\t<total>".$nb_pages."</total>\n";
$xml .= "\t<records>".$nb_clients."</records>\n";
 
$sql = mysql_query("SELECT C.id_client, nom_client, lien_client, COUNT( P.id_client ) AS nb_photos
                                        FROM client C
                                        LEFT OUTER JOIN photo P ON C.id_client = P.id_client
                                        GROUP BY C.id_client
                                        ORDER BY ".$sidx." ".$sord."
                                        LIMIT ".$start.", ".$limit.";");
while($rs = mysql_fetch_object($sql))
{
        $xml .= "\t<row>\n";
        
        $xml .= "\t\t<cell>".addslashes($rs->id_client)."</cell>\n";
        $xml .= "\t\t<cell>".addslashes($rs->nom_client)."</cell>\n";
        $xml .= "\t\t<cell>".addslashes($rs->lien_client)."</cell>\n";
        $xml .= "\t\t<cell>".addslashes($rs->nb_photos)."</cell>\n";
        
        $xml .= "\t</row>\n";
}
 
$xml .= "</rows>\n";
 
echo $xml;
 
?>

client_edit.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
<?php
 
include('inc/config.php');
 
/*// ADD
mysql_query("INSERT INTO client (nom_client, lien_client) VALUES ('".$_GET["nom_client"]."', '".$_GET["lien_client"]."');");

// UPDATE
mysql_query("UPDATE client SET nom_client = '".$_GET["nom_client"]."' AND lien_client = '".$_GET["lien_client"]."' WHERE id_client = ".$_GET["id_client"].";");

// DELETE
mysql_query("DELETE FROM client WHERE id_client = ".$_GET["id_client"].";");*/
 
?>

l'affichage dans la grille se fait très bien ! maintenant, je m'attaque à mon fichier de modification de la base de données. j'aimerais savoir comment dire à mon fichier que je fais un update, insert ou delete ...
quel est le nom de la variable $_GET ?? dsl mais là j'ai épuisé toutes mes ressources .... >_<

[Edit 2010-10-13 13:41] j'ai à peut-prêt obtenu ce que je voulais, mais en utilisant une méthode totalement différente :

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
<?php
require_once 'jqGridPHP_3_8_0_1/tabs.php';
require_once 'jqGridPHP_3_8_0_1/jq-config.php';
// include the jqGrid Class
require_once ABSPATH."php/jqGrid.php";
// include the driver class
require_once ABSPATH."php/jqGridPdo.php";
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn->query("SET NAMES utf8");
 
// Create the jqGrid instance
$grid = new jqGridRender($conn);
 
$grid->SelectCommand = 'SELECT id_client, nom_client, lien_client FROM client';
$grid->table = 'client';
$grid->dataType = 'json';
 
$grid->setColModel();
$grid->setUrl('client.php');
$grid->setGridOptions(array(
    "rowNum" => 50,
    "rowList" => array(50,100,200),
    "sortname" => "id_client",
        "height" => 500
));
 
$grid->setColProperty('id_client', array("label" => "ID",
                                                                                "formoptions" => array("label" => "ID"),
                                                                                "editable" => false,
                                                                                "editrules" => array("required" => true)));
                                                                                
$grid->setColProperty('nom_client',array("label" => "Nom",
                                                                                "formoptions" => array("label" => "Nom", "elmsuffix" => "(obligatoire)"),
                                                                                "editrules" => array("required" => true)));
                                                                                
$grid->setColProperty('lien_client',array("label" => "Lien",
                                                                                "formatter" => "link",
                                                                                "formoptions" => array("label" => "Lien"),
                                                                                "formatoptions" => array("target" => "_blank"),
                                                                                "editrules" => array("required" => false)));
                                                                                
$grid->setColProperty('xxxx',array("label" => "Album photos",
                                                                                "formatter" => "link",
                                                                                "formoptions" => array("label" => "Album photos"),
                                                                                "editrules" => array("required" => false)));
 
// Rendre des colonnes invisibles
//$grid->setColProperty("nom_de_colonne", array("hidden" => true)); 
 
// Enable navigator
$grid->navigator = true;
// Enable only deleting
$grid->setNavOptions('navigator', array("excel" => false,"add" => true,"edit" => true,"del" => true,"view" => true, "search" => true));
// Enjoy
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
$conn = null;
?>

j'aimerais appeller une fonction javascript sur un colonne qui ne dépend pas de ma base de données. je m'explique j'aimerais appeller la fonction afficher_album_photos(id_client) qui prend donc en paramètre l'id du client.
comment faire ?

**Garra** · 30/10/2010, 21h30

Salut thor76160

je suis heureuse

de savoir que je ne suis pas la seule à galerer pour installer cette foutue gride.

j'ai tout essayé et comme toi, en tentant de commencer à zéro avec leur demos, installer les choses petit à petit, utiliser leur modèle de table mysql, EXACTEMENT leur exemple pour afficher un grid depuis PHP

et depuis deux jours je ne vois toujours pas ma gride

ça semble maudit ce truc

les données sont bien lues depuis la base des données mais impossible de voir une foutue ligne.

je ne comprends rien (et pourtant je code depuis de belles lourettes!!! donc je crois pas totalement bête pour comprendre un code

)

la version que tu utilises côté serveur me semble être payante; c'est peut-être pour cela que la version gratuite est si merdique à mettre en place

c'est à dire j'ai comme une impression qu'il ne nous disent pas tout....

si quelqu'un passe par là et peut nous aider à faire fonctionner cette chose qui a l'air très belle.... quand ça marche

merci à tous !

[Edit 22:14]

je suis de retour

car je n'avais pas vu ceci:

installation

je n'ai pas encore suivi la chose mais je ne tarderai pas

si quelqu'un a des conseils concernant tout ça c'est toujours bienvenue

bon dodo

**danielhagnoul** · 30/10/2010, 22h52

Bonsoir

Il y a une nouvelle version, jqGrid 3.8.1 du 2010-10-24 compatible avec jQuery 1.4.3 et qui corrige de nombreux bugs (idem pour jQuery 1.4.3 par rapport à 1.4.2). Mais je ne connais pas du tout ce plug-in.

**Garra** · 31/10/2010, 08h48

merci Daniel
après avoir suivi l'installation comme il faut ça a marché!!!

en fait je n'avais pas vu qu'il y avait cette explication

donc c'est de ma faute si j'ai galeré

merci pour l'info sur la nouvelle version de jquery je vais l'installer

plugin jqGrid, création difficile

jQuery

Discussions similaires

Partager

Partager