Bonjour,

Je voudrais utiliser le plugin JQuery JSGrid pour afficher un tableau et faire des modifications.

Voici le dépot Github du projet et la base dont je me suis servi. Mon tableau apparait vide et je ne sais pas si cela vient du PHP ou du JS :

<?php
switch($_SERVER["REQUEST_METHOD"]) {
    case "GET":
		try
		{

		    $bdd = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', '');
		}

		catch(Exception $e)
		{
		        die('Erreur : '.$e->getMessage());
		}

		$response = $bdd->query('SELECT * FROM testJsgrid');

		    $result = array();
		    foreach($response as $row) {
		        array_push($result, $row['nom']);
		        array_push($result, $row['prenom']);
		    }
		header("Content-Type: application/json");
		echo json_encode($result);
}
?>

Et le JS :

<div id="mTab"> </div>

<script>
    $("#mTab").jsGrid({
        width: "100%",
        height: "400px",

        inserting: true,
        editing: true,
        sorting: true,
        paging: true,

    autoload: true,

    controller: {
            loadData: function(filter) {
                return $.ajax({
                    type: "GET",
                    url: "./items.php",
                    data: filter
                });
            },
    },

        fields: [
            { name: "Name", type: "text", width: 150 },
            { name: "Surname", type: "test", width: 50 },
        ]
    });
</script>

Merci d'avance

bonjour,

pour que cela fonctionne, tu dois d'abord changer les noms de variables déclarès dans fields du plugin.

tu met fields : [{name:"Name"..},{name:"Surname"}], donc ton fichier php doit retourner une variable ayant le même nom ("Name" et "Surname") (identique, le plugin est sensible a la case.).

puis tu dois faire retourner un objet deferred.promise() dans loadData comme suite :

loadData: function() {
  var deferred = $.Deferred();
  $.ajax({url: "/js/jsgrid/estimates/index.php"
        ,dataType'json'
   })
  .done(function(d){
    deferred.resolve(d);
  });
   return deferred.promise();
}

j'ai cloné le git de jsgrid-php et j'ai trouvé la solution a ton problème.

tout d'abord commençons avec javascript :

1-les url des requêtes ajax sont faux, il ne faut pas commencer avec un slach "/", soit url:"countries/"  Ou url:"./countries/", la même chose pour "/clients/", soit "./clients/" ou "clients/"

2- le "name" des champs dans "fields" doit être exactement le même que celui du champ de la base de donnée, c'est a dire name:'name' et pas name:"Name".

passons a php :

1-tu déclare une fonction dans ClientRepository nommée getAll() avec un paramètre $filtre, par-contre tu ne lui passe aucun paramètres dans ajax, normalement elle doit retourner tous les clients tant qu'on a pas cliqué sur le select pour filtrer les données.

donc le code devient :

public function getAll() {

$sql = "SELECT * FROM clients";

$q = $this->db->prepare($sql);

$q->execute();

$rows = $q->fetchAll();

 $result= array();

foreach($rows as $row) {

    array_push($result, $this->read($row));

}

return $result;

}

et n'oubli pas d'instancier l'objet client dans clients/index.php sans paramètre :

$result = $clients->getAll(/*sans l'array ici sinon ça donne erreur*/);

et finalement modifier la fonction read($row) comme suite :

private function read($row) {

       /*attention $result est déjà utilisé pendant l’exécution, il faut mettre un nom de variable différent que                $result.*/

        $res = new Client();

        $res->id = $row["0"];

        $res->name = $row["1"];

        $res->age = $row["2"];

        $res->address = $row["3"];

        $res->married = $row["4"] == 1 ? true : false;

        $res->country_id = $row["5"];

        return $res;

    }

-
Edité par ToufikMarYouuL 17 novembre 2018 à 17:26:13