الهندباء Datatables مخصص jqueryUI الموضوع

Question

مؤخرا أنا المتكاملة datatables مع 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", ولكن لا يعمل.:(

إذا كنت تريد تطبيق موضوع مخصص بدلا من الأساسي themeoptions المواضيع.

لقد تم تحميل بلدي مخصص موضوع من رولر اسم PurpleTheme.

كيف يمكنني تطبيق هذا datatables?

أنا تحميل المواضيع من موضوع الربيع الخصائص باستخدام الربيع 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

أنا فقط إجراء اختبار عن طريق تحميل موضوع من رولر.فيما يلي الخطوات المطلوبة لتطبيق سمة مخصصة باستخدام الهندباء & الهندباء-Datatables v0.10.0.

1/ تحميل و تثبيت jQueryUI الأصول ذات الصلة

بمجرد تحميل جميع الموجودات من رولر ، ووضعها داخل المشروع.في بلدي على سبيل المثال ، استخدام المعايير التالية مخضرم العمارة:

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/ إنشاء تمديد الهندباء-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/ تسجيل الملحق الخاص بك

ثم الملحق الخاص بك يجب أن يكون الكشف عنها بواسطة الهندباء-Datatables.للقيام بذلك, يجب أن تحدد [group].main.extension.package الملكية في ملف التكوين.هذه الخاصية هي في الواقع مجموعة حيث الهندباء-Datatables سوف تفحص امتداد.

لذلك أضفت جديد datatables.properties الملف تحت src/main/resources/dandelion/datatables/ المجلد الذي يحتوي على:

global.main.extension.package=com.example

4/ تفعيل امتداد

مرة واحدة في الأرض المعدة ، يمكنك اختبار الخاص بك التمديد من خلال تفعيل ذلك بفضل ext الجدول السمة.

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

فقط تمرير اسم لديك المذكور أعلاه في getName() طريقة التمديد.

5/ تكييف التكوين

أنه يعمل بشكل جيد دون تصدير الروابط.ولكن بمجرد تفعيل ميزة التصدير, الهندباء-Datatables سيتم تحديث sDom المعلمة مع رسالة جديدة: E (للتصدير), ولذلك كسر التكوين سابقا من قبل مسج الموضوع.

لذلك تحتاج فقط إلى تجاوز هذا الإعداد على النحو التالي:

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

سيكون هناك خيار آخر لتكوين sDom المعلمة مباشرة في أعلاه CustomJqueryTheme فئة جافا.

أخيرا, إذا كنت ترغب في تحديث ونيف/حتى الصفوف, مجرد استخدام cssStripes الجدول السمة على النحو التالي:

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

فقط تأكد من:

• إما أن تستخدم شيئا مختلفا من "الغريب" و "حتى" (لأن Datatables استخدام هذه الفئات)
• أو إذا كنت لا تزال تريد استخدام "الغريب" و "حتى" ، تأكد من تجاوز منهم مع CSS مخصص القواعد.

---

كما ترون انها ليست من السهل جدا.:-/

ولكن يجب أن تصبح أبسط قليلا في الإصدارات القادمة بفضل التحسينات في تمديد آلية.

علما أنه سوف أقوم بتحديث هذه الإجابة مرة واحدة في هذا المثال سوف تكون متاحة في الهندباء-Datatables عينة التطبيقات.

(تنويه المطلوبة من قبل ستاكوفيرفلوو:أنا كاتب الهندباء)