مشاهده در GitHub

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

API گزینه‌های ستون Bootstrap Table.

در این صفحه

گزینه‌های ستون در jQuery.fn.bootstrapTable.columnDefaults تعریف شده‌اند.

توجه: نام‌های گزینه‌های زیر (به عنوان مثال، align، checkbox، class) نام‌های دقیق ویژگی‌هایی هستند که باید هنگام تعریف ستون‌ها در آرایه columns استفاده شوند.

برای مثال:

$('#table').bootstrapTable({
  columns: [
    {
      field: 'id',
      title: 'ID',
      align: 'center'
    }
  ]
})

align

  • ویژگی: data-align

  • نوع: String

  • جزئیات:

    نشان می‌دهد چگونه داده‌های ستون را برابری کن. 'left'، 'right'، 'center' قابل استفاده هستند.

  • پیش‌فرض: undefined

  • مثال: برابری ستون‌ها

cardVisible

  • ویژگی: data-card-visible

  • نوع: Boolean

  • جزئیات:

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

  • پیش‌فرض: true

  • مثال: قابل‌مشاهده کارت

cellStyle

  • ویژگی: data-cell-style

  • نوع: Function

  • جزئیات:

    تابع فرمت‌کننده استایل سلول، چهار پارامتر می‌گیرد:

    • value: مقدار فیلد.
    • row: داده رکورد ردیف.
    • index: شاخص ردیف.
    • field: فیلد ردیف.

    کلاس‌ها یا CSS را پشتیبانی می‌کند.

  • پیش‌فرض: undefined

  • مثال: استایل سلول

checkbox

  • ویژگی: data-checkbox

  • نوع: Boolean

  • جزئیات:

    برای نمایش یک چک‌باکس، true را تنظیم کن. ستون چک‌باکس عرض ثابتی دارد.

    اگر مقداری داده شود، چک‌باکس به طور خودکار بررسی می‌شود. همچنین می‌توان با استفاده از یک فرمت‌کننده چک‌باکس را بررسی/غیر‌بررسی کرد (برای بررسی true برمی‌گرداند، برای غیر‌بررسی false برمی‌گرداند).

  • پیش‌فرض: false

  • مثال: چک‌باکس ستون

checkboxEnabled

  • ویژگی: data-checkbox-enabled

  • نوع: Boolean

  • جزئیات:

    برای غیرفعال کردن چک‌باکس‌ها/صندوق‌های رادیویی، false را تنظیم کن.

  • پیش‌فرض: true

  • مثال: چک‌باکس فعال و چک‌باکس غیرفعال

class

  • ویژگی: class | data-class

  • نوع: String

  • جزئیات:

    نام کلاس ستون.

  • پیش‌فرض: undefined

  • مثال: کلاس ستون

clickToSelect

  • ویژگی: data-click-to-select

  • نوع: Boolean

  • جزئیات:

    برای انتخاب چک‌باکس یا صندوق رادیویی هنگام کلیک روی ردیف‌ها، true را تنظیم کن.

  • پیش‌فرض: true

  • مثال: کلیک برای انتخاب

colspan

  • ویژگی: colspan | data-colspan

  • نوع: Number

  • جزئیات:

    نشان می‌دهد یک سلول باید چند ستون را اشغال کند.

  • پیش‌فرض: undefined

  • مثال: Rowspan Colspan

detailFormatter

  • ویژگی: data-detail-formatter

  • نوع: Function

  • جزئیات:

    وقتی detailView و detailViewByClick روی true تنظیم شده باشند، نمای جزئیات را فرمت کنید. یک String برگردانید و آن به سلول نمای جزئیات اضافه خواهد شد، به صورت اختیاری عنصر را مستقیماً با استفاده از پارامتر سوم، که یک عنصر jQuery از سلول هدف است، رندر کنید.

    Fallback فرمت‌کننده جزئیات جدول است.

  • پیش‌فرض: function(index, row, $element) { return '' }

  • مثال: فرمت‌کننده جزئیات

escape

  • ویژگی: data-escape

  • نوع: Boolean

  • جزئیات:

    رشته‌ای را برای درج در HTML بیرون می‌آورد، کاراکترهای &، <، >، "، ` و ' را جایگزین می‌کند.

  • پیش‌فرض: undefined

  • مثال: بیرون‌آوردن ستون

events

  • ویژگی: data-events

  • نوع: Object

  • جزئیات:

    شنونده رویدادهای سلول، وقتی از تابع فرمت‌کننده استفاده می‌کنید، چهار پارامتر می‌گیرد:

    • event: رویداد.
    • value: مقدار فیلد.
    • row: داده رکورد ردیف.
    • index: شاخص ردیف.

    کد مثال:

    <th .. data-events="operateEvent">
    var operateEvents = {
      'click .like': function (e, value, row, index) {}
    }
  • پیش‌فرض: undefined

  • مثال: رویدادهای ستون

falign

  • ویژگی: data-falign

  • نوع: String

  • جزئیات:

    نشان می‌دهد چگونه فوتر جدول را برابری کن. 'left'، 'right'، 'center' قابل استفاده هستند.

  • پیش‌فرض: undefined

  • مثال: برابری فوتر

field

  • ویژگی: data-field

  • نوع: String

  • جزئیات:

    نام فیلد ستون. این فیلد باید منحصر به فرد باشد، در غیر این صورت مشکلات ناشناخته‌ای ممکن است رخ دهد.

  • پیش‌فرض: undefined

  • مثال: فیلد ستون

footerFormatter

  • ویژگی: data-footer-formatter

  • نوع: Function

  • جزئیات:

    زمینه (this) شیء ستون است.

    تابع، دو پارامتر می‌گیرد:

    • data: آرایه همه ردیف‌های داده.
    • value: اگر داده فوتر تنظیم شده باشد، مقدار ستون فوتر.

    نوع داده مورد انتظار بازگشتی jQuery، String یا HTMLElement است. انواع دیگر به نوع String اجباری تغییر می‌کنند.

    اگر داده‌ها را از سرور دریافت می‌کنید و مقدار فوتر را از پاسخ سرور تنظیم می‌کنید، لطفاً از گزینه footerField استفاده کنید.

  • پیش‌فرض: undefined

  • مثال: فرمت‌کننده فوتر

footerStyle

  • ویژگی: data-footer-style

  • نوع: Function

  • جزئیات:

    تابع فرمت‌کننده استایل فوتر، یک پارامتر می‌گیرد:

    • column: شیء ستون.

    classes یا css را پشتیبانی می‌کند. مثال استفاده:

    function footerStyle(column) {
      return {
        css: { 'font-weight': 'normal' },
        classes: 'my-class'
      }
    }
  • پیش‌فرض: {}

  • مثال: استایل فوتر

formatter

  • ویژگی: data-formatter

  • نوع: Function

  • جزئیات:

    زمینه (this) شیء ستون است.

    تابع فرمت‌کننده سلول، چهار پارامتر می‌گیرد:

    • value: مقدار فیلد.
    • row: داده رکورد ردیف.
    • index: شاخص ردیف.
    • field: فیلد ردیف.

    نوع داده مورد انتظار بازگشتی jQuery، String یا HTMLElement است. انواع دیگر به نوع String اجباری تغییر می‌کنند.

  • پیش‌فرض: undefined

  • مثال: فرمت‌کننده ستون

halign

  • ویژگی: data-halign

  • نوع: String

  • جزئیات:

    نشان می‌دهد چگونه سرستون جدول را برابری کن. 'left'، 'right'، 'center' قابل استفاده هستند.

  • پیش‌فرض: undefined

  • مثال: برابری ستون‌ها

order

  • ویژگی: data-order

  • نوع: String

  • جزئیات:

    مرتبه مرتب سازی پیش‌فرض، فقط می‌تواند 'asc' یا 'desc' باشد.

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

  • مثال: مرتبه نام مرتب سازی

radio

  • ویژگی: data-radio

  • نوع: Boolean

  • جزئیات:

    برای نمایش یک رادیو، true را تنظیم کن. ستون رادیو عرض ثابتی دارد.

    اگر مقداری داده شود، رادیو به طور خودکار بررسی می‌شود. همچنین می‌توان با استفاده از یک فرمت‌کننده رادیو را بررسی/غیر‌بررسی کرد (برای بررسی true برمی‌گرداند، برای غیر‌بررسی false برمی‌گرداند).

  • پیش‌فرض: false

  • مثال: رادیو ستون

rowspan

  • ویژگی: rowspan | data-rowspan

  • نوع: Number

  • جزئیات:

    نشان می‌دهد یک سلول باید چند ردیف را اشغال کند.

  • پیش‌فرض: undefined

  • مثال: Rowspan Colspan

searchable

  • ویژگی: data-searchable

  • نوع: Boolean

  • جزئیات:

    برای جستجو در داده‌های این ستون، true را تنظیم کن.

  • پیش‌فرض: true

  • مثال: قابل‌جستجو

searchFormatter

  • ویژگی: data-search-formatter

  • نوع: Boolean

  • جزئیات:

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

  • پیش‌فرض: true

  • مثال: فرمت‌کننده جستجو

searchHighlightFormatter

showSelectTitle

  • ویژگی: data-show-select-title

  • نوع: Boolean

  • جزئیات:

    برای نمایش عنوان ستون با گزینه ‘radio’ یا ‘singleSelect’ ‘checkbox’، true را تنظیم کن.

  • پیش‌فرض: false

  • مثال: نمایش عنوان انتخاب

sortable

  • ویژگی: data-sortable

  • نوع: Boolean

  • جزئیات:

    برای اجازه مرتب سازی ستون، true را تنظیم کن.

  • پیش‌فرض: false

  • مثال: ستون قابل‌مرتب سازی

sorter

  • ویژگی: data-sorter

  • نوع: Function

  • جزئیات:

    تابع مرتب سازی فیلد سفارشی که برای انجام مرتب سازی محلی استفاده می‌شود، چهار پارامتر می‌گیرد:

    • fieldA: اولین مقدار فیلد.
    • fieldB: دومین مقدار فیلد.
    • rowA: اولین ردیف.
    • rowB: دومین ردیف.

    مقادیر بازگشتی مورد انتظار: -1, 0, 1.

  • پیش‌فرض: undefined

  • مثال: مرتب‌کننده ستون

sortName

  • ویژگی: data-sort-name

  • نوع: String

  • جزئیات:

    یک نام مرتب سازی قابل سفارشی‌سازی ارائه دهید، نه نام مرتب سازی پیش‌فرض در سرستون، یا نام فیلد ستون. به عنوان مثال، یک ستون ممکن است مقدار fieldName ‘html’ مانند <b><span style="color:red">abc</span></b> را نمایش دهد، اما fieldName برای مرتب سازی ‘content’ با مقدار 'abc' است.

  • پیش‌فرض: undefined

  • مثال: مرتبه نام مرتب سازی

switchable

  • ویژگی: data-switchable

  • نوع: Boolean

  • جزئیات:

    برای غیرفعال کردن قابلیت سوئیچ آیتم‌های ستون‌ها، false را تنظیم کن.

  • پیش‌فرض: true

  • مثال: ستون قابل‌سوئیچ

switchableLabel

  • ویژگی: data-switchable-label

  • نوع: String

  • جزئیات:

    برچسب ستون قابل‌سوئیچ در منوی کشویی. اگر مشخص نشود، از عنوان ستون استفاده می‌شود.

  • پیش‌فرض: undefined

  • مثال: ستون قابل‌سوئیچ

title

  • ویژگی: data-title

  • نوع: String

  • جزئیات:

    متن عنوان ستون.

  • پیش‌فرض: undefined

  • مثال: عنوان ستون

titleTooltip

  • ویژگی: data-title-tooltip

  • نوع: String

  • جزئیات:

    متن راهنمای بالای عنوان ستون. مقدار این گزینه همچنین به ویژگی title HTML اعمال خواهد شد.

  • پیش‌فرض: undefined

  • مثال: راهنمای بالای عنوان

valign

  • ویژگی: data-valign

  • نوع: String

  • جزئیات:

    نشان می‌دهد چگونه داده‌های سلول را عمودی برابری کن. 'top'، 'middle'، 'bottom' قابل استفاده هستند.

  • پیش‌فرض: undefined

  • مثال: برابری عمودی

visible

  • ویژگی: data-visible

  • نوع: Boolean

  • جزئیات:

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

  • پیش‌فرض: true

  • مثال: ستون قابل‌مشاهده

width

  • ویژگی: data-width

  • نوع: Number

  • جزئیات:

    عرض ستون. اگر تعریف نشد، عرض به طور خودکار برای برازش محتویات آن گسترش می‌یابد. هر چند اگر جدول پاسخگو باقی بماند و اندازه آن خیلی کوچک باشد، این 'width' ممکن است نادیده گرفته شود (از min/max-width از طریق کلاس یا موارد مشابه استفاده کنید). واحد پیش‌فرض استفاده شده ‘px’ است. برای تغییر آن از widthUnit استفاده کنید!

  • پیش‌فرض: undefined

  • مثال: عرض ستون

widthUnit

  • ویژگی: data-width-unit

  • نوع: String

  • جزئیات:

    واحد را که برای گزینه width استفاده می‌شود تعریف می‌کند.

  • پیش‌فرض: px

  • مثال: واحد عرض