Bootstrap Table Filter Control

امتداد Filter Control للجدول في Bootstrap Table.

الاستخدام

<link rel="stylesheet" type="text/css" href="extensions/filter-control/bootstrap-table-filter-control.css">
<script src="extensions/filter-control/bootstrap-table-filter-control.js"></script>

المثال

Filter Control

الخيارات

filterControl

• Attribute: data-filter-control

• type: Boolean

• Detail:

  قم بتعيينها إلى true لإضافة input أو select إلى العمود.

• Default: false

filterControlVisible

• Attribute: data-filter-control-visible

• type: Boolean

• Detail:

  قم بتعيينها إلى false لإخفاء عناصر التحكم في التصفية.

• Default: true

alignmentSelectControlOptions

• Attribute: data-alignment-select-control-options

• type: String

• Detail:

  تعيين محاذاة خيارات عنصر التحكم في الاختيار. استخدم left، right أو auto.

• Default: undefined

filterControlContainer

• Attribute: data-filter-control-container

• type: Selector

• Detail:

  قم بتعيينها إلى مثلاً #filter للسماح بتصفية إدخال مخصصة في عنصر بهذا المعرف filter. يجب أن يكون لكل عنصر تصفية (input أو select) الفئة التالية bootstrap-table-filter-control-<FieldName> (<FieldName> يجب استبداله باسم Field المحدد).

• Default: false

filterDataCollector

• Attribute: data-filter-data-collector

• type: Function

• Detail:

  جمع البيانات التي سيتم إضافتها إلى تصفية الاختيار، للتصفية من خلال على سبيل المثال التسميات المفصولة بفواصل وعرضها مع منشئ تنسيق.

• Default: undefined

filterControlMultipleSearch

• Attribute: data-filter-control-multiple-search

• type: bool

• Detail:

  قم بتعيينها إلى true للسماح بالبحث عن多个 قيم في وقت واحد. سيتم تقسيم القيم بفاصل، راجع خيار filterControlMultipleSearchDelimiter.

• Default: false

filterControlMultipleSearchDelimiter

• Attribute: data-filter-control-multiple-search-delimiter

• type: String

• Detail:

  يحدد الفاصل الذي سيستخدم لتقسيم قيم البحث في خيار filterControlMultipleSearchDelimiter.

• Default: ,

filterControlSearchClear

• Attribute: data-filter-control-search-clear

• type: bool

• Detail:

  قم بتعيينها إلى true لمسح عناصر التصفية في عناصر التحكم في التصفية باستخدام خيار الجدول showSearchButton.

• Default: true

searchOnEnterKey

• Attribute: data-search-on-enter-key

• type: Boolean

• Detail:

  قم بتعيينها إلى true لإطلاق إجراء البحث عندما يضغط المستخدم على مفتاح الإدخال.

• Default: false

showFilterControlSwitch

• Attribute: data-show-filter-control-switch

• type: Boolean

• Detail:

  قم بتعيينها إلى true لعرض زر تبديل عناصر التحكم في التصفية.

• Default: false

sortSelectOptions

• Attribute: data-sort-select-options

• type: Boolean

• Detail:

  قم بتعيينها إلى true لترتيب عناصر خيار عنصر التحكم في الاختيار.

• Default: false

خيارات العمود

filterControl

• Attribute: data-filter-control

• type: String

• Detail:

  قم بتعيين input: لعرض عنصر تحكم إدخال، select: لعرض عنصر تحكم اختيار، datepicker: لعرض عنصر تحكم منتقي التاريخ html5.

• Default: undefined

filterControlPlaceholder

• attribute: data-filter-control-placeholder

• type: String

• Detail:

  قم بتعيين هذا لعرض نص بديل فقط في عنصر تحكم تصفية الإدخال.

• Default: ''

filterCustomSearch

• Attribute: data-filter-custom-search

• type: function

• Detail:

  يتم تنفيذ دالة البحث المخصصة بدلاً من دالة البحث المضمنة وتستقبل أربعة معاملات:

  • text: نص البحث.
  • value: قيمة العمود للمقارنة.
  • field: اسم حقل العمود.
  • data: بيانات الجدول.

  قم بإرجاع false لتصفية العمود/الصف الحالي. قم بإرجاع true لعدم تصفية العمود/الصف الحالي. قم بإرجاع null لتخطي البحث المخصص لقيمة الحالية.

• Default: undefined

filterData

• Attribute: data-filter-data

• type: String

• Detail:

  قم بتعيين قيم تصفية اختيار مخصصة، استخدم var:variable لتحميل من متغير obj:variable.key لتحميل من كائن url:http://www.example.com/data.json لتحميل من ملف JSON عن بعد json:{key:data} لتحميل من سلسلة JSON. func:functionName لتحميل من دالة.

• Default: undefined

filterDatepickerOptions

• Attribute: data-filter-datepicker-options

• type: Object

• Detail:

  إذا تم تعيين خيار منتقي التاريخ، استخدم هذا الخيار لتكوين منتقي التاريخ بالخصائص الأصلية. استخدم هذا المطريقة: data-filter-datepicker-options='{"max":value1, "min": value2, "step": value3}'. للحصول على مزيد من المعلومات، قم بزيارة هذه التوثيق

• Default: undefined

filterDefault

• Attribute: data-filter-default

• type: String

• Detail:

  قم بتعيين القيمة الافتراضية للتصفية.

• Default: undefined

filterOrderBy

• attribute: data-filter-order-by

• type: String

• Detail:

  قم بتعيين هذا لترتيب الخيارات في عنصر تحكم اختيار سواء تصاعدياً ('asc')، تنازلياً ('desc') أو بالترتيب المقدم من الخادم ('server').

• Default: 'asc'

filterStartsWithSearch

• attribute: data-filter-starts-with-search

• type: Boolean

• Detail:

  قم بتعيينها إلى true إذا كنت تريد استخدام وضع البحث بالبداية.

• Default: false

filterStrictSearch

• Attribute: data-filter-strict-search

• type: Boolean

• Detail:

  قم بتعيينها إلى true إذا كنت تريد استخدام وضع البحث الصارم.

• Default: false

Icons

• clear: 'glyphicon-trash icon-clear'
• filterControlSwitchHide: 'glyphicon-zoom-out icon-zoom-out'
• filterControlSwitchShow: 'glyphicon-zoom-in icon-zoom-in'

الأحداث

onColumnSearch(column-search.bs.table)

• ينطلق عندما نبحث في بيانات العمود

onCreatedControls(created-controls.bs.table)

• ينطلق عندما يتم إنشاء عناصر التحكم في التصفية

الطرق

triggerSearch

• إطلاق إجراء البحث يدويًا

clearFilterControl

• مسح جميع عناصر التحكم المضافة بواسطة هذا المكون الإضافي (مماثل لخيار showSearchClearButton).

toggleFilterControl

• يقلب رؤية (عرض/إخفاء) عناصر التحكم في التصفية.

الترجمات

formatClearFilters

• type: Function

• Default: function () { return "Clear Filters" }

formatFilterControlSwitch

• type: Function

• Default: function () { return "Hide/Show controls" }

formatFilterControlSwitchHide

• type: Function

• Default: function () { return "Hide controls" }

formatFilterControlSwitchShow

• type: Function

• Default: function () { return "Show controls" }