0

最近我将数据表与我的++项目集成在一起。spring 4 mvcHibernate 4Tiles 3

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

请看下面的图片。
1.Search filter并且export links不在一排。我希望它们出现在一行中。

我试过dom="ilfrtip"导出链接消失了！！也没有得到我想要的输出......！

在此处输入图像描述

  1. 并在所有主题中datatable sorted column出现蓝色！

在此处输入图像描述

  1. 我还想突出显示鼠标悬停时的行，如此处所示，但我的自定义颜色不是蓝色。

  2. 我也想要这里显示的条纹，但使用我的自定义颜色。

我用过 cssStripes="odd,even"，但不工作。:(

所以我想应用自定义主题而不是基本的主题选项主题。

我已经从ThemeRoller name下载了我的自定义主题PurpleTheme。

我该如何应用这个datatables？

我正在使用 springthemeresolver和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"   >

欢迎任何帮助。先感谢您.....

4

1 回答 1

2

我刚刚通过从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.jsonsrc/main/resources/dandelion

在这个文件中，您只需要引用您的自定义 CSS。不要忘记将此捆绑包标记为依赖于捆绑包jqueryui（使用theme="jqueryui"table 属性时已激活）。

{
    "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/ 为蒲公英数据表创建一个扩展

目前，为主题使用自定义主题选项的唯一方法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准备好地面后，您可以通过table 属性激活它来测试您的扩展。

<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>

另一种选择是直接在上述CustomJqueryThemeJava 类中配置 sDom 参数。

最后，如果要更新奇/偶行，只需使用 cssStripes 表属性，如下所示：

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

只要确保：

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

如您所见，这并不容易。：-/

但由于扩展机制的改进，它在即将发布的版本中应该会变得更简单一些。

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

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

于 2014-06-09T22:14:36.363 回答