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 ?