IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

plugin jqGrid, création difficile


Sujet :

jQuery

  1. #1
    Membre éclairé
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Décembre 2007
    Messages
    696
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : Décembre 2007
    Messages : 696
    Par défaut plugin jqGrid, création difficile
    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 ?

  2. #2
    Membre éclairé
    Profil pro
    Inscrit en
    Janvier 2006
    Messages
    821
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2006
    Messages : 821
    Par défaut
    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

  3. #3
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    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.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  4. #4
    Membre éclairé
    Profil pro
    Inscrit en
    Janvier 2006
    Messages
    821
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2006
    Messages : 821
    Par défaut
    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


Discussions similaires

  1. jqGrid création plugin : Sélection d'une icone
    Par Tiolebucheron dans le forum jQuery
    Réponses: 19
    Dernier message: 04/06/2012, 08h38
  2. plugin jqGrid, hauteur des lignes
    Par vixell dans le forum jQuery
    Réponses: 3
    Dernier message: 07/04/2010, 10h01
  3. Plugin de création de project web static
    Par bryo35 dans le forum Eclipse Platform
    Réponses: 1
    Dernier message: 04/03/2010, 14h26
  4. Réponses: 1
    Dernier message: 17/01/2010, 15h13

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo