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

JavaScript Discussion :

appendchild dans une grille


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Octobre 2006
    Messages
    207
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2006
    Messages : 207
    Par défaut appendchild dans une grille
    Bonjour, j'ai actuellement un petit problème. Présentement dans ma page j'ai une grille qui pourrait contenir plusieurs centaines de données.

    Lorsque je clique dans une cellule ou que j'utilise les flèches du clavier je met un textbox directement dans la cellule en question avec la méthode appendChild. Le problème est qu'après un certain nombre de données ma grille deviens particulièrement lente.

    J'ai aussi essayé d'obtenir la position exact de la cellule en passant par le offsetParent, mais la position qui m'es retournée est toujours là même et je ne comprend pas tout à fait ce qui se passe de ce côté là.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    var element;
    var top = 0;
    var left = 0;
    while (element = element.offsetParent)
    {
     if(element.offsetParent)
     {
      top += element.offsetTop;
      left += element.offsetLeft;
      element = element.offsetParent;
     }
    }
    Je sais pour avoir lu à plusieurs endroit que la méthode appendChild peu être par moment très lente. En gros ce que je souhaite savoir c'est :

    existe-til une autre méthode(plus rapide) pour insérer le textbox dans la cellule ou encore trouver la position exact de la cellule en question??

  2. #2
    Membre Expert Avatar de franculo_caoulene
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    2 880
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 2 880
    Par défaut insérer un champ texte dans une cellule
    Salut,

    Tout d'abord qu'est-ce qu'une grille pour toi? Un élément table? D'après ce que je comprends de ce que tu fais, tu positionne le champ texte plutôt que dans l'insérer dans on parent qui devrait être un td. Exemple :
    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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
    <head>
        <title>insérer un champ texte dans une cellule</title>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
        <style type="text/css">
        * {margin:0;padding:0;}
        table {background:#333;}
        td {width:8em;height:1em;background:#666;}
        body {margin:10px;background:#000;color:#ddd;font-size:1em;font-family:Helvetica, Arial, sans-serif;}
        </style>
    </head>
    <body>
      <form id="f" method="post">
      <table>
        <tr><td class="g"></td><td class="d"></td></tr>
        <tr><td class="g"></td><td class="d"></td></tr>
        <tr><td class="g"></td><td class="d"></td></tr>
        <tr><td class="g"></td><td class="d"></td></tr>
        <tr><td class="g"></td><td class="d"></td></tr>
      </table>
      </form>
      <script type="text/javascript">
      <!--
      var FC = {
        Evenement: {
          evenements: [],
          ajouter: function(elm, evt, fn) {
            var fni = function(e) {                             // prévient le comportement par défaut
              if (fn(e)===false) {                              // false explicitement car peut être undefined en cas de délégation d'évènement
                if (e.preventDefault) { e.preventDefault(); }
                else { e.returnValue = false; }
              }
            };
            if (document.addEventListener) { elm.addEventListener(evt, fni, false); }
            else if (document.attachEvent) { elm.attachEvent("on" + evt, fni); }
            FC.Evenement.evenements.push([elm, evt, fni]);
          },
          supprimer: function(elm, evt, fn) {
            var evts = FC.Evenement.evenements;
            for (var i=evts.length-1; i>=0; i--) {
              if (evts[i][0]===elm && evts[i][1]===evt) {
                if (document.removeEventListener) { elm.removeEventListener(evts[i][1], evts[i][2], false); } 
                else if (document.detachEvent) { elm.detachEvent("on" + evts[i][1], evts[i][2]); }
                FC.Evenement.evenements.splice(i,1);
              }
            }
          }
        }
      }
      FC.Evenement.ajouter(document, "click", function(e) {
        var elm = e.target || event.srcElement;
        //alert(elm.tagName.toLowerCase);
        if (elm.tagName.toLowerCase()==="td") {
          var input = document.createElement("input");
          input.type = "text";
          input.name = "i"+elm.className+elm.parentNode.rowIndex;
          input.id = input.name;
          elm.appendChild(input);
        }
      });
      /*var Utils = {
        toSelect : function(p, e) {
          var s = document.createElement("select");
          var o = document.createElement("option");
          var o1 = document.createTextNode("o1");
          s.setAttribute("id", "s");
          s.setAttribute("name", "s");
          o.setAttribute("value", "o1");
          o.appendChild(o1);
          s.appendChild(o);
          p.replaceChild(s, e);
        },
        toInput : function(p, e) {
          var i = document.createElement("input");
          i.setAttribute("id", "i");
          i.setAttribute("name", "i");
          i.setAttribute("type", "text");
          p.replaceChild(i, e);
        }
      };
      
      document.getElementById("select").onclick = function() {
        if (document.getElementById("i"))
          Utils.toSelect(document.getElementById("c"), document.getElementById("i"));
      }
      document.getElementById("input").onclick = function() {
        if (document.getElementById("s"))
          Utils.toInput(document.getElementById("c"), document.getElementById("s"));
      }*/
      -->
      </script>
    </body>
    </html>

Discussions similaires

  1. Insérer une image dans une grille
    Par nurbo_2056 dans le forum C++Builder
    Réponses: 3
    Dernier message: 15/12/2006, 12h01
  2. Réponses: 3
    Dernier message: 16/10/2006, 11h06
  3. Classer des rectangles dans une grille régulière
    Par Rodrigue dans le forum Algorithmes et structures de données
    Réponses: 3
    Dernier message: 16/09/2006, 13h38
  4. Fuison de cellule dans une grille
    Par AlexB59 dans le forum Composants VCL
    Réponses: 1
    Dernier message: 21/11/2005, 16h25
  5. Réponses: 10
    Dernier message: 19/09/2005, 22h24

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