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

Question

最近我将datatables与spring 4 mvc + Hibernate 4 + Tiles 3项目进行了整合。

一切都很好。但我有一个问题。我的jqueryUI themes无效。

请查看以下图片。
1. Search filter和export links不在一行中。我希望它们出现在一行中。

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

1. datatable sorted column在所有主题中都显示蓝色 !!



1. 我还要突出显示鼠标悬停上的行here，但我的自定义颜色不是蓝色。

2. 我还想要here所示的条纹，但我想要自定义颜色。

我使用了cssStripes="odd,even"，但没有用。 ：（

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

我已从ThemeRoller名称PurpleTheme下载了自定义主题。

如何将此应用于datatables？

我使用spring themeresolver和themeinterceptor加载来自spring主题属性的主题。

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

邀请任何帮助。提前谢谢.....

Answer 1

我刚从ThemeRoller下载主题进行了测试。 以下是使用蒲公英＆amp; amp; 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/）。< / p>

2 /准备新资产包

所有资源都在此处后，在custom-theme.json文件夹中创建一个名为src/main/resources/dandelion的新bundle。

在此文件中，您只需要引用自定义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 /为蒲公英数据表创建扩展

目前，jqueryui主题使用自定义主题选项的唯一方法是创建扩展程序。

为了减轻配置（JSP端），我建议你创建一个扩展（实际上是一个主题），它将激活jQueryUI和你的自定义主题，这样你就不需要使用{ {1}}不再。

3.1 /创建一个扩展theme="jqueryui"

的类

AbstractExtension

3.2 /注册您的扩展程序

然后，您的扩展必须由Dandelion-Datatables检测。为此，您必须在配置文件中定义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"); } } 属性。该属性实际上是蒲公英数据表将扫描扩展名的包。

所以我在[group].main.extension.package文件夹下添加了一个新的datatables.properties文件，其中包含：

src/main/resources/dandelion/datatables/

4 /激活扩展名

准备完毕后，您可以通过global.main.extension.package=com.example 表格属性激活它来测试您的扩展程序。

ext

只需在您的扩展程序的<datatables:table ... ext="myTheme" ...> ... </datatables:table> 方法中传递上面给出的名称。

5 /调整配置

没有导出链接，效果很好。但是一旦激活导出功能，Dandelion-Datatables就会用一个新的字母更新sDom参数：getName()（用于导出），因此打破了以前由jQuery主题设置的配置。

所以你只需要覆盖以下设置：

E

另一种选择是直接在上面的<datatables:table ... ext="myTheme" export="csv" dom="<\"H\"lEfr>t<\"F\"ip>"> ... </datatables:table> Java类中配置sDom参数。

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

CustomJqueryTheme

确保：

• 使用不同于＆＃34; odd＆＃34;和＆＃34;甚至＆＃34; （因为Datatables使用这些类）
• 或者如果你还想使用＆＃34; odd＆＃34;和＆＃34;偶数＆＃34;，请确保使用自定义CSS规则覆盖它们。

---

正如您所看到的，这并不容易。 ： - /

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

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

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