Dandelion Datatables Benutzerdefiniertes jqueryUI-Theme

Question

Kürzlich habe ich mich integriert Datentabellen Mit meinem spring 4 mvc + Hibernate 4 + Tiles 3 Projekt.

Alles funktioniert gut.Aber ich habe ein Problem.Mein jqueryUI themes funktionieren nicht richtig.

Bitte schauen Sie sich die folgenden Bilder an.
1. Search filter Und export links liegen nicht in einer Reihe.Ich möchte, dass sie in einer Zeile erscheinen.

Ich habe es mit versucht dom="ilfrtip" Exportlinks verschwunden!!Habe auch nicht das ausgegeben, was ich wollte...!

2. Und datatable sorted column erscheint Blau in allen Themen!!

3. Ich möchte auch die Zeile beim Bewegen der Maus hervorheben, wie gezeigt Hier, aber mit meinem freiwählbare Farbe nicht blau.

4. Ich möchte auch Streifen wie abgebildet Hier, aber mit meinen individuellen Farben.

ich benutzte cssStripes="odd,even", funktioniert aber nicht.:(

Daher möchte ich ein benutzerdefiniertes Design anstelle eines einfachen Designs anwenden Themenoptionen Themen.

Ich habe mein benutzerdefiniertes Design von heruntergeladen ThemeRoller Name PurpleTheme.

Wie kann ich das anwenden? datatables?

Ich lade Themes aus Spring-Theme-Eigenschaften mit Spring themeresolver Und themeinterceptor.

<spring:theme code="theme" var="springTheme" />
<datatables:table id="users" data="${list}" 
row="user" rowIdBase="userId" rowIdPrefix="user_"  
displayLength="5" lengthMenu="5,10,15,25,50,100"
jqueryUI="true" theme="jqueryui" themeOption="${springTheme}" 
filterable="true" 
processing="true" autoWidth="true" 
pageable="true" paginationType="full_numbers" 
export="csv,xml,pdf,xls,xlsx" stateSave="true" deferRender="true"   >

Jede Hilfe ist willkommen.Vielen Dank im Voraus.....

Answer 1

Ich habe gerade einen Test gemacht, indem ich ein Theme heruntergeladen habe ThemeRoller.Hier folgen die erforderlichen Schritte zum Anwenden eines benutzerdefinierten Designs mit Dandelion & Dandelion-Datatables v0.10.0.

1/ Laden Sie die jQueryUI-bezogenen Assets herunter und installieren Sie sie

Nachdem Sie alle Assets von ThemeRoller heruntergeladen haben, platzieren Sie sie in Ihrem Projekt.In meinem Beispiel verwende ich die folgende Standard-Maven-Architektur:

src
|__ main
   |__ webapp
      |__ assets
         |__ css
            |__ jquery-ui-1.10.4.custom.css
         |__ images
            |__ ui-bg_*****.png
            |__ ui-icons_****.png

Warnung: Ich musste alle Bildlinks in der CSS-Datei aktualisieren, um sie auf meine zu verweisen images Ordner (../images/ anstatt images/).

2/ Bereiten Sie ein neues Asset-Paket vor

Sobald alle Assets vorhanden sind, erstellen Sie ein neues bündeln angerufen custom-theme.json im src/main/resources/dandelion Ordner.

In dieser Datei müssen Sie lediglich auf Ihr benutzerdefiniertes CSS verweisen.Vergessen Sie nicht, dieses Bundle als abhängig von zu markieren jqueryui eine (die bereits aktiviert ist, wenn Sie die verwenden theme="jqueryui" Tabellenattribut).

{
    "bundle" : "custom-theme",
    "dependencies": [ "jqueryui" ],
    "assets": [{
        "name": "jquery-ui-custom",
        "version": "0.10.0",
        "type": "css",
        "locations": {
            "webapp": "/assets/css/jquery-ui-1.10.4.custom.css"
        }
    }]
}

3/ Erstellen Sie eine Erweiterung für Dandelion-Datatables

Derzeit ist die einzige Möglichkeit, eine benutzerdefinierte Designoption für zu verwenden jqueryui Das Thema besteht darin, eine Erweiterung zu erstellen.

Um die Konfiguration (JSP-seitig) zu vereinfachen, empfehle ich Ihnen, eine Erweiterung (eigentlich ein Theme) zu erstellen, die sowohl jQueryUI als auch Ihr benutzerdefiniertes Theme aktiviert, sodass Sie es nicht verwenden müssen theme="jqueryui" länger.

3.1/ Erstellen Sie eine Klasse, die erweitert wird AbstractExtension

package com.example;

public class CustomJqueryTheme extends AbstractExtension {

    @Override
    public String getName() {
        return "myTheme";
    }

    @Override
    public void setup(HtmlTable table) {

        // Activate bundles
        AssetRequestContext
            .get(table.getTableConfiguration().getRequest())
                .addBundle("ddl-dt-theme-jqueryui")
                .addBundle("custom-theme");

        // Add "bJQueryUI":true
        addParameter(DTConstants.DT_JQUERYUI, true);

        // Add class="display"
        table.addCssClass("display");
    }
}

3.2/ Registrieren Sie Ihre Erweiterung

Anschließend muss Ihre Erweiterung von Dandelion-Datatables erkannt werden.Dazu müssen Sie die definieren [group].main.extension.package Eigenschaft in der Konfigurationsdatei.Bei dieser Eigenschaft handelt es sich eigentlich um ein Paket, in dem Dandelion-Datatables nach Erweiterungen sucht.

Also habe ich ein neues hinzugefügt datatables.properties Datei unter der src/main/resources/dandelion/datatables/ Ordner, der Folgendes enthält:

global.main.extension.package=com.example

4/ Aktivieren Sie die Erweiterung

Sobald der Boden vorbereitet ist, können Sie Ihre Erweiterung testen, indem Sie sie dank des aktivieren ext Tabellenattribut.

<datatables:table ... ext="myTheme" ...>
    ...
</datatables:table>

Geben Sie einfach den Namen ein, den Sie oben angegeben haben getName() Methode Ihrer Erweiterung.

5/ Passen Sie die Konfiguration an

Es funktioniert gut ohne Exportlinks.Sobald Sie jedoch die Exportfunktion aktivieren, aktualisiert Dandelion-Datatables den sDom-Parameter mit einem neuen Buchstaben: E (für den Export), wodurch die zuvor durch das jQuery-Theme festgelegte Konfiguration unterbrochen wird.

Sie müssen diese Einstellung also nur wie folgt überschreiben:

<datatables:table ... ext="myTheme" export="csv" dom="<\"H\"lEfr>t<\"F\"ip>">
    ...
</datatables:table>

Eine andere Möglichkeit wäre, den sDom-Parameter direkt oben zu konfigurieren CustomJqueryTheme Java-Klasse.

Wenn Sie schließlich die ungeraden/geraden Zeilen aktualisieren möchten, verwenden Sie einfach das Tabellenattribut cssStripes wie folgt:

<datatables:table ... cssStripes="css-class-for-odd,css-class-for-even">
    ...
</datatables:table>

Stellen Sie einfach sicher:

• entweder um etwas anderes als „ungerade“ und „gerade“ zu verwenden (da Datentabellen diese Klassen verwenden)
• Wenn Sie dennoch „ungerade“ und „gerade“ verwenden möchten, stellen Sie sicher, dass Sie diese mit benutzerdefinierten CSS-Regeln überschreiben.

---

Wie Sie sehen, ist es nicht ganz einfach.:-/

Dank Verbesserungen im Erweiterungsmechanismus dürfte es in kommenden Versionen jedoch etwas einfacher werden.

Beachten Sie, dass ich diese Antwort aktualisieren werde, sobald dieses Beispiel in den offiziellen Dandelion-Datatables-Beispielanwendungen verfügbar ist.

(Haftungsausschluss erforderlich von StackOverflow:Ich bin der Autor von Dandelion)