jqGrid - jointures, listes déroulantes

**manuzed78** · 23/05/2012, 10h23

Hello à tous
je découvre jQuery depuis peu et surtout le frameWork jqSuite.
Dans ce frameWork, ce qui m’intéresse le plus (dans un premier temps ) est la génération des tableaux avec jdGrid.

J'arrive à faire pas mal de choses sympa apres 2 jours de découvertes et de tests.

Sur une table unique, aucun soucis, mais j'ai fait pour mes tests 2 tables de référence OR pour modifier ou ajouter un nouvel item, je n'ai aucune idée de comment m'y prendre.
même remarque pour le champ date : j'y mets bien un date picker qui fonctionne mais la saisie n'est pas prise en compte ( ou plutot mauvais format donc il met 01-01-1970 toujours...)

comment puis je faire avec des jointures et des tables de référence ?
j'ai regardé les exemples de la suite mais je n'ai pas trouvé quelque chose qui s'en rapproche.
Quelqu'un a t il déja mis en place un tableau de ce genre ?

Merci d'avance

**SpaceFrog** · 23/05/2012, 10h32

a mon avis c'est plus server side que ça se passe non ???
Tu ne rédiges pas les requêtes en js si ?

Trouves la page de traitement coté serveur et modifies le code...

**manuzed78** · 23/05/2012, 10h40

En fait, pour l'affichage, tout est niquel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$grid->SelectCommand = 'SELECT mc.id, date, time, message, traite, t.nom, p.nom as Pertinence 
						FROM mc
						JOIN ref_type_mc t
							ON mc.id_type_mc=t.id
						JOIN ref_pertinence p
							ON mc.pertinence=p.id';

Ma requete est bonne donc le tableau à l'affichage est bon

par contre si j'insere une ligne, je voudrai pour selectionner le type de mc dans une liste déroulante qui tape dans ma table ref_type_mc et que dans ma table principale soit inséré l'id du type_mc bien sur.

Et c'est la ou je ne trouve pas d'exemple.

**SpaceFrog** · 23/05/2012, 10h43

Si je te suis bien tu veux retourner deux résultats de requete ?
Un pour le tableau, l'autre pour le select ?

**manuzed78** · 23/05/2012, 11h39

Envoyé par SpaceFrog

Si je te suis bien tu veux retourner deux résultats de requete ?
Un pour le tableau, l'autre pour le select ?

euh.... non pas du tout

Je vais essayer d'etre plus precis,
voici l'exemple que j'ai mis en place : grid.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
$grid->SelectCommand = 'SELECT mc.id, date, time, message, traite, t.nom  as "Type MC", p.nom as Pertinence 
						FROM mc
						JOIN ref_type_mc t
							ON mc.id_type_mc=t.id
						JOIN ref_pertinence p
							ON mc.pertinence=p.id';
// set the ouput format to json
$grid->dataType = 'json';
// Set the table to where we add the data
$grid->table = 'mc';
// We tell that the primary key is not serial, which should be inserted by the user
//$grid->serialKey = false;
$grid->setPrimaryKeyId('id');
// Let the grid create the model
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl('grid.php');
$grid->setGridOptions(array(
    "caption"=>"Main Courante PC Crise",  // mauvais affichage dans le include
    "rownumbers"=>true,                   // affiche numéros de ligne
	"rowNum"=>10,                         // Nombre de lignes par défaut
	"width"=>'auto',
	"height"=>'auto',
    "sortname"=>"id",                     // Classement par défaut
	"sortorder"=>"desc",
    "hoverrows"=>true,                    // highlight la ligne survolée
	"altRows"=>false,                     // couleur differente 1 ligne/2
	"multiselect"=>true,                  // affiche cases à cocher
	"ignoreCase"=>true,                   //ignores capitlization when sorting
	"scrollrows"=>true,                   // ?
	//"toppager"=>true,                   // retrouver le paginator en haut
    "rowList"=>array(1,10,20,50,100)
 ));
// ici quelques selColProperty que je passe
// Enable navigator
$grid->navigator = true;
$grid->setNavOptions('navigator', array("pdf"=>true,"csv"=>true,"excel"=>false,"add"=>true,"edit"=>true,"del"=>true,"view"=>true, "search"=>true));
$grid->setNavOptions('add',array(	"addCaption"=>"Ajouter une MC",
									"closeAfterAdd"=>true,
									"reloadAfterSubmit"=>true));
$grid->setNavOptions('edit',array(	 "editCaption"=>"Mise à Jour",
									"closeAfterEdit"=>true,
									"reloadAfterSubmit"=>true));
 
//$grid->setNavOptions('edit',array("closeAfterEdit"=>true,"editCaption"=>"Update Customer","bSubmit"=>"Update"));
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
$connection = null;

Voici la table que j'ai crée pour avec 2 tables de référence (j'aurai peut etre mieux fait de commencer par une

)

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
-- Structure de la table `mc`
--
 
CREATE TABLE IF NOT EXISTS `mc` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `date` date NOT NULL,
  `time` time NOT NULL,
  `message` text NOT NULL,
  `pertinence` int(11) NOT NULL,
  `traite` int(11) NOT NULL,
  `id_type_mc` smallint(6) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ;
 
-- --------------------------------------------------------
 
--
-- Structure de la table `ref_pertinence`
--
 
CREATE TABLE IF NOT EXISTS `ref_pertinence` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nom` varchar(30) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
 
-- --------------------------------------------------------
 
--
-- Structure de la table `ref_type_mc`
--
 
CREATE TABLE IF NOT EXISTS `ref_type_mc` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nom` varchar(30) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

Par exemple, si je rentre un item dans la table mc avec un id_type_mc à 1
dans mon tableau jqGrid j'affiche bien le nom correspondant dans ma table de référence `ref_type_mc`. Pour l'affichage donc, pas de soucis, la colonne Type MC m'affiche bien les noms de la table de référence.
par contre, si je veux rentrer un nouvel item, dans le formulaire, il y a bien un champ Type MC mais comment proposer dans ce formulaire une liste déroulante avec en proposant ma table de référence ref_type_mc ?
Car actuellement, je ne peux pas rentrer de nouvel item dans ma table car soit j'y mets un id ( "1" par exemple) soit je saisis un nom contenu dans ma table de référence mais aucun ne fonctionne et mon champ est vide ( donc à 0 dans ma table "mc"

en espérant avoir été clair

**manuzed78** · 23/05/2012, 12h17

Pour résoudre mon probleme de modification / ajout j'ai aussi pensé à mettre en place le tableau de type "input" ici meme dans la demo :
http://www.trirand.com/blog/jqgrid/jqgrid.html dans Row Editing (new) => input types

On voit bien par exemple que l'on peut y mettre des cases à cocher transformées à l'affichage en oui/non ( qui correspond dans la bdd à 0/1 ? )
mais aussi une liste déroulante

Mais je n'arrive pas à le trouver dans jqSuite/examples ! et le code donné sur les démos est le code généré et pas celui contenu dans grid.php ...

**manuzed78** · 24/05/2012, 11h30

J'ai avancé, mais c'est pas encore gagné :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
// liste déroulante
$grid->setSelect("Type MC","SELECT id, nom FROM ref_type_mc ", false, true, true,array(""=>"All"));

Grace à setSelect on crée bien la liste déroulante qui tape dans ma table de référence

Cette liste déroulante apparait donc dans le formulaire pour ajouter et modifier.

Par contre il y a 2 problemes :

-dans le tableau jqGrid, la filtre affiche bien la liste déroulante mais ne filtre jamais : tous les items apparaissent meme si je n'en selectionne que un.
- pour les formulaires, la liste apparait bien mais l'insertion édition ne fonctionne pas car dans ma table principale, n'apparait pas le nom du type de mc mais un id_type_mc bien sur, l'interet des tables de référence.
Comment faire pour insérer l'id dans la table principale ?

**manuzed78** · 31/05/2012, 13h05

J'ai mis sur mon site perso un package de 10 MO contenant tout ce qu'il faut pour lancer mon test

C'est ici http://manu_jdr.servhome.org
il y a une section "liens utiles" sur cette page et le premier lien permet de télécharger le package

attention, il y a 10 MO

car il y a tout le framework jqGrid pour que cela fonctionne!
une fois décompressé, il ne devrait manquer que 2 choses : paramétrer config_jq.php

et dans le zip, j'ai oublié de mettre un fichier sql :
ceci devrait suffire :

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
--
-- Structure de la table `mc`
--
 
CREATE TABLE IF NOT EXISTS `mc` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`date` date NOT NULL,
`time` time NOT NULL,
`message` text NOT NULL,
`pertinence` int(11) NOT NULL,
`traite` int(11) NOT NULL,
`id_type_mc` smallint(6) NOT NULL,
`id_dossier` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;
 
--
-- Contenu de la table `mc`
--
 
INSERT INTO `mc` (`id`, `date`, `time`, `message`, `pertinence`, `traite`, `id_type_mc`, `id_dossier`) VALUES
(1, '2012-05-18', '00:00:00', 'Test affichage mc ', 1, 0, 2, 1),
(2, '1970-01-01', '00:00:00', 'Hello manu MC 21111111', 1, 1, 2, 1),
(3, '1970-01-01', '00:00:00', 'Test ceci est un test  jkljkljkljkljkjl  de modification???!\r\n    Test ceci est un test jkljkljkljkljkjl de modification???!\r\n    Test ceci est un test jkljkljkljkljkjl de modification???!\r\n    Test ceci est un test jkljkljkljkljkjl de modification???!    Test ceci est un test jkljkljkljkljkjl de modification???!\r\neefza gtfrze gre gfgsdf gsdf gsdf', 2, 1, 2, 1),
(5, '1970-01-01', '00:00:00', 'hello', 1, 1, 1, 1),
(6, '1970-01-01', '00:00:00', 'hjfkazhjkf dzhajk fd', 1, 0, 1, 1),
(7, '1970-01-01', '00:00:00', '', 1, 0, 3, 0),
(8, '1970-01-01', '00:00:00', '', 1, 0, 3, 0),
(9, '2012-05-17', '00:00:00', 'Hello', 1, 1, 3, 0),
(10, '2012-05-23', '00:00:00', 'testtttttttt', 1, 1, 3, 0),
(11, '2012-05-23', '00:00:00', 'Hello false', 1, 1, 3, 0),
(12, '0000-00-00', '00:00:00', '', 1, 0, 3, 0);
 
-- --------------------------------------------------------
 
--
-- Structure de la table `ref_pertinence`
--
 
CREATE TABLE IF NOT EXISTS `ref_pertinence` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nom` varchar(30) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
 
--
-- Contenu de la table `ref_pertinence`
--
 
INSERT INTO `ref_pertinence` (`id`, `nom`) VALUES
(1, 'Sans Objet'),
(2, 'Inexploitable'),
(3, 'Exploitable'),
(4, 'Pertinent ');
 
-- --------------------------------------------------------
 
--
-- Structure de la table `ref_type_mc`
--
 
CREATE TABLE IF NOT EXISTS `ref_type_mc` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nom` varchar(30) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;
 
--
-- Contenu de la table `ref_type_mc`
--
 
INSERT INTO `ref_type_mc` (`id`, `nom`) VALUES
(1, 'Test référence 1'),
(2, 'Test référence 2'),
(3, 'Test référence 3');

**manuzed78** · 07/06/2012, 15h33

Pour les listes déroulantes, une bonne partie du probleme est résolue :
Dans la requete, ne pas faire de jointure et donc ne prendre que l'ID :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$grid->SelectCommand = "SELECT mc.id, date, time as heure, message,id_pertinence as Pertinence, id_traite as Traite, id_type_mc as Type, id_dossier as Dossier
						FROM mc";

Ps: Par rapport à mon precedent post, j'ai change traite en id_traite ainsi que pertinence en id_pertinence pour avoir des tables de référence.
Ensuite, precisez que tel element fait l'objet d'une liste déroulante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
// liste déroulante
$grid->setSelect("Type","SELECT id, nom FROM ref_type_mc ", true, //  This allows you to not write SQL JOIN command to associate the key
																true, // afficher dans le formulaire de modification  
																true, // liste déroulante dans la barre de recherches
																array(""=>"Tous") // ajoute à la liste déroulante la valeur

Et la 80% du probleme est OK : dans le tableau jqGrid, on peut selectionner les items avec la liste déroulante !

Par contre, je reste avec un probleme de taille :
pour ajouter un item : l'ajout se fait mais partout ou il y a une liste déroulante, il n'y a aucun ajout ( le champ est vide dans la BDD quelque soit le choix effectué)
Pour l'edition, impossible de changer un champ faisant l'objet d'une liste déroulante alors que les autres champs sont affectés.

Si quelqu'un a une idée, je sèche pour l'instant

**manuzed78** · 11/06/2012, 13h22

Je n'ai pas encore trouvé la solution ultime mais la cause :
sans alias dans la requete, cela fonctionne tres bien

Si quelqu'un sait comment le faire fonctionner avec un alias ...
Au pire s'il n'y a pas de solution avec des alias, je nommerai mieux mon champ directement. Même si j'aime nommer mes champs id_quelque_chose quand cela fait appel à une table de référence...

jqGrid - jointures, listes déroulantes

jQuery

Discussions similaires

Partager

Partager