蒲公英数据表自定义jqueryUI主题

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

题

最近我整合了 数据表 与我的 spring 4 mvc + Hibernate 4 + Tiles 3 工程。

一切都很好。但我有一个问题。我的 jqueryUI themes 不能正常工作。

请看下面的图片。
1. Search filter 和 export links 不在一排。我希望他们排成一行。

我试过了 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>

只要确保:

  • 要么使用不同于"奇数"和"偶数"的东西（因为Datatables使用这些类）
  • 或者，如果您仍然想使用"奇数"和"偶数"，请确保使用自定义CSS规则复盖它们。

正如你所看到的，这不是很容易。:-/

但是由于扩展机制的改进，在即将到来的版本中它应该变得更加简单。

请注意，一旦此示例在官方Dandelion-Datatables示例应用程序中可用，我将更新此答案。

（Stackoverflow要求的免责声明:我是蒲公英的作者）

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top