web-dev-qa-db-fra.com

Thèmes jQuery UI et tableaux HTML

Existe-t-il un moyen de créer un thème pour un tableau HTML (CSS) en utilisant les thèmes CSS jQuery?

Tous mes composants semblent appartenir ensemble sauf mon tableau HTML qui a l'air différent.

htmljquery-uihtml-tablethemesthemeroller
45
leora

Il existe de nombreuses ressources:

Plugins avec support ThemeRoller:

jqGrid

DataTables.net

MISE À JOUR: Voici quelque chose que j'ai mis en place qui stylisera le tableau:

<script type="text/javascript">

    (function ($) {
        $.fn.styleTable = function (options) {
            var defaults = {
                css: 'styleTable'
            };
            options = $.extend(defaults, options);

            return this.each(function () {

                input = $(this);
                input.addClass(options.css);

                input.find("tr").live('mouseover mouseout', function (event) {
                    if (event.type == 'mouseover') {
                        $(this).children("td").addClass("ui-state-hover");
                    } else {
                        $(this).children("td").removeClass("ui-state-hover");
                    }
                });

                input.find("th").addClass("ui-state-default");
                input.find("td").addClass("ui-widget-content");

                input.find("tr").each(function () {
                    $(this).children("td:not(:first)").addClass("first");
                    $(this).children("th:not(:first)").addClass("first");
                });
            });
        };
    })(jQuery);

    $(document).ready(function () {
        $("#Table1").styleTable();
    });

</script>

<table id="Table1" class="full">
    <tr>
        <th>one</th>
        <th>two</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>

Le CSS:

.styleTable { border-collapse: separate; }
.styleTable TD { font-weight: normal !important; padding: .4em; border-top-width: 0px !important; }
.styleTable TH { text-align: center; padding: .8em .4em; }
.styleTable TD.first, .styleTable TH.first { border-left-width: 0px !important; }
60
dochoffiday

dochoffiday's answer est un excellent point de départ, mais pour moi, il ne l'a pas coupé (la partie CSS avait besoin d'un buff) donc j'ai fait une version modifiée avec plusieurs améliorations.

Voyez-le en action, puis revenez pour la description.

Javascript

(function ($) {
    $.fn.styleTable = function (options) {
        var defaults = {
            css: 'ui-styled-table'
        };
        options = $.extend(defaults, options);

        return this.each(function () {
            $this = $(this);
            $this.addClass(options.css);

            $this.on('mouseover mouseout', 'tbody tr', function (event) {
                $(this).children().toggleClass("ui-state-hover",
                                               event.type == 'mouseover');
            });

            $this.find("th").addClass("ui-state-default");
            $this.find("td").addClass("ui-widget-content");
            $this.find("tr:last-child").addClass("last-child");
        });
    };
})(jQuery);

Différences avec la version originale:

  • la classe CSS par défaut a été remplacée par ui-styled-table (cela semble plus cohérent)
  • le .live l'appel a été remplacé par le recommandé .on pour jQuery 1.7 vers le haut
  • le conditionnel explicite a été remplacé par .toggleClass (un équivalent terser)
  • le code qui définit la classe CSS mal nommée first sur les cellules du tableau a été supprimé
  • le code qui ajoute dynamiquement .last-child à la dernière ligne du tableau est nécessaire pour corriger un problème visuel sur Internet Explorer 7 et Internet Explorer 8; pour les navigateurs prenant en charge :last-child ce n'est pas nécessaire

CSS

/* Internet Explorer 7: setting "separate" results in bad visuals; all other browsers work fine with either value. */
/* If set to "separate", then this rule is also needed to prevent double vertical borders on hover:
table.ui-styled-table tr * + th, table.ui-styled-table tr * + td  { border-left-width: 0px !important; } */
table.ui-styled-table { border-collapse: collapse; }

/* Undo the "bolding" that jQuery UI theme may cause on hovered elements
/* Internet Explorer 7: does not support "inherit", so use a MS proprietary expression along with an Internet Explorer <= 7 targeting hack
        to make the visuals consistent across all supported browsers */
table.ui-styled-table td.ui-state-hover {
    font-weight: inherit;
    *font-weight: expression(this.parentNode.currentStyle['fontWeight']);
}

/* Initally remove bottom border for all cells. */
table.ui-styled-table th, table.ui-styled-table td { border-bottom-width: 0px !important; }

/* Hovered-row cells should show bottom border (will be highlighted) */
table.ui-styled-table tbody tr:hover th,
table.ui-styled-table tbody tr:hover td
{ border-bottom-width: 1px !important; }

/* Remove top border if the above row is being hovered to prevent double horizontal borders. */
table.ui-styled-table tbody tr:hover + tr th,
table.ui-styled-table tbody tr:hover + tr td
{ border-top-width: 0px !important; }

/* Last-row cells should always show bottom border (not necessarily highlighted if not hovered). */
/* Internet Explorer 7, Internet Explorer 8: selector dependent on CSS classes because of no support for :last-child */
table.ui-styled-table tbody tr.last-child th,
table.ui-styled-table tbody tr.last-child td
{ border-bottom-width: 1px !important; }

/* Last-row cells should always show bottom border (not necessarily highlighted if not hovered). */
/* Internet Explorer 8 BUG: if these (unsupported) selectors are added to a rule, other selectors for that rule will stop working as well! */
/* Internet Explorer 9 and later, Firefox, Chrome: make sure the visuals are working even without the CSS classes crutch. */
table.ui-styled-table tbody tr:last-child th,
table.ui-styled-table tbody tr:last-child td
{ border-bottom-width: 1px !important; }

Remarques

J'ai testé cela sur Internet Explorer 7 et versions ultérieures, Firefox 11 et Google Chrome 18 et confirmé que cela fonctionne parfaitement. J'ai pas testé des versions raisonnablement antérieures de Firefox et Chrome ou toute version de Opera ; cependant, ces navigateurs sont bien connus pour leur bonne prise en charge CSS et puisque nous n'utilisons aucune fonctionnalité de bord saignant ici, je supposons que cela fonctionnera très bien là aussi.

Si vous n'êtes pas intéressé par la prise en charge d'Internet Explorer 7, un attribut CSS (introduit avec le piratage en étoile) peut être utilisé.

Si vous n'êtes pas non plus intéressé par la prise en charge d'Internet Explorer 8, le code CSS et relatif à l'ajout et au ciblage du last-child La classe CSS peut aussi aller.

31
Jon

Pourquoi ne pas simplement utiliser les styles de thème dans le tableau? c'est à dire.

<table>
  <thead class="ui-widget-header">
    <tr>
      <th>Id</th>
      <th>Description</th>
    </td>
  </thead>
  <tbody class="ui-widget-content">
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
      .
      .
      .
  </tbody>
</table>

Et vous n'avez pas besoin d'utiliser de code ...

17
Marco Muciño