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 création plugin : Sélection d'une icone


Sujet :

jQuery

  1. #1
    Membre confirmé
    Inscrit en
    Juin 2004
    Messages
    151
    Détails du profil
    Informations forums :
    Inscription : Juin 2004
    Messages : 151
    Par défaut jqGrid création plugin : Sélection d'une icone
    Bonjour

    Je cherche à mettre en place au moment de l'édition un plugin de ce type colorpicker mais dont l’objectif est beaucoup plus modeste.
    Au moment de l'édition, je veux faire apparaître la fenêtre en dessous de la cellule sélectionnée avec un template tout simple (un tableau de div avec des image).

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="style"><div class="row"><span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/1.png"  alt="" onclick="alert(\'coucou\');" height="20" width="20" /></span><span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/2.png" height="20" width="20" /></span><span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/3.png" height="20" width="20" /></span></div><div class="row"><span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/4.png" height="20" width="20" /></span> <span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/5.png" height="20" width="20" /></span><span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/6.png" height="20" width="20" /></span> </div></div>
    Avez-vous déjà vu ce type de code? Par quoi commencer? Quel sont vos conseils?
    Merci de votre aide Tio

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 660
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 660
    Billets dans le blog
    1
    Par défaut
    heu elle est a quelle niveau la question ?

    colle une classe sur ta balise img et fait

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(".colorpick").click( function(){ //lancement du colorpicker })
    ou avec un plugin
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(".colorpick").colorpicker({ options ...})
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre confirmé
    Inscrit en
    Juin 2004
    Messages
    151
    Détails du profil
    Informations forums :
    Inscription : Juin 2004
    Messages : 151
    Par défaut
    Bah je ne sais pas trop par quoi commencer. Si je dois partir de zéro ou non.
    Je veux afficher un tableau d'image et au click affecter une valeur à la
    à la cellule.

    Si je comprends bien ce que tu me dis, Je peux exploiter le plugin "colorpicked" en lui faisant afficher autre chose?
    Mais là, je suis un peu perdu. Je ne comprend pas trop, Je connait très peu jquery.

    Merci pour votre aide Tio

    Edit: Ou autre solution que je viens de percevoir, faut-il que je fasse un formatter personnalisé?

    Tio

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 660
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 660
    Billets dans le blog
    1
    Par défaut
    je n'ai pas bien saisi l'ergonomie souhaitée
    tableau d'images ??

    tu n'aurais pas un screen ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre confirmé
    Inscrit en
    Juin 2004
    Messages
    151
    Détails du profil
    Informations forums :
    Inscription : Juin 2004
    Messages : 151
    Par défaut


    J'ai essayé avec les fonctions paramétrage "edittype:'custom', editoptions:{custom_element: myelem, custom_value:myvalue "

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
        function styleEdit (val, op) {
            var tpl = '<div id="style"><div class="row"><span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/1.png"  alt="onclick="alert(\'coucou\');" height="20" width="20" /></span><span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/2.png" height="20" width="20" /></span><span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/3.png" height="20" width"20" /></span></div><div class="row"><span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/4.png" height="20" width"20" /></span><span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/5.png" height="20" width"20" /></span><span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/6.png" height="20" width"20" /></span></div><div class="row"><span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/7.png" height="20" width"20" /></span><span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/8.png" height="20" width"20" /></span><span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/9.png" height="20" width"20" /></span></div></div>'
            return $(tpl);
        };
        function styleValue (elm,p,v) {
            return '1212';
        };
     
     
    {name:"style",index:"style",width:80, editable:true, edittype: 'custom',
    			editoption:{custom_element: styleEdit, custom_value: styleValue
    			}
    		},
    J'ai une erreur (msgbox jquery) Erreur e1.

    Merci pour le suivi.
    Tio

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 660
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 660
    Billets dans le blog
    1
    Par défaut
    ne grillons pas les étapes ...

    si je comprends bein tu veux au click sur les icones en fin de ligne lancer une action ... ???

    laquelle?
    cette action doit prendre des paramètres de la ligne ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  7. #7
    Membre confirmé
    Inscrit en
    Juin 2004
    Messages
    151
    Détails du profil
    Informations forums :
    Inscription : Juin 2004
    Messages : 151
    Par défaut
    ok

    Chaque image va correspondre à une valeur de type text
    • Image 1 => "SYMBOL 'downwarddiagonalfill' SIZE 3"
    • Image 2 => "SYMBOL 'rectangle' SIZE 2"
    • etc....


    Je souhaite sauvegarder ou actualiser la valeur dans la base de données en stockant cette valeur text.

    Au clic sur l'image, je dois actualiser le contenu de la cellule.

    Cette action ne prend pas en compte d'autre valeur du grid. L’optimum sera d’identifier par exemple par un rectangle rouge l'image sélectionnée ou celle qui représentait le contenu de la base de données.

    Tio

  8. #8
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 660
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 660
    Billets dans le blog
    1
    Par défaut
    avec ou sans rechargement de page ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  9. #9
    Membre confirmé
    Inscrit en
    Juin 2004
    Messages
    151
    Détails du profil
    Informations forums :
    Inscription : Juin 2004
    Messages : 151
    Par défaut
    sans rechargement de la page.

  10. #10
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 660
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 660
    Billets dans le blog
    1
    Par défaut
    tu as besoins de l'apparition d'une fenetre de saisie lors du click ou le click doit il juste envoyer au serveur les données de la ligne ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  11. #11
    Membre confirmé
    Inscrit en
    Juin 2004
    Messages
    151
    Détails du profil
    Informations forums :
    Inscription : Juin 2004
    Messages : 151
    Par défaut
    Il n'y a pas de fenêtre de saisie.

    Le click est juste pour changer la valeur de la cellule en cours d'édition.

    La sauvegarde dans la base de données, (envoi vers serveur??) se fait en cliquant sur le bouton S qui est en fin de ligne (appel ajax qui lance script php avec en post les valeurs de chaque colonne de la ligne sélectionnée).

    Tio

  12. #12
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 660
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 660
    Billets dans le blog
    1
    Par défaut
    un petit exemple de manipulation des selecteur pour un bouton en fin de ligne

    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
    <html>
    <head>
    <script type='text/javascript' src='http://code.jquery.com/jquery.js'></script>
     
    <script type="text/javascript">
     
     
    $(function(){
     
    $('.action').click( function() {
       	data=[]
    //	alert(   $(this).parents('tr:eq(0)').html())
    	$(this).parents('tr:eq(0)').find('td:lt(4)').each(function(){
    	 data.push($(this).html())
    	 })
    	alert(data)
            // ici on peut lancer un ajax ..
    	})
     
    })
     
     
    </script>
     
     
    </head>
    <body>
    <table>
    	<tr>
    		<td>a cellule 1</td>
    		<td>a cellule 2</td>
    		<td>a cellule 3</td>
    		<td>a cellule 4</td>
    		<td>a cellule 5</td>
    		<td><span class="action">S</action></td>
    	</tr>
    	<tr>
    		<td>b cellule 1</td>
    		<td>b cellule 2</td>
    		<td>b cellule 3</td>
    		<td>b cellule 4</td>
    		<td>b cellule 5</td>
    		<td><span class="action">S</action></td>
    	</tr>
     
    </table>
    </body>
    </html>
    ici sur le click du span je recupère le contenu de chaque td de la ligne contenant le span clické
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  13. #13
    Membre confirmé
    Inscrit en
    Juin 2004
    Messages
    151
    Détails du profil
    Informations forums :
    Inscription : Juin 2004
    Messages : 151
    Par défaut
    Je vois.

    pour le bouton en fin de ligne c'est fait.
    pour l’évènement clic, sur l'image je vois. Je comptais sauvegarder la valeur text désirer dans la balise "alt" que je pourrait récupérer comme le script que tu viens d'envoyer pour la balise span.

    Il manque le dernier problème est l'affichage personnalisé de la cellule en mode édition.

    Merci pour le suivi. Tio

  14. #14
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 660
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 660
    Billets dans le blog
    1
    Par défaut
    Il manque le dernier problème est l'affichage personnalisé de la cellule en mode édition.
    Désolé je suis dur de la comprenette aujourd'hui (manque de sommeil)

    Tu veux modifier le style de la ligne / cellule lorsque la ligne est en mode édition ???

    Passe par un boolean stocké en .data() du bouton ou du tr ...
    et modifies un className avec addClass() removeClass() ou toggleClass()
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  15. #15
    Membre confirmé
    Inscrit en
    Juin 2004
    Messages
    151
    Détails du profil
    Informations forums :
    Inscription : Juin 2004
    Messages : 151
    Par défaut
    la modification de la cellule est simplement d'afficher les "tableaux d'image dans la cellule"

    La fonction que j'ai appelé StyleEdit n'a rien avoir avec le css. Le champ de la base de données est "style"/.

    Il faut que je modifie le contenu HTMl de la cellule.

    Merci pour le suivi Tio

  16. #16
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 660
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 660
    Billets dans le blog
    1
    Par défaut
    il est ou ou il veint d'ou le tableau d'images ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  17. #17
    Membre confirmé
    Inscrit en
    Juin 2004
    Messages
    151
    Détails du profil
    Informations forums :
    Inscription : Juin 2004
    Messages : 151
    Par défaut
    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
     var tpl = '<div id="style">
    <div class="row">
    <span class="cell">
    <img src="js/mfbase/jquery/plugin/colorpicker/images/1.png"  alt="onclick="alert(\'coucou\');" height="20" width="20" /></span>
    <span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/2.png" height="20" width="20" /></span>
    <span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/3.png" height="20" width"20" /></span>
    </div>
    <div class="row">
    <span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/4.png" height="20" width"20" /></span>
    <span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/5.png" height="20" width"20" /></span>
    <span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/6.png" height="20" width"20" /></span></div>
    <div class="row">
    <span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/7.png" height="20" width"20" /></span>
    <span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/8.png" height="20" width"20" /></span>
    <span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/9.png" height="20" width"20" /></span></div>
    </div>'
    C'est un tableau que je code moi meme!!
    Dans l'image du post précédent (avec le screen), c'est le carré blanc avec les 1 2 3 4 5 6 7 8 9.

    Tio


    Avec ce code, le "tableau d'image s'affiche.
    Je continue de chercher.

    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
     function styleEdit (val, op) {
            var tpl = '<div id="style"><div class="row">
    <span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/1.png"  alt="" onclick="alert(\'coucou\');" height="20" width="20" /></span>
    <span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/2.png" height="20" width="20" /></span>
    <span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/3.png" height="20" width"20" /></span>
    </div>
    <div class="row">
    <span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/4.png" height="20" width"20" /></span>
    <span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/5.png" height="20" width"20" /></span>
    <span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/6.png" height="20" width"20" /></span>
    </div>
    <div class="row">
    <span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/7.png" height="20" width"20" /></span>
    <span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/8.png" height="20" width"20" /></span>
    <span class="cell"><img src="js/mfbase/jquery/plugin/colorpicker/images/9.png" height="20" width"20" /></span></div></div>'
            return tpl;
        };
        function styleValue (elm) {
            return '1212';
        };
     
    {name:"style",index:"style",width:80, editable:true, edittype: 'custom',
    			editoptions:{custom_element: styleEdit, custom_value: styleValue}
    Problème de l’évènement clic résolut. Au suivant.....

  18. #18
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 660
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 660
    Billets dans le blog
    1
    Par défaut
    js n'accepte pas les retours lignes comme ça ...

    c'est le même tableau pour tous ?

    Aller je me lance...
    un truc comme ça ?
    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
    <html>
    <head>
    <script type='text/javascript' src='http://code.jquery.com/jquery.js'></script>
    <script type="text/javascript">
     
    $(function(){
     
    cont=$("<div/>").attr('id','style').css({'z-index':100,'position':'absolute','display':'none'})
    row=$('<div/>').addClass('row')
     
    i=1;
     
    for (j=1;j<4;j++){
    	newrow=row.clone()
    	for(k=0;k<3;k++){
    		newrow.append($('<img />')
                          .attr('src','js/mfbase/jquery/plugin/colorpicker/images/'+i*j+'.png')
                          .css({'height':'20px','width':'20px'}) )
    	}
    	i++;
    	cont.append(newrow)
    	}
    	$('body').append(cont)
     
     
     
    $('.action').click( function() {
       	$("#style").css({'top':$(this).offset().top,'left':$(this).offset().left}).fadeIn('slow')
    	})
     
    })
     
     
    </script>
     
     
    </head>
    <body>
     
    <table>
    	<tr>
    		<td>a cellule 1</td>
    		<td>a cellule 2</td>
    		<td>a cellule 3</td>
    		<td>a cellule 4</td>
    		<td>a cellule 5</td>
    		<td><span class="action">S</action></td>
    	</tr>
    	<tr>
    		<td>b cellule 1</td>
    		<td>b cellule 2</td>
    		<td>b cellule 3</td>
    		<td>b cellule 4</td>
    		<td>b cellule 5</td>
    		<td><span class="action">S</action></td>
    	</tr>
     
    </table>
    </body>
    </tml>
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  19. #19
    Membre confirmé
    Inscrit en
    Juin 2004
    Messages
    151
    Détails du profil
    Informations forums :
    Inscription : Juin 2004
    Messages : 151
    Par défaut
    J'ai modifier au mieux les retours à la ligne

    J'ai regarde le code et je reviens te dire cela.

    Merci

    Re:
    Une petit modification dans le compteur pour le numéro de l'image.
    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
    			editoptions:{custom_element: 
    				function () {
    					cont=$("<div/>").attr('id','style').css({'z-index':100,'position':'absolute'})
    					row=$('<div/>').addClass('row')
    					i=1;
    					for (j=1;j<4;j++){
    						newrow=row.clone()
    						for(k=0;k<3;k++){
    							newrow.append($('<img />')
    							.attr('src','js/mfbase/jquery/plugin/colorpicker/images/'+i+'.png')
    							.css({'height':'20px','width':'20px'}) )
    							i++;
    						}			
    						cont.append(newrow)
    					}	
    					return cont;
    				},
    				custom_value: styleValue
    			}
    		}
    J'ai essayé d’adapter ton code pour l’évènement clic. il faut que l’évènement se fasse sur l'image.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    $('.action').click( function() {
       	alert("coucou");
    })
     
    newrow.append($('<span class="action" />') 
    avant le 
    newrow.append($('<img />');
    La balise <span> n'englobe pas la la balise <img>. De plus, si je suis ton model, la balise de fermeture devra être </action>.

    Suis-Je assez clair!!!

    Merci du suivi Tio

    Parfois la vie est si simple
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    newrow.append($('<img />')
    .attr('onclick','alert("coucoud");')			.attr('src','js/mfbase/jquery/plugin/colorpicker/images/'+i+'.png')
    .css({'height':'20px','width':'20px'}) )
    Je continu, Merci pour le suivi Tio

  20. #20
    Membre confirmé
    Inscrit en
    Juin 2004
    Messages
    151
    Détails du profil
    Informations forums :
    Inscription : Juin 2004
    Messages : 151
    Par défaut
    Bonjour

    J'avance dans le problème.
    Depuis que j'ai intégré le "tableau d'image", j'ai l'erreur suivante au niveau de l'enregistrement de la ligne (depuis le bouton save).
    Uncaught TypeError: Illegal invocation jquery-1.7.1.min.js:4

    Merci pour le suis Tio
    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
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    $("#list_layer").jqGrid({
    	height: 100,
    	url:'./service/admin.php?&requete=select&table=admin_layer',
    	editurl: "./service/admin.php?&requete=update&table=admin_layer",
    	autowidth: true,
    	mtype: 'GET',
    	datatype: "json",
    	colNames:['id_layer','id_grouplayers','id_server','soustitre','name','label','type','style','color','Actions'],
    	colModel: [
    		{name:"id_layer",index:"id_layer",width:80},
    		{name:"id_grouplayers",index:"id_grouplayers",width:80,editable:true, edittype:"select", 
    			editoptions:{
    				style:"width:100%",
    				dataUrl: './service/admin.php?requete=selectoption&table=admin_grouplayers&champ=titre',
    				buildSelect: function (data){
    					return data;
    				}
    			}
    		},
    		{name:"id_server",index:"id_server",width:80,editable:true, edittype:"select", 
    			editoptions:{
    				style:"width:100%",
    				dataUrl: './service/admin.php?requete=selectoption&table=admin_server&champ=owner',
    				dataEvents: [
    					{ 	type: 'change',
    						fn: function(e) {
    							var objServer = this;
    							jQuery.ajax({
    								url: './service/admin.php?requete=GetCapabilities&table=admin_server&id_server='+jQuery(this).val(),
    								async:false,
    								success: function(data) {
    								var objName = jQuery(objServer).parent('td').next().next().find('select');
    								jQuery(objName).empty();
    								jQuery(objName).append(data);
    								}
    							});
    						}
    					}
    				]
    			}
    		},
    		{name:"soustitre",index:"soustitre",width:80, editable:true},
    		{name:"name",index:"name",width:80, editable:true, edittype:"select", 
    			editoptions:{
    				style:"width:100%",
    				dataUrl: './service/admin.php?requete=selectoption&table=admin_server&champ=vide',
    				dataEvents: [
    					{ 	type: 'change',
    						fn: function(e) {
    							var objServer = this;
    							jQuery.ajax({
    								url: './service/admin.php?requete=DescribeFeatureType&table=admin_server&id_server='+jQuery(this).parent('td').prev().prev().find('select').val()+'&name='+jQuery(this).val(),
    								async:false,
    								success: function(data) {
    								var objName = jQuery(objServer).parent('td').next().find('select');
    								jQuery(objName).empty();
    								jQuery(objName).append(data);
    								}
    							});
    						}
    					}
    				]
    			}
    		},
    		{name:"label",index:"label",width:80, editable:true, edittype:"select", 
    			editoptions:{
    				style:"width:100%",
    				dataUrl: './service/admin.php?requete=selectoption&table=admin_server&champ=vide'
    			} 
    		},
    		{name:"type",index:"type",width:80, editable:true, edittype:"select", editoptions:{value:":;POLYGON:POLYGON",style:"width:100%"}},
    		{name:"style",index:"style",width:80, editable:true, edittype: 'custom',
    			editoptions:{custom_element: 
    				function (v,e) {					
    					var cont=$("<div/>").attr('id','style').css({'z-index':100,'position':'absolute'})
    					var row=$('<div/>').addClass('row')
    					i=1;
    					for (j=1;j<4;j++){
    						var newrow=row.clone()
    						for(k=0;k<3;k++){
    							newrow.append($('<img />')
    							.attr('onclick','alert("image'+i+'_'+e.id+'");')
    							.attr('src','js/mfbase/jquery/plugin/colorpicker/images/'+i+'.png')
    							.css({'height':'20px','width':'20px'}) )
    							i++;
    						}			
    						cont.append(newrow)
    					}
    					return cont;
    				},
    				custom_value: function (e){return e;}
    			}
    		},
    		{name:'color',index:'color', editable: true, edittype: 'text', width:80, 
    			editoptions:{
    				dataInit: function(e) {
    					jQuery(e).ColorPicker({
    						onShow: function (colpkr) {
    							jQuery(colpkr).fadeIn(500);
    							return false;
    						},	
    						onHide: function (colpkr) {
    							jQuery(colpkr).fadeOut(500);
    							return false;
    						},
    						onSubmit: function(hsb, hex, rgb, el) {
    							jQuery(el).val(rgb.b+' '+rgb.g+' '+rgb.r);
    							jQuery(el).ColorPickerHide();
    						},
    						onBeforeShow: function () {
    							jQuery(this).ColorPickerSetColor(this.value);
    						}
    					});
    				}
    			}
    		},
    		{name:'act',index:'act', width:125},
    	],
       	rowNum:5,
       	rowList:[5,10,20],
       	pager: '#pager_layer',
       	sortname: 'id_layer',
        viewrecords: true,
        sortorder: "asc",
    	caption:"Controle des couches : Liste des couches",
    	gridComplete: function(){
    		var ids = jQuery("#list_layer").jqGrid('getDataIDs');
    		for(var i=0;i < ids.length;i++){
    			var cl = ids[i];
    			be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#list_layer').editRow('"+cl+"');\"  />"; 
    			se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#list_layer').saveRow('"+cl+"');\"  />"; 
    			ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#list_layer').restoreRow('"+cl+"');\" />"; 
    			jQuery("#list_layer").jqGrid('setRowData',ids[i],{act:be+se+ce});
    		}
    	},
    })
    jQuery("#list_layer").jqGrid('gridResize',{}); 
    $("#list_layer").navGrid('#pager_layer',{search:false,add:false,edit:false,del:false});
    jQuery('#btnAjoutLayer').click( function () {
    	jQuery('#list_layer').addRowData(-1, {}, 'first', 0);
    	jQuery('#list_layer').editRow(-1);
    });
    Solution:

    Le problème était dû au retour de l'information du custom_value
    custom_value: function (e){
    return e.context.innerText;
    }

    A suivre....

Discussions similaires

  1. Réponses: 1
    Dernier message: 24/12/2010, 13h06
  2. plugin jqGrid, création difficile
    Par thor76160 dans le forum jQuery
    Réponses: 3
    Dernier message: 31/10/2010, 08h48
  3. Déplacer la sélection d'une ligne dans un stringgrid
    Par jer64 dans le forum Composants VCL
    Réponses: 5
    Dernier message: 14/03/2003, 00h57
  4. [VB6] [Install] Associer une icone à un raccourci
    Par petitgognol dans le forum Installation, Déploiement et Sécurité
    Réponses: 7
    Dernier message: 30/10/2002, 20h20
  5. Attribuer une icone à une application
    Par k_boy dans le forum x86 32-bits / 64-bits
    Réponses: 4
    Dernier message: 31/08/2002, 01h38

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