في هذه
المقالة بعنوان "فهم خيارات واجهة المستخدم في ال (jTable)" و تعتبر تكملة للمقالة السابقة ستجدها على الرابط التالي
وهي (jQuery jTable Plugin)
لإنشاء أجاكس تعتمد جدول ال (CRUD) . هناك العديد من الميزات الجميلة
يقدمها ال(jTable) و التي تجعل هذه الإضافة (jQuery jTable Plugin)
خيار نموذجي لمطوري الويب عند التعامل مع عمليات ال (CRUD) . أنا أتحدث عن وظائف واجهة
الكلينت سايد(Client Side) فهذه الإضافة تساعد على تقليل التصميم بالإضافة إلى مزايا
للمستخدم النهائي .
أنا
احاول إيضاح بعض هذه المزايا (تفضيلاتي أنا إن صح التعبير) هنا مع بعض الصور
السريعة من تطبيق الجافا
1- الحركات
animationsEnable Boolean default:true
هذا الخيار يستخدم لعرض حركة سريعة عندما يحاول
اليوزر حذف ، تعديل أو إنشاء سجل في الجدول .
تستطيع دائماً إيقاف هذه الحركة بواسطة تحويل القيمة(true) إلى (false).
أنا اضفت سجل جديد و عندما ينضاف السجل الجديد إلى
الجدول , فإن السجل الجديد سيكون عليه إضاءة عالية لبعض الوقت بعدها تتلاشى بعيداً
ببطء.
لرؤية الصورة بشكل اوضح قم بالنقر عليها
لرؤية الصورة بشكل اوضح قم بالنقر عليها
loadingAnimationDelay
int default:500
الجي تابل يحمل البيانات بواسطة إطلاق إستدعاء ميثود الأجاكس
للسيرفر سايد و هنا عمليات الأجاكس تأخذ بعض الوقت للتنفيذ, الجي تابل يُحدث
المستخدم بواسطة رسالة التحميل، هذه الحركات سوف تظهر بشكل تلقائي عندما الجدول
يفشل بإحضار البيانات خلال 500 ملي ثانية . تستطيع زيادة هذه القيمة لتأخير حركات
التحميل لإظهارها في الجدول. إذا كنت لا تريد استخدم هذه الميزة نهائياً يمكنك
إلغائها بواسطة وضع القيمة إلى صفر .
لرؤية الصورة بشكل اوضح قم بالنقر عليها
2- تعديل حجم
العمود و جعله قابل للتحديد (Column
Resizale and Selectable)
columnResizeable boolean default :true
columnSelectabel boolean default :true
هذا الخياريعطي المستخدمين النهائيين (end
users) القدرة
على تعديل أعمدة الجدول لكي تكون بمظهر افضل و ايضاً يستطيع المستخدم إتخاذ القرار
بخصوص أي الأعمدة يجب ان تبقى في العرض بفلترتها . لفلترة الأعمدة يستطيع المستخدم
بواسطة الضغط بواسطة زر الماوز الايمن على ترويسة الجدول و لإعادة الحجم المستخدم
يستطيع سحب عنوان العمود.
لرؤية الصورة بشكل اوضح قم بالنقر عليها
3- خيارات شريط
الأدوات (Toolbar Options)
هذا الخيار يستخدم شريط ادوات الجي تابل و بنوده .
بشكل إفتراضي ، فقط بند واحد في شريط الأدوات هو "Add new record" (يضاف بواسطة الجي تابل
إذا عرفت انت ال createAction). نستطيع إضافة بنود مخصصة إلى هذا الشريط مثل التصدير إلى أكسيل
(Export to Excel) ... إلخ
لرؤية الصورة بشكل اوضح قم بالنقر عليها
4- خيار
الصفحات (Paging Option)
الجي تابل يقدم كل المدخلات المطلوبة في صفحات مضبوطة
للسجلات في الجدول . لأجل تفعيل الصفحات في الجدول
paging Boolean
default:false
لضبط عرض أرقام السجلات في الصفحة .
لرؤية الصورة بشكل اوضح قم بالنقر عليها
أو للسماح للمستخدم بإختيار أكثر من خيار لعرض الصفحة
، تستطيع تعريف ذلك في مصفوفة قيم حجم الصفحة في خيار حجم الصفحة
pageSizes array
of numbers
default:[10,25,50,100,250,500]
تستطيع أيضاً إختيار أن تخفي صندوق إختيار حجم
الصفحات بواسطة وضع الخاصية (pageSizeChangeArea) إلى (false)
pageSizeChangeArea
Boolean default:true
هناك خيار مفيد أيضاً وهو "Go to
Page" أو
الذهاب إلى صفحة ... وهذا الخيار يُمكن المستخدم من إختيار رقم الصفحة التي يريدها
مباشرة . هذه الميزة يمكن التحكم بها بواسطة الخاصية (gotoPageArea) و التي تساعدنا في تحديد كيف
تعرض هذا المُدخل .
gotoPageArea string default:combobox
ال (combobox) : عرض الكمبوبكس (و التي تحوي كل الصفحات )
للسماح للمستخدم بالذهاب الى الصفحة التي يرغب بها .
ال (textbox) : عرض مربع النص للسماح للمستخدم بالذهاب إلى الصفحة التي يرغب
بها.
ال (none): لا
يعرض خيار (go to
page)
لرؤية الصورة بشكل اوضح قم بالنقر عليها
5- ال (Localization)
الجي تابل بشكل تلقائي يزودك بإسكربت ل 14 لغة .
تستطيع بسهولة تخصيص اللغة للجي تابل في موقعك بواسطة اضافة اسكربت اللوكاليزايشن
(Localization
script) في مجلد
ال (localization) ، فقط بعد ملف الجي تابل
سكربت كما تراه اسفل.
لرؤية الصورة بشكل اوضح قم بالنقر عليها
لرؤية الصورة بشكل اوضح قم بالنقر عليها
تستيطع ايضاً إنشاء لوكايزايشن سكربت خاص فيك و
استخدامه في التطبيق كما تم توضيحه هنا . الشاشة اسفل توضح مثال عن
اللوكاليزايشن التركي او باللغة التركية
لرؤية الصورة بشكل اوضح قم بالنقر عليها
لرؤية الصورة بشكل اوضح قم بالنقر عليها
خيارات أخرى مثل ترتيب و إختيار السجلات متوفراً
أيضاً . بالمجمل ، الجي تابل محمل بالكثير من المزايا الجميلة و كلها مجانية . انا
حقيقة أقدر و أُثمن جهد الأخ () الذي قدم هذا العمل لجعل هذه الأضافة الرائعة
لمساعدة مجتمع المطورين
فضلاً
إترك تعليقك و استفساراتك حول هذا الموضوع في جزء التعليقات اسفل كي أحسن انا من
مهاراتي في الكتابة و التدوين و إظهار التدوين بشكل جيد و مفيد . شكراً لمرورك و
قراءتك للمقال .
ۚ فَأَمَّا
الزَّبَدُ فَيَذْهَبُ جُفَاءً ۖ وَأَمَّا مَا يَنفَعُ النَّاسَ فَيَمْكُثُ فِي
الْأَرْضِ ۚ
شارك المقال و
انفع به غيرك
المصدر
ليست هناك تعليقات