Dandelion DatatablesカスタムjqueryUIテーマ

StackOverflow https://stackoverflow.com//questions/24032270

質問

最近、私は統合しました データテーブル 私と一緒に spring 4 mvc + Hibernate 4 + Tiles 3 プロジェクト。

すべてが正常に動作しています。しかし、私は一つの問題があります。私の jqueryUI themes 正常に動作していません。

下の画像をご覧ください。
1. Search filter と export links 一列に並んでいません。私はそれらを1行に表示したい。

私は試してみました dom="ilfrtip" エクスポートリンクが消えました！!また、私が望んでいたものを出力しませんでした。..!

enter image description here

  1. と datatable sorted column が表示されます ブルー すべてのテーマで！!

enter image description here

  1. また、示されているように、マウスホバーの行を強調表示したいと思います ここに, 、しかし、私と一緒に カスタムカラー 青ではない。

  2. 私はまた、示されているようにストライプをしたいです ここに, 、しかし、私のカスタム色で。

私は使用しました cssStripes="odd,even", 、しかし、動作していません。:(

だから私は基本の代わりにカスタムテーマを適用したい テーマ-オプション テーマ。

私はから私のカスタムテーマをダウンロードしました ThemeRoller（テメロラー） 名前 PurpleTheme.

これをどのように適用できますか datatables?

Springを使用してspringテーマプロパティからテーマをロードしています themeresolver と 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"   >

任意の助けが招待されています。よろしくお願いします。.....

役に立ちましたか？

解決

私はちょうどからテーマをダウンロードしてテストをしました ThemeRoller（テメロラー）.ここでは、Dandelion&Dandelion-Datatables v0.10.0を使用してカスタムテーマを適用するために必要な手順に従います。

1/jQueryUI関連のアセットのダウンロードとインストール

ThemeRollerからすべてのアセットをダウンロードしたら、プロジェクト内に配置します。私の例では、次の標準Mavenアーキテクチャを使用しています:

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

警告: CSSファイル内のすべての画像リンクを更新して、それらを指すようにしなければなりませんでした images フォルダ(../images/ の代わりに images/).

2/新しいアセットバンドルを準備する

すべてのアセットがここに来たら、新しいアセットを作成します バンドル と呼ばれる custom-theme.json の中で src/main/resources/dandelion フォルダ。

このファイルでは、カスタムCSSを参照するだけです。このバンドルを次の依存関係としてマークすることを忘れないでください jqueryui 一つ（あなたが使用するときにすでに活性化されています theme="jqueryui" テーブル属性）。

{
    "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/Dandelion-Datatablesの拡張機能を作成する

現在、カスタムテーマオプションを使用する唯一の方法は、 jqueryui テーマは拡張機能を作成することです。

設定（JSP側）を軽減するために、jqueryuiとカスタムテーマの両方をアクティブにする拡張機能（実際にはテーマ）を作成して、使用する必要がないようにすることを theme="jqueryui" もはや。

3.1|拡張するクラスを作成する 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|拡張機能の登録

次に、拡張機能をDandelion-Datatablesによって検出する必要があります。これを行うには、次のように定義する必要があります [group].main.extension.package 構成ファイル内のプロパティ。このプロパティは、実際にはDandelion-Datatablesが拡張機能をスキャンするパッケージです。

だから私は新しいを追加しました datatables.properties ファイルの下に src/main/resources/dandelion/datatables/ を含むフォルダ、:

global.main.extension.package=com.example

4|拡張機能を有効にする

地面が準備されれば、それのおかげで活動化させることによってあなたの延長をテストできます ext テーブル属性。

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

あなたが上で与えた名前を渡すだけです getName() あなたの拡張子のメソッド。

5/構成を適応させる

これは、エクスポートリンクなしでうまく動作します。しかし、エクスポート機能を有効にするとすぐに、dandelion-DatatablesはsDomパラメータを新しい文字で更新します: E （エクスポート用）、したがって、以前にjQueryのテーマによって設定された設定を破ります。

したがって、この設定を次のように上書きするだけです:

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

別のオプションは、上記のsDomパラメータを直接設定することです CustomJqueryTheme Javaクラス。

最後に、奇数/偶数行を更新する場合は、次のようにcssStripesテーブル属性を使用します:

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

ちょうど確認してください:

  • "odd"や"even"とは異なるものを使用するか（Datatablesはこれらのクラスを使用するため）
  • または、それでも「奇数」と「偶数」を使用する場合は、カスタムCSSルールでそれらをオーバーライドしてください。

あなたが見ることができるように、それは非常に簡単ではありません。:-/

しかし、拡張メカニズムの改善のおかげで、今後のバージョンでは少し簡単になるはずです。

この例が公式のDandelion-Datatablesサンプルアプリケーションで利用できるようになったら、この回答を更新することに注意してください。

（Stackoverflowによって必要な免責事項:私はタンポポの作者です）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top