Discussion :

[ginger4957]

Bonjour,

J'ai un souci avec le columnChooser de jqGrid. Pour vous expliquer, j'ai au départ une grid faite en js comme ceci :

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
 
// GRID CONSTRUCTION
$("#list_a_facturer").jqGrid({
	url:'php/mapage.php', // va chercher les donnees en php
       datatype: 'json', // recupere les donnees en json
       colNames:['','Id','Etat','Nom','Prénom','Raison Soc.','Add1','Add2','Cp','Ville'],
       colModel :[ 
	  {name:'persid', index:'persid', hidden:true},
	  {name:'id', index:'entr_id', align:'left', width:40, hidden:false}, 
          {name:'etat', index:'etat', align:'center', width:10, hidden:false}, 
          {name:'bim_nom', index:'nom', align:'left', width:50, hidden:false}, 
          {name:'prenom', index:'prenom', align:'left', width:50, hidden:false}, 
          {name:'raisonsoc', index:'raison_sociale', width:50, hidden:false},
          {name:'add1', index:'addr_1', width:50, hidden:false},
          {name:'add2', index:'addr_2', width:50, hidden:false},
          {name:'cp', index:'cp', width:40, hidden:false},
          {name:'ville', index:'ville', width:50, hidden:false}
       ],
    width: ($("#list_a_facturer_container").width()), /*//largeur de la div*/
    height: 'auto', /*//hauteur de la div*/
    pager:'#pager_list_a_facturer',
    hidegrid:false,
    shrinkToFit:true, /*//etirement de la grille*/
    sortname:'nom',
    sortorder: "desc",
    viewrecords:true, 
	rowNum:100, 
    rowList:[50,100,150], 
    caption: "Resultat de la recherche"
});
 
 
$("#list_a_facturer").jqGrid('navGrid','#pager_list_a_facturer',{edit:false,add:false,del:false, search:false}); 
 
 
// COLUMN CHOOSER
jQuery("#list_a_facturer").jqGrid('navButtonAdd','#pager_list_a_facturer',{
	caption: "",
	title: "Gérer les colonnes",
	onClickButton : function (){
		console.log('sdge');
		var a = jQuery("#list_a_facturer").gridComplete;
		jQuery("#list_a_facturer").jqGrid('columnChooser', {
            done:function (perm) {
                if (perm) {
                	jQuery("#list_a_facturer").setGridWidth(a); // modifie bien les colonnes affichées
                }
            }
        });
 
	}
});
 
var pos = $('#list_a_facturer').offset();
$('#list_a_facturer').setGridHeight($('body').height() - pos.top - 10 - $('#pager_list_a_facturer').height());

Cette grille est placée dans une div nommée "lists".

Je clique sur columnChooser, ça ouvre la popup avec les colonnes, je choisis mes colonnes, et valider. Jusque là pas de souci ça affiche bien les colonnes choisies.

Ensuite je récupère le code html brut de ce que m'affiche cette grid, que j'affiche plus tard dans ma page :

Code :

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

1
2
3
 
// recup est le code html recupéré, il renvoie et affiche bien le contenu souhaité :
document.getElementById('lists').innerHTML = recup;

Mon souci est : pourquoi le columnChooser fonctionne parfaitement lorsque j'affiche ma grid en js (voir premier code), et pas une fois que je l'ai affichée en code html (voir dernier code) ? cad. que quand je clique sur le columnchooser ca n'affiche plus ma popup...

Une idée ?

Cordialement
Ginger

[NoSmoking]

Bonjour,

Ensuite je récupère le code html brut de ce que m'affiche cette grid,...

certes, mais pas la gestion des événements associés.

[ginger4957]

Bonjour,

Merci de ta réponse. Ca veut dire qu'il faut juste que je récupère la partie js qui gère le columnChooser ?

:::EDIT:::

J'ai résolu la partie "afficher la div columnchooser", les explications :

(J'ai triché un peu pour réussir à afficher la div du columnchooser )

J'ai tout d'abord rajouté un id à mon bouton columnchooser :

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
 
// COLUMN CHOOSER
jQuery("#list_a_facturer").jqGrid('navButtonAdd','#pager_list_a_facturer',{
	caption: "",
	title: "Gérer les colonnes",
	id: "column-chooser", // rajout id
	onClickButton : function (){
		var a = jQuery("#list_a_facturer").gridComplete;
		jQuery("#list_a_facturer").jqGrid('columnChooser', {
            done:function (perm) {
                if (perm) {
                	jQuery("#list_a_facturer").setGridWidth(a);
                }
            }
        });
 
	}
});

Lors de la récupération de ma grille, j'ai pris le code en dur affiché dans firebug pour le mettre dans une variable, tout en lui rajoutant un id et en le mettant a display:none au lieu de block (je triche là) :

Code :

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

1
2
 
var columnChooser = '<div id="div_columnChooser" style="display: none; z-index: 1001; outline: 0px none; height: auto; width: 440px; top: 221px; left: 1057px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all  ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-1"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" unselectable="on" style="-moz-user-select: none;"><span class="ui-dialog-title" id="ui-dialog-title-1" unselectable="on" style="-moz-user-select: none;">Afficher/Masquer les colonnes</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button" unselectable="on" style="-moz-user-select: none;"><span class="ui-icon ui-icon-closethick" unselectable="on" style="-moz-user-select: none;">close</span></a></div><div style="position: relative; overflow: hidden; width: auto; min-height: 64px; height: auto;" class="ui-dialog-content ui-widget-content"><div style="width: 420px; margin: 0px auto; height: 240px;"><select multiple="multiple" style="width: 420px; height: 230px;"><option value="0"></option><option selected="selected" value="2">Id</option><option selected="selected" value="3">Etat</option><option selected="selected" value="4">Nom</option><option selected="selected" value="5">Prénom</option><option selected="selected" value="6">Raison Soc.</option><option selected="selected" value="9">Cp</option><option selected="selected" value="10">Ville</option></select></div></div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Valider</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Annuler</span></button></div></div>';

et ensuite lors de l'affichage en dur (code html) de ma grid, si je clique sur le btn columnchooser j'ai rajouté ceci en bas de ma page html :

Code :

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

1
2
3
4
 
$('#column-chooser').click(function(){
	$('#div_columnChooser').css('display', 'block');
});