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 :
le problème c'est qu'ils ne disent pas quels fichiers .js il faut importer
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 );
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 :
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
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>
malheureusement je n'arrive tjr pas à afficher la liste de mes clients, le fichier php génère pourtant un xml :
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; ?>
[Edit 20:54] dernière version de mes codes :<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>
client.php :
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
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_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
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; ?>
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 ...
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"].";");*/ ?>
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 :
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.
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; ?>
comment faire ?
Partager