Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème avec le plugin jqGrid de jQuery

    26 mai 2011 à 23:48:33

    Bonsoir !

    Je suis partagé entre le forum Js et le forum PHP, car je ne sais pas très bien d'où vient mon problème.. :colere2:

    J'essaye d'installer sur mon site web le plugin jqGrid de jQuery (http://trirand.com/blog/jqgrid/jqgrid.html), plus précisément, dans le site donner précédemment : Row Editing > Using Events.

    Le code se passe en trois temps : HTML, Js & PHP.

    Voici les codes en question :

    (x)HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    	<head>
    		<title>jqGrid</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    		<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.13.custom.css" />
    		<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />		
    	</head>
    	<body>
    		<p><h1>jqGrid</h1></p>
    		<table id="rowed3"></table> 
    		<div id="prowed3"></div> 
    		<br />
    		<script src="jquery.js" type="text/javascript"></script>
    		<script src="js/i18n/grid.locale-fr.js" type="text/javascript"></script>
    		<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
    		<script src="rowedex3.js" type="text/javascript"></script>
    	</body>
    </html>
    



    Javascript

    var lastsel; 
    jQuery("#rowed3").jqGrid({ 
    		url:'server.php?page=1&rows=10&sidx=id&sord=desc', 
    		datatype: "xml", 
    		mtype : 'GET',
    		colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
    		colModel:[ 
    				{name:'id',index:'id', width:55}, 
    				{name:'invdate',index:'invdate', width:90, editable:true}, 
    				{name:'name',index:'name', width:100,editable:true}, 
    				{name:'amount',index:'amount', width:80, align:"right",editable:true}, 
    				{name:'tax',index:'tax', width:80, align:"right",editable:true}, 
    				{name:'total',index:'total', width:80,align:"right",editable:true}, 
    				{name:'note',index:'note', width:150, sortable:false,editable:true} 
    		], 
    		rowNum:10, 
    		rowList:[10,20,30], 
    		pager: '#prowed3', 
    		sortname: 'id', 
    	viewrecords: true, 
    	sortorder: "desc", 
    		onSelectRow: function(id){ 
    				if(id && id!==lastsel){ 
    						jQuery('#rowed3').jqGrid('restoreRow',lastsel); 
    						jQuery('#rowed3').jqGrid('editRow',id,true); 
    						lastsel=id; 
    				} 
    		}, 
    		editurl: "server.php", 
    		caption: "Using events example" 
    }); 
    jQuery("#rowed3").jqGrid('navGrid',"#prowed3",{edit:false,add:false,del:false});
    



    PHP

    <?php
    // to the url parameter are added 4 parameters as described in colModel
    // we should get these parameters to construct the needed query
    // Since we specify in the options of the grid that we will use a GET method 
    // we should use the appropriate command to obtain the parameters. 
    // In our case this is $_GET. If we specify that we want to use post 
    // we should use $_POST. Maybe the better way is to use $_REQUEST, which
    // contain both the GET and POST variables. For more information refer to php documentation.
    // Get the requested page. By default grid sets this to 1. 
    $page = $_GET['page']; 
     
    // get how many rows we want to have into the grid - rowNum parameter in the grid 
    $limit = $_GET['rows']; 
     
    // get index row - i.e. user click to sort. At first time sortname parameter -
    // after that the index from colModel 
    $sidx = $_GET['sidx']; 
     
    // sorting order - at first time sortorder 
    $sord = $_GET['sord']; 
     
    // if we not pass at first time index use the first column for the index or what you want
    if(!$sidx) $sidx =1; 
    if(!$sidx) $sidx =1; 
    // connect to the database
    $dbhost = 'localhost'; // serveur
    $dbuser = 'root'; // nom d'utilisateur
    $dbpassword = ''; // mot de passe
    $database = 'jqgrid'; // base de données
    $db = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error());
    mysql_select_db($database) or die("Error conecting to db.");
    $result = mysql_query("SELECT COUNT(*) AS count FROM invheader a, clients b WHERE a.client_id=b.client_id"); 
    $row = mysql_fetch_array($result,MYSQL_ASSOC); 
    $count = $row['count']; 
    
    if( $count >0 ) { 
    		$total_pages = ceil($count/$limit); 
    } else { 
    		$total_pages = 0; 
    } 
    if ($page > $total_pages) $page=$total_pages; 
    $start = $limit*$page - $limit; // do not put $limit*($page - 1) 
    $SQL = "SELECT a.id, a.invdate, b.name, a.amount,a.tax,a.total,a.note FROM invheader a, clients b WHERE a.client_id=b.client_id ORDER BY $sidx $sord LIMIT $start , $limit"; 
    $result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error()); 
    
    $responce->page = $page; 
    $responce->total = $total_pages; 
    $responce->records = $count; 
    $i=0; 
    while($row = mysql_fetch_array($result,MYSQL_ASSOC)) { 
    	$responce->rows[$i]['id']=$row[id]; 
    	$responce->rows[$i]['cell']=array($row[id],$row[invdate],$row[name],$row[amount],$row[tax],$row[total],$row[note]); 
    	$i++; 
    } 
    echo json_encode($responce);
    ?>
    



    Voilà. Pas de problème au niveau du Grid, puisqu'il s'affiche correctement :

    Image utilisateur

    Bon, forcément la grille n'est pas vraiment remplie avec les données de ma base de données..

    Lorsque je test mon code PHP, la connexion roule comme sur des roulettes mais les variables page, rows, sidx et sord ressortent toutes la même erreur, à savoir Undefined index.

    Je n'ai pas très bien compris comment les données circulent entre le code Js et le PHP, je ne sais pas si le problème vient de l'un ou de l'autre (ou des deux :-° ).

    Alors voilà, si ça parle à quelqu'un, je suis preneur..

    Jigga!
    • Partager sur Facebook
    • Partager sur Twitter

    Problème avec le plugin jqGrid de jQuery

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
    • Editeur
    • Markdown