IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

JqGrid et traquer des events sur une subGrid [Plugin]


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre chevronné
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    396
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 396
    Par défaut 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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : 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
    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();
    		});
    	};
    });

  2. #2
    Membre extrêmement actif
    Avatar de Golgotha
    Homme Profil pro
    Full-stack Web Developer
    Inscrit en
    Août 2007
    Messages
    1 387
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Full-stack Web Developer
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2007
    Messages : 1 387
    Billets dans le blog
    1
    Par défaut
    Bonjour,

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

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $("#case_a_cocher").on("click", function(){
     
    });
    Consultant et développeur full-stack spécialiste du Web
    faq jQuery - règles du forum - faqs web

  3. #3
    Membre chevronné
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    396
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 396
    Par défaut
    Cela ne marche pas non plus : la base du problème est qu'il ne me trouve pas mon élément . 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.

  4. #4
    Membre chevronné
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    396
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 396
    Par défaut
    Bon, après avoir perdu ma journée là-dessus, je suis finalement tombé sur l'option onSelectRow de JqGrid. Ce qui donne :

    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
     
    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 !!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. SQLServer 2000: Liste des contraintes sur une colonne ?
    Par swirtel dans le forum MS SQL Server
    Réponses: 4
    Dernier message: 08/11/2005, 16h13
  2. Afficher des images sur une grille
    Par Coussati dans le forum Composants VCL
    Réponses: 3
    Dernier message: 27/10/2005, 09h27
  3. Obtenir des infos sur une page web en ligne
    Par Logan_Cale dans le forum Web & réseau
    Réponses: 1
    Dernier message: 20/08/2005, 15h36
  4. Comment avoir des information sur une BD?…
    Par kikimnet dans le forum Bases de données
    Réponses: 1
    Dernier message: 12/02/2005, 09h20
  5. Recupération des selections sur une DBGrille multi Selection
    Par Andry dans le forum Bases de données
    Réponses: 1
    Dernier message: 26/11/2004, 11h43

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo