[Plugin] JqGrid et traquer des events sur une subGrid

JqGrid et traquer des events sur une subGrid

Bonjour,

J'ai une table jqGrid qui contient des sous tables subGrid ; et dans certaines cellules de mes subGrid, j'ai des cases à cocher du type select.

Jusqu'ici, tout va bien. Mais je cherche à traquer l'événement click() à chaque fois que l'utilisateur clique sur une de mes cases à cocher. En gros, à placer un :

Code:

1
2
3
 
$('#case_a_cocher').click(function() {
});

quelquepart.

Cependant, vu que le tableau est dynamique, mes événements ne sont pas reconnus car non présents dès le chargement de la page (je n'arrive pas à attacher des événements plus loin que le $('#' . subgrid_id).

Au cas où ce ne soit pas super clair, voici où j'en suis et en commentaire ce que je souhaiterais ajouter :

Code:

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
76
77
78
79
80
81
82
83
84
85
$(function () {
 
	listDates = function(id) {
 
	    $('#listAgenda').jqGrid( {
	        url: '/query_manager.php?type=agendamanifestation&man_id=' + id,
	        datatype: "xml", 
	        colNames: ['Date'],
	        colModel: [
	            {name:'date', index:'datedebut', width:8, search:true, searchoptions:{dataInit:datePick, attr:{title:'Select Date'}} },
	        ],
	        rowNum:        10,
	        rowList:       [10, 20, 30],
	        pager:         $('#pager'),
	        gridview:      true,
			rownumbers:    true,
			ignoreCase:    true,
	        sortname:      'id',
	        viewrecords:   true,
	        sortorder:     'desc',
	        caption:       '',
	        height:        300,
	        toolbarFilter: true,
	        autowidth:     true,
	        subGrid:       true,
	        subGridRowExpanded: function(subgrid_id, row_id) {
	        	var subgrid_table_id, pager_id;
 
	        	subgrid_table_id = subgrid_id + "_t";
	        	pager_id = 'p_' + subgrid_table_id;
 
	        	$('#' + subgrid_id).html(
	        		"<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>"
	        	);
 
	        	jQuery('#' + subgrid_table_id).jqGrid( {
			        url: '/query_manager.php?type=agendamanifestationDate&man_id=' + id + '&datemanif='+row_id,
			        datatype: 'xml', 
			        colNames: ['Heure de début', 'Heure de fin', 'Annulé', 'Complet', 'Reporté', 'Date de report'],
			        colModel: [
 
			            {name: 'heuredebut',  index:'heuredebut',  width:1, search:false, editable:false },
			            {name: 'heurefin',    index:'heurefin',    width:1, search:false, editable:false },
			            {name: 'annule',      index:'annule',      width:1, search:false, editable:false },
			            {name: 'complet',     index:'complet',     width:1, search:false, editable:false },
			            {name: 'reporte',     index:'reporte',     width:1, search:false, editable:false },
			            {name: 'report_date', index:'report_date', width:1, search:false, editable:false },
 
			        ],
			        pager:         $('#'+pager_id),
			        gridview:      true,
					rownumbers:    true,
					ignoreCase:    true,
			        sortname:      'id',
			        viewrecords:   true,
			        sortorder:     "desc",
			        height:        "100%",
			        toolbarFilter: true,
			        autowidth:     true
			    });
 
	        	jQuery('#' + subgrid_table_id).jqGrid('navGrid', '#' + pager_id, {add:true, edit:false, del:false, search:false, refresh:false });
	        },
 
			subGridRowColapsed: function(subgrid_id, row_id) {}
	    })
	    .jqGrid('filterToolbar', {})
	    .jqGrid('navGrid', '#pager', {add:true, edit:false, del:false, search:false, refresh:false })
	    // -------------------------- ----------------------------------
	    // -------------------------- Ce que je souhaiterais faire ----------------------------------
	    // -------------------------- ----------------------------------
	    .jqGrid('navGrid', '#case_a_cocher', function (){
	    	alert('Working!')
	    });
	}
 
	datePick = function(el) {
		$(el).datepicker({
			dateFormat:'yy-mm-dd'
		})
		.change(function() {
			$('#listDates')[0].triggerToolbar();
		});
	};
});

Bonjour,

Je pense qu'il faut que tu utilise le .on pour cela.
Code:

1 2 3 $("#case_a_cocher").on("click", function(){ });

Cela ne marche pas non plus : la base du problème est qu'il ne me trouve pas mon élément

Code:

$('#case_a_cocher')

. Je pense qu'il n'est pas trouvé car il est construit dynamiquement lors de l'appel de la subGrid et non préchargé avec la page.

Bon, après avoir perdu ma journée là-dessus, je suis finalement tombé sur l'option onSelectRow de JqGrid. Ce qui donne :

Code:

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
 
jQuery('#' + subgrid_table_id).jqGrid( {
    url: '/query_manager.php?type=agendamanifestationDate&man_id=' + id + '&datemanif='+row_id,
    datatype: 'xml', 
    colNames: ['Heure de début', 'Heure de fin', 'Annulé', 'Complet', 'Reporté', 'Date de report'],
    colModel: [
 
        {name: 'heuredebut',  index:'heuredebut',  width:1, search:false, editable:false },
        {name: 'heurefin',    index:'heurefin',    width:1, search:false, editable:false },
        {name: 'annule',      index:'annule',      width:1, search:false, editable:false },
        {name: 'complet',     index:'complet',     width:1, search:false, editable:false },
        {name: 'reporte',     index:'reporte',     width:1, search:false, editable:false },
        {name: 'report_date', index:'report_date', width:1, search:false, editable:false },
 
    ],
    pager:         $('#'+pager_id),
    gridview:      true,
	rownumbers:    true,
	ignoreCase:    true,
    sortname:      'id',
    viewrecords:   true,
    sortorder:     "desc",
    height:        "100%",
    toolbarFilter: true,
    autowidth:     true,
    onSelectRow: function(ids) {
    	$('#case_a_cocher').click(function() {
    		alert('Enfin !!!');
    	});
    }
});

En dans ce code, le sélecteur marche enfin !!