Таблицы данных одуванчика. Пользовательская тема jqueryUI.

Question

Недавно я интегрировал таблицы данных с моим spring 4 mvc + Hibernate 4 + Tiles 3 Проект.

Все работает нормально.Но у меня есть одна проблема.Мой jqueryUI themes не работают должным образом.

Пожалуйста, посмотрите на изображения ниже.
1. Search filter и export links находятся не в одном ряду.Я хочу, чтобы они отображались в одном ряду.

Я попробовал с dom="ilfrtip" Экспортные ссылки исчезли!!И не получил того, что хотел...!

2. И datatable sorted column появляется синий во всех темах!!

3. Я также хочу выделить строку при наведении курсора мыши, как показано. здесь, но с моим индивидуальный цвет не синий.

4. Я тоже хочу полоски, как показано на рисунке. здесь, но с моими собственными цветами.

я использовал cssStripes="odd,even", но не работает.:(

Поэтому я хочу применить собственную тему вместо базовой. параметры темы темы.

Я скачал свою собственную тему с сайта ТемаРоллер имя 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"   >

Любая помощь приветствуется.Заранее спасибо.....

Answer 1

Я только что сделал тест, скачав тему с ТемаРоллер.Ниже приведены необходимые шаги для применения пользовательской темы с использованием 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>

Просто убедитесь:

• либо использовать что-то отличное от «нечетного» и «четного» (поскольку таблицы данных используют эти классы)
• или, если вы все еще хотите использовать «нечетный» и «четный», обязательно переопределите их с помощью собственных правил CSS.

---

Как видите, это не очень легко.:-/

Но в следующих версиях все должно стать немного проще благодаря улучшениям в механизме расширений.

Обратите внимание, что я обновлю этот ответ, как только этот пример станет доступен в официальных примерах приложений Dandelion-Datatables.

(Отказ от ответственности, требуемый StackOverflow:Я автор Одуванчика)