KingTable
1.0.0
مكتبة للجداول الإدارية القادرة على بناء نفسها على أساس البيانات المدخلة الخاصة بها. يدعم ترقيم الصفحات من جانب العميل والخادم؛ البحث من جانب العميل والخادم؛ طرق عرض المرشحات المخصصة؛ القائمة التلقائية لإخفاء الأعمدة ودعم الأدوات المخصصة. ميزة التصدير من جانب العميل إلى تنسيقات: csv، وjson، وxml، وExcel xlsx (باستخدام البرنامج المساعد).
العروض التوضيحية التالية متاحة على الإنترنت:
لاحظ كيف تستمر عوامل التصفية تلقائيًا عند تحديث الصفحة. على سبيل المثال، استخدام ميزة البحث أو تغيير الصفحة في أحد العروض التوضيحية الغنية بتنسيق HTML، ثم الضغط على F5. عند البحث، لاحظ كيف تقوم خوارزمية البحث من جانب العميل أيضًا بفرز النتائج حسب الصلة (عدد التكرارات، ترتيب الخصائص التي تولد التطابق).
ملحوظة: كل هذه العروض التوضيحية عبارة عن جداول ثابتة : الجداول التي تحتوي على جميع المعلومات المحملة في الذاكرة، والمقسمة إلى صفحات والمفلترة من جانب العميل. لرؤية أمثلة على الجداول المقسمة باستخدام طلبات AJAX (على جانب الخادم)، راجع الوثائق المخصصة وخادم التطوير المتوفر في المستودع.
يمكن تثبيت مكتبة KingTable باستخدام npm.
npm install kingtableيمكن بعد ذلك استيراد الوحدات باستخدام بناء جملة CommonJS:
var KingTable = require ( "kingtable" )
var KingTableUtils = require ( "kingtable/utils" )أو بناء جملة الاستيراد ES6:
import KingTable from "kingtable"
import KingTableUtils from "kingtable/utils" يمكن استخدام مكتبة KingTable لتنزيل واستخدام ملفات التوزيع في مجلد dist .
< script src =" kingtable.js " > </ script > الإصدار السابق من مكتبة KingTable متاح على: https://github.com/RobertoPrevato/jQuery-KingTable.
الرجوع إلى صفحة ويكي. تتوفر قائمة كاملة بالخيارات الممكنة داخل صفحة الخيارات المخصصة.
فيما يلي جدول يسرد الميزات التي تمت إضافتها إلى KingTable 2.0.
| ميزة | وصف |
|---|---|
| كود المصدر ES6 | كود المصدر ES6، يتم نقل المكتبة إلى ES5 للتوزيع. |
| تم اختبار الكود المصدري للوحدة | تم دمج كود المصدر مع مهام Gulp وKarma وJasmine لاختبارات الوحدة. أكثر من 300 اختبار - لا يزال في طور النمو! |
| تمت إزالة التبعيات | تمت إزالة التبعية من jQuery وLodash وI.js وR.js. |
| تحسين الاستثناءات | تتضمن الاستثناءات المثارة رابطًا إلى GitHub wiki مع تعليمات مفصلة. |
| تحسين المنطق لجلب البيانات | يسمح بالاختيار بين طريقة HTTP GET (المرشحات في سلسلة الاستعلام) أو طريقة HTTP POST (المرشحات كبيانات JSON POST). |
| ذاكرة التخزين المؤقت LRU | آلية التخزين المؤقت الأقل استخدامًا مؤخرًا لتخزين آخر عدد من الصفحات حسب المرشحات، لتقليل عدد طلبات AJAX. |
| منطق جلب بيانات الجدول | يسمح بتحديد الوظائف التي تُرجع البيانات المطلوبة لعرض الجدول نفسه (على سبيل المثال، قواميس طرق عرض عوامل التصفية المخصصة) |
| التخزين المؤقت للمرشحات | يتم تخزين عوامل التصفية لكل جدول مؤقتًا باستخدام وحدة تخزين من جانب العميل (قابلة للتكوين)، بحيث تستمر عند تحديث الصفحة. |
| تحسين فرز CS | السلاسل التي يمكن فرزها مثل الأرقام (مثل "25%"، "25.40 EUR"، "217°") يتم تحليلها تلقائيًا كأرقام عند الفرز. |
| تحسين فرز CS | الفرز من جانب العميل حسب خصائص متعددة. |
| تحسين بحث CS | تم تحسين ميزة البحث من جانب العميل: يعمل البحث في تمثيلات السلاسل المعتمدة على الثقافة للتواريخ والأرقام والسلاسل المنسقة الأخرى. |
| تحسين الدعم لمعالجات الأحداث | تتلقى معالجات الأحداث المخصصة تلقائيًا العنصر الذي تم النقر عليه كمعلمة، إن أمكن. |
| تحسين الدعم للأزرار المخصصة | أصبح من الممكن الآن تكوين حقول إضافية (مثل الأزرار) ليتم عرضها لكل عنصر. |
| تحسين الدعم للوسائط الأخرى | دعم تطبيقات وحدة تحكم NodeJS وعرض جداول HTML لنصوص البريد الإلكتروني المرسلة باستخدام NodeJS. |
تنفذ مكتبة KingTable وضعين للعمل:
ويدعم كلا من المجموعات المحسنة والبسيطة. ارجع إلى صفحة الويكي المخصصة لمزيد من المعلومات.
يعرض الجدول الثابت مجموعة لا تتطلب ترقيم الصفحات من جانب الخادم، ولكن قد تظل تستفيد من ترقيم الصفحات من جانب العميل. عند العمل على التطبيقات، يحدث عادةً التعامل مع مجموعات ليس من المفترض أن تنمو بمرور الوقت، وتكون ذات حجم صغير. على سبيل المثال، جدول الفئات في موقع التجارة الإلكترونية لبيع الملابس، أو جدول أدوار المستخدمين في معظم التطبيقات. في هذه الحالات، يكون من المنطقي إعادة المجموعات الكاملة إلى العملاء. هناك طريقتان لتحديد KingTable ثابت:
var table = new KingTable ( {
data : [ { ... } , { ... } , { ... } ]
} ) ;
//or... code the server side to return an array of items (instead of an object describing a paginated set of results)
var table = new KingTable ( {
element : document . getElementById ( "my-table" ) ,
url : "/api/categories"
} ) ;تقوم الجداول الثابتة بإجراء البحث وترقيم الصفحات من جانب العميل.
الجدول العادي هو الذي يعرض مجموعة تتطلب ترقيم الصفحات من جانب الخادم، لأنه من المفترض أن ينمو بمرور الوقت. وينطبق هذا في معظم الحالات، على سبيل المثال، جداول المنتجات والعملاء في موقع التجارة الإلكترونية.
var table = new KingTable ( {
url : "/api/profiles"
} ) ;عند تلقي استجابة AJAX، يتوقع الجدول العادي أن يتلقى البنية التالية:
{
subset : [ array ] , // array of items that respect the given filters
total : [ number ] // the total count of items that respect the given filters; excluding the pagination: for example 13000
} تتضمن مكتبة KingTable عددًا من الميزات لتحسين سهولة الاستخدام، سواء بالنسبة للمستخدم النهائي أو للمبرمجين الذين يستخدمون المكتبة:
sessionStorage القابل للتكوين أو localStorage أو كائن متوافق) وتستمر عند تحديث الصفحة - يتم جمع المرشحات عن طريق عنوان URL، وإذا أمكن، معرف الجدوللمزيد من المعلومات، راجع صفحة الويكي المخصصة.
للحصول على معلومات كاملة، راجع صفحة الويكي المخصصة. تتضمن مكتبة KingTable منطقًا لتنفيذ الترجمة من جانب العميل، والذي يُستخدم لعرض الأسماء الصحيحة للأزرار (التحديث، رقم الصفحة، النتائج لكل صفحة، وما إلى ذلك).
يرجى الرجوع إلى صفحة wiki المخصصة للحصول على إرشادات حول كيفية التكامل مع مشروعك ومع التعليمات البرمجية من جانب الخادم.
