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

• ویژگی: data-filter-control

• نوع: Boolean

• جزئیات:

  برای اضافه کردن input یا select به ستون، روی true تنظیم کنید.

• پیش‌فرض: false

filterControlVisible

• ویژگی: data-filter-control-visible

• نوع: Boolean

• جزئیات:

  برای پنهان کردن کنترل‌های فیلتر، روی false تنظیم کنید.

• پیش‌فرض: true

alignmentSelectControlOptions

• ویژگی: data-alignment-select-control-options

• نوع: String

• جزئیات:

  برای تنظیم برابری گزینه‌های کنترل select، از left، right یا auto استفاده کنید.

• پیش‌فرض: undefined

filterControlContainer

• ویژگی: data-filter-control-container

• نوع: Selector

• جزئیات:

  برای مثال، روی #filter تنظیم کنید تا فیلتر ورودی سفارشی را در عنصر با شناسه filter مجاز کند. هر عنصر فیلتر (input یا select) باید دارای کلاس زیر باشد bootstrap-table-filter-control-<FieldName> (<FieldName> باید با نام تعریف شده Field جایگزین شود).

• پیش‌فرض: false

filterDataCollector

• ویژگی: data-filter-data-collector

• نوع: Function

• جزئیات:

  داده‌هایی که به فیلتر select اضافه خواهد شد را جمع‌آوری می‌کند، تا از طریق برچسب‌هایی که با کاما جدا شده و با formatter نمایش داده می‌شوند، فیلتر کند.

• پیش‌فرض: undefined

filterControlMultipleSearch

• ویژگی: data-filter-control-multiple-search

• نوع: bool

• جزئیات:

  برای اجازه جستجو چند مقدار همزمان، روی true تنظیم کنید. مقادیر با جداکننده ای تقسیم خواهد شد، گزینه filterControlMultipleSearchDelimiter را ببینید.

• پیش‌فرض: false

filterControlMultipleSearchDelimiter

• ویژگی: data-filter-control-multiple-search-delimiter

• نوع: String

• جزئیات:

  جداکننده را که برای تقسیم مقادیر جستجو در گزینه filterControlMultipleSearchDelimiter استفاده خواهد شد، تعریف می‌کند.

• پیش‌فرض: ,

filterControlSearchClear

• ویژگی: data-filter-control-search-clear

• نوع: bool

• جزئیات:

  برای پاک کردن فیلترهای کنترل فیلتر با استفاده از گزینه جدول showSearchButton، روی true تنظیم کنید.

• پیش‌فرض: true

searchOnEnterKey

• ویژگی: data-search-on-enter-key

• نوع: Boolean

• جزئیات:

  برای فعال کردن عملیات جستجو هنگامی که کاربر کلید enter را فشار می‌دهد، روی true تنظیم کنید.

• پیش‌فرض: false

showFilterControlSwitch

• ویژگی: data-show-filter-control-switch

• نوع: Boolean

• جزئیات:

  برای نمایش دکمه سوئیچ کنترل فیلتر، روی true تنظیم کنید.

• پیش‌فرض: false

sortSelectOptions

• ویژگی: data-sort-select-options

• نوع: Boolean

• جزئیات:

  برای مرتب‌سازی عناصر گزینه کنترل select، روی true تنظیم کنید.

• پیش‌فرض: false

گزینه‌های ستون

filterControl

• ویژگی: data-filter-control

• نوع: String

• جزئیات:

  input تنظیم کنید: کنترل input نمایش داده شود، select: کنترل select نمایش داده شود، datepicker: کنترل datepicker HTML5 نمایش داده شود.

• پیش‌فرض: undefined

filterControlPlaceholder

• ویژگی: data-filter-control-placeholder

• نوع: String

• جزئیات:

  این را تنظیم کنید تا فقط در کنترل فیلتر input، یک placeholder نمایش داده شود.

• پیش‌فرض: ''

filterCustomSearch

• ویژگی: data-filter-custom-search

• نوع: function

• جزئیات:

  تابع جستجو سفارشی به جای تابع جستجو داخلی اجرا می‌شود و چهار پارامتر می‌گیرد:

  • text: متن جستجو.
  • value: مقدار ستون برای مقایسه.
  • field: نام فیلد ستون.
  • data: داده‌های جدول.

  برای فیلتر کردن ستون/ردیف جاری، false برگردانید. برای عدم فیلتر کردن ستون/ردیف جاری، true برگردانید. برایرد کردن جستجو سفارشی برای مقدار جاری، null برگردانید.

• پیش‌فرض: undefined

filterData

• ویژگی: data-filter-data

• نوع: String

• جزئیات:

  مقادیر فیلتر select سفارشی را تنظیم کنید، از موارد زیر استفاده کنید: var:variable برای بارگذاری از متغیر obj:variable.key برای بارگذاری از شیء url:http://www.example.com/data.json برای بارگذاری از فایل JSON راه دور json:{key:data} برای بارگذاری از رشته JSON. func:functionName برای بارگذاری از تابع.

• پیش‌فرض: undefined

filterDatepickerOptions

• ویژگی: data-filter-datepicker-options

• نوع: Object

• جزئیات:

  اگر گزینه datepicker تنظیم شده باشد، از این گزینه برای پیکربندی datepicker با گزینه‌های اصلی استفاده کنید. از این روش استفاده کنید: data-filter-datepicker-options='{"max":value1, "min": value2, "step": value3}'. برای اطلاعات بیشتر به این مستندات مراجعه کنید

• پیش‌فرض: undefined

filterDefault

• ویژگی: data-filter-default

• نوع: String

• جزئیات:

  مقدار پیش‌فرض فیلتر را تنظیم کنید.

• پیش‌فرض: undefined

filterOrderBy

• ویژگی: data-filter-order-by

• نوع: String

• جزئیات:

  این را تنظیم کنید تا گزینه‌ها را در کنترل select مرتب کند، چه به صورت صعودی ('asc')، نزولی ('desc') یا به ترتیب ارائه شده توسط سرور ('server').

• پیش‌فرض: 'asc'

filterStartsWithSearch

• ویژگی: data-filter-starts-with-search

• نوع: Boolean

• جزئیات:

  اگر می‌خواهید از حالت جستجو شروع با استفاده کنید، روی true تنظیم کنید.

• پیش‌فرض: false

filterStrictSearch

• ویژگی: data-filter-strict-search

• نوع: Boolean

• جزئیات:

  اگر می‌خواهید از حالت جستجو دقیق استفاده کنید، روی true تنظیم کنید.

• پیش‌فرض: false

آیکون‌ها

• 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

• نوع: Function

• پیش‌فرض: function () { return "پاک کردن فیلترها" }

formatFilterControlSwitch

• نوع: Function

• پیش‌فرض: function () { return "پنهان کردن/نمایش کنترل‌ها" }

formatFilterControlSwitchHide

• نوع: Function

• پیش‌فرض: function () { return "پنهان کردن کنترل‌ها" }

formatFilterControlSwitchShow

• نوع: Function

• پیش‌فرض: function () { return "نمایش کنترل‌ها" }