الهندباء Datatables مخصص jqueryUI الموضوع
-
21-12-2019 - |
سؤال
مؤخرا أنا المتكاملة datatables مع spring 4 mvc
+ Hibernate 4
+ Tiles 3
المشروع.
كل شيء يسير على ما يرام.ولكن لدي قضية واحدة.بلدي jqueryUI themes
لا تعمل بشكل صحيح.
يرجى إلقاء نظرة في الصور أدناه.
1. Search filter
و export links
لا في صف واحد.أريد لها أن تظهر في صف واحد.
حاولت مع dom="ilfrtip"
تصدير الروابط اختفت!!أيضا لم تحصل على إخراج ما أريد...!
- و
datatable sorted column
يظهر الأزرق في كل المواضيع !!
أنا أيضا أريد أن أسلط الضوء على التوالي على تحوم الماوس كما هو مبين هنا, ولكن مع بلدي لون مخصص ليس الأزرق.
أنا أيضا أريد خطوط كما هو موضح هنا, لكن مع ألوان مخصصة.
اعتدت 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" >
أي مساعدة هي دعوة.شكرا لكم مقدما.....
المحلول
أنا فقط إجراء اختبار عن طريق تحميل موضوع من رولر.فيما يلي الخطوات المطلوبة لتطبيق سمة مخصصة باستخدام الهندباء & الهندباء-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 عينة التطبيقات.
(تنويه المطلوبة من قبل ستاكوفيرفلوو:أنا كاتب الهندباء)