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 :

Tableau : Scrollbar horizontal et entete fixe


Sujet :

JavaScript

  1. #1
    Membre du Club
    Inscrit en
    février 2009
    Messages
    41
    Détails du profil
    Informations forums :
    Inscription : février 2009
    Messages : 41
    Points : 41
    Points
    41
    Par défaut Tableau : Scrollbar horizontal et entete fixe
    Bonjour,

    J'ai réussi grâce au forum de developpez.net à réaliser un tableau dont l'entête reste toujours fixe lorsque l'on descend les lignes grâce à un scrollbar vertical (sauf que ça ne fonctionne pas jusqu'à maintenant sous chrome).Mais, je me suis bloqué ça fait deux semaines sur un problème important d'affichage: le nombre de colonne de ma table (asp:table) varie avec les données. Si le nombre de ces colonnes dépasse la taille de la table, une scrollbar horizontale apparait pour visualiser les données a droite. le problème c'est que l'entête sort du cadre du div et ne bouge pas avec les données.
    J'ai essayé de mettre position:relative au "conteneur" (div) ça ne marche pas.
    le problème se pose sous IE et chrome alors que sous Firefox, l'entête scrolle avec les données sauf que j'ai deux!! scrollbar horizontales une du div et l'autre de la table.
    Avez-vous des pistes pour résoudre ce problème?
    Ma solution ressemble énormément à ceci http://www.codeproject.com/KB/webfor...ridHeader.aspx sauf que dans cet exemple le nombre de colonne est fixe (!!tester cette solution chrome, l'entête n'est pas fixe).
    Merci d'avance.

  2. #2
    Invité
    Invité(e)
    Par défaut
    bonjour
    sans code on peut pas savoir

  3. #3
    Membre du Club
    Inscrit en
    février 2009
    Messages
    41
    Détails du profil
    Informations forums :
    Inscription : février 2009
    Messages : 41
    Points : 41
    Points
    41
    Par défaut
    Citation Envoyé par mekal Voir le message
    bonjour
    sans code on peut pas savoir
    Tu as raison.
    voici le code aspx:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <div style="border:0;">
                <asp:Table ID="tSummaryIc" runat="server">
                </asp:Table>
            </div>
    ici les styles et le javascript:
    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
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
     <style type="text/css">
              .Issue
                {
                    font-family:Arial;
                    font-size:12;
                    font-weight:bold;
                    width: 400px;
                }
         </style>
         <style type="text/css">
     
        .WrapperDiv {
            width:1170px;height:680px;
        }        
        .WrapperDiv TH {
            position:relative;
            top: expression(offsetParent.scrollTop);
        }
        .WrapperDiv TR 
        {
            /* Needed for IE */
            height:0px;
        }
        .ScrollContent 
        {
            /* Needed for Opera */
            display: block;
            overflow: auto;
            width: 100%;
            height: 250px;
        }
        .FixedHeader
        {
            /* Needed for opera */
            display: block;
        }
     
    </style>
    <script type="text/ecmascript">
        var headerHeight = 8;
     
        /// <summary>
        ///  Responsible for call appropriate function according to browser
        ///  for Browser Compatibility
        /// </summary>
        function onLoad() {
            if (navigator.appName == "Opera") {
                freezetableHeaderForOpera('tSummaryIc');
            }
            else {
                FreezetableHeaderForIEAndFF('tSummaryIc', 'WrapperDiv');
            }
        }
        function FreezetableHeaderForIEAndFF(tableID, wrapperDivCssClass) 
        {
            var table = document.getElementById(tableID);
            if (table != 'undefined')
            {
                table.style.visibility = 'hidden';
                var div = null;
                if (table.parentNode != 'undefined') 
                {
                    //Find wrapper div output by table
                    div = table.parentNode;
                    if (div.tagName == "DIV")
                    {
                        div.className = wrapperDivCssClass;  
                        div.style.overflow = "auto";                   
                    }
                }
                var table = prepareFixedHeader(table);
                var tbody = table.getElementsByTagName('TBODY')[0];
     
                //Needed for Firefox
                tbody.style.height = (div.offsetHeight - headerHeight) + 'px';
     
                tbody.style.overflowX = "hidden";
                tbody.overflow = 'auto';
                tbody.overflowX = 'hidden';
     
                table.style.visibility = 'visible';
            }
        }
        /// <summary>
        ///  Used to prepare a fixed table header
        /// </summary>
        /// <param name="table" type="table">
        ///   The Reference Of table control
        /// </param>
        function prepareFixedHeader(table) {
            //Find DOM TBODY element and  and
            var tags = table.getElementsByTagName('TBODY');
            if (tags != 'undefined') {
                var tbody = tags[0];
     
                var trs = tbody.getElementsByTagName('TR');
     
                if (trs != 'undefined') {
                    headerHeight += trs[0].offsetHeight;
     
                    //Remove first TR tag from it        
                    var headTR = tbody.removeChild(trs[0]);
     
                    //create a new element called THEAD
                    var head = document.createElement('THEAD');
                    head.appendChild(headTR);
               //     head.position = 'fixed';
                    //add to a THEAD element instead of TR so CSS styles
                    //can be applied properly in both IE and FireFox
                    table.insertBefore(head, table.firstChild);
                }
            }
     
            return table;
        }
        /// <summary>
        ///  Used to create a fixed table header and allow scrolling
        ///  for Opera (Tested in Opera-9.2)
        /// </summary>
        /// <param name="tableId" type="String">
        ///   Client-side ID of the table control
        /// </param>
        function freezetableHeaderForOpera(tableId) {
            var table = document.getElementById(tableId);
            if (table != 'undefined') {
                table = prepareFixedHeader(table);
     
                var headers = table.getElementsByTagName('THEAD')[0];
                headers.className = "FixedHeader";
     
                var tbody = table.getElementsByTagName('TBODY')[0];
                tbody.className = "ScrollContent";
                var cells = tbody.childNodes[0];
     
                for (var i = 0; i < cells.childNodes.length; i++) {
                    var tableCell = cells.childNodes[i];
                    var tableCellWidth = getStyle(tableCell, 'width')
                    var headerCell = headers.childNodes[0].childNodes[i];
     
                    var headerCellWidth = getStyle(headerCell, 'width');
     
                    if (widthPxToInt(tableCellWidth) > widthPxToInt(headerCellWidth)) {
                        headerCell.style.width = (widthPxToInt(tableCellWidth) - 10) + "px";
                    }
                    else {
                        tableCell.style.width = (widthPxToInt(headerCellWidth) - 10) + "px";
                    }
                }
            }
        }
        function getStyle(oElm, strCssRule) {
            var strValue = "";
            if (document.defaultView && document.defaultView.getComputedStyle) {
                strValue = document.defaultView.getComputedStyle(oElm,
                                   "").getPropertyValue(strCssRule);
            }
            else if (oElm.currentStyle) {
                strCssRule = strCssRule.replace(/\-(\w)/g, function(strMatch, p1) {
                    return p1.toUpperCase();
                });
                strValue = oElm.currentStyle[strCssRule];
            }
            return strValue;
        }
     
        /// <summary>
        ///  Used to convert from Pxel to Integer
        /// </summary>
        /// <param name="width" type="String">
        ///  Width of any thing like tableHeader,tableCell
        /// </param>    
        function widthPxToInt(width) {
            width = width.substr(0, width.length - 2);
            return new Number(width);
        }
     
    </script>
    Les colonnes et les lignes de la table sont construits en code behind (#).

Discussions similaires

  1. Tableau html avec 1ere colonne fixe et scrollbar
    Par Olivier3000 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 01/03/2011, 13h12
  2. [Tableaux] Tableau remplissage horizontal
    Par jedi186 dans le forum Langage
    Réponses: 11
    Dernier message: 08/02/2007, 12h03
  3. [IE] Apparition de scrollbar horizontal
    Par BnA dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 07/02/2007, 12h42
  4. scrollbar horizontal dans un select
    Par SandraG dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 31/05/2006, 18h20
  5. [Listbox] ScrollBar Horizontal
    Par haleem dans le forum VB 6 et antérieur
    Réponses: 4
    Dernier message: 20/04/2005, 08h53

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