عرض على GitHub

خيارات أعمدة Bootstrap Table

واجهة برمجة تطبيقات خيارات الأعمدة لـ 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

  • مثال: Card Visible

cellStyle

  • سمات: data-cell-style

  • النوع: Function

  • التفاصيل:

    دالة تنسيق نمط الخلية، تأخذ ثلاث معاملات:

    • value: قيمة الحقل.
    • row: بيانات سجل الصف.
    • index: فهرس الصف.

    يدعم الفئات أو css.

  • الافتراضي: undefined

  • مثال: نمط الخلية

checkbox

  • سمات: data-checkbox

  • النوع: Boolean

  • التفاصيل:

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

    إذا تم إعطاء قيمة، يتم تحديد المربع الإختيارى تلقائياً. من الممكن أيضًا تحديد/إلغاء تحديد المربع الإختيارى باستخدام صياغة (إرجاع true لتحديد، إرجاع false لإلغاء التحديد).

  • الافتراضي: false

  • مثال: Column Checkbox

checkboxEnabled

  • سمات: data-checkbox-enabled

  • النوع: Boolean

  • التفاصيل:

    قم بتعيين false لتعطيل مربعات الاختيار/صندوق الراديو.

  • الافتراضي: true

  • مثال: Checkbox Enabled and Checkbox Disabled

class

  • سمات: class | data-class

  • النوع: String

  • التفاصيل:

    اسم فئة العمود.

  • الافتراضي: undefined

  • مثال: Column Class

clickToSelect

  • سمات: data-click-to-select

  • النوع: Boolean

  • التفاصيل:

    قم بتعيين true لتحديد مربع الاختيار أو مربع الراديو عند النقر على الصفوف.

  • الافتراضي: true

  • مثال: Click To Select

colspan

  • سمات: colspan | data-colspan

  • النوع: Number

  • التفاصيل:

    указывает كم عمودًا يجب أن يشغلها الخلية.

  • الافتراضي: undefined

  • مثال: Rowspan Colspan

detailFormatter

  • سمات: data-detail-formatter

  • النوع: Function

  • التفاصيل:

    قم بتنسيق عرض التفاصيل الخاص بك عندما يتم تعيين detailView و detailViewByClick على true. إرجاع String وسوف يتم إلحاقها في خلية عرض التفاصيل، اختيارياً عرض العنصر مباشرةً باستخدام المعامل الثالث، وهو عنصر jQuery للخلية المستهدفة.

    الخيار البديل هو detail-formatter للجدول.

  • الافتراضي: function(index, row, $element) { return '' }

  • مثال: Detail Formatter

escape

  • سمات: data-escape

  • النوع: Boolean

  • التفاصيل:

    يقوم بتشفير سلسلة لإدخالها في HTML، باستبدال أحرف &، <، >، "، `، و '.

  • الافتراضي: undefined

  • مثال: Column Escape

events

  • سمات: data-events

  • النوع: Object

  • التفاصيل:

    مستمع أحداث الخلية، عندما تستخدم دالة التنسيق، تأخذ أربعة معاملات:

    • event: الحدث.
    • value: قيمة الحقل.
    • row: بيانات سجل الصف.
    • index: فهرس الصف.

    مثال代码:

    <th .. data-events="operateEvent">
var operateEvents = {
  'click .like': function (e, value, row, index) {}
}

  • الافتراضي: undefined

  • مثال: Column Events

falign

  • سمات: data-falign

  • النوع: String

  • التفاصيل:

    указывает كيفية محاذاة تذييل الجدول. يمكن استخدام 'left'، 'right'، 'center'.

  • الافتراضي: undefined

  • مثال: Aligning Footer

field

  • سمات: data-field

  • النوع: String

  • التفاصيل:

    اسم حقل العمود. يجب أن يكون هذا الحقل فريدًا، وإلا قد تحدث بعض المشاكل غير المعروفة.

  • الافتراضي: undefined

  • مثال: Column Field

footerFormatter

  • Attribute: data-footer-formatter

  • Type: Function

  • Detail:

    The context (this) is the column Object.

    The function, takes two parameters:

    • data: Array of all the data rows.
    • value: If footer data is set, the value of the footer column.

    The expected return data type is jQuery, String or HTMLElement. Other types will be forced to the String type.

    If you fetch data from a server and set the footer value from the server response, please use the footerField Option.

  • Default: undefined

  • Example: Footer Formatter

footerStyle

  • Attribute: data-footer-style

  • Type: Function

  • Detail:

    The footer style formatter function, takes one parameter:

    • column: the column object.

    Support classes or css. Example usage:

    function footerStyle(column) {
  return {
    css: { 'font-weight': 'normal' },
    classes: 'my-class'
  }
}

  • Default: {}

  • Example: Footer Style

formatter

  • Attribute: data-formatter

  • Type: Function

  • Detail:

    The context (this) is the column Object.

    The cell formatter function, take four parameters:

    • value: the field value.
    • row: the row record data.
    • index: the row index.
    • field: the row field.

    The expected return data type is jQuery, String or HTMLElement. Other types will be forced to the String type.

  • Default: undefined

  • Example: Column Formatter

halign

  • Attribute: data-halign

  • Type: String

  • Detail:

    Indicate how to align the table header. 'left', 'right', 'center' can be used.

  • Default: undefined

  • Example: Aligning Columns

order

  • Attribute: data-order

  • Type: String

  • Detail:

    The default sort order, can only be 'asc' or 'desc'.

  • Default: 'asc'

  • Example: Sort Name Order

radio

  • Attribute: data-radio

  • Type: Boolean

  • Detail:

    Set true to show a radio. The radio column has a fixed width.

    If a value is given, the checkbox is automatically checked. Its also possible to check/uncheck the radio by using a formatter (return true to check, return false to uncheck).

  • Default: false

  • Example: Column Radio

rowspan

  • Attribute: rowspan | data-rowspan

  • Type: Number

  • Detail:

    Indicate how many rows a cell should take up.

  • Default: undefined

  • Example: Rowspan Colspan

searchable

  • Attribute: data-searchable

  • Type: Boolean

  • Detail:

    Set true to search data for this column.

  • Default: true

  • Example: Column Searchable

searchFormatter

  • Attribute: data-search-formatter

  • Type: Boolean

  • Detail:

    Set true to search using formatted data.

  • Default: true

  • Example: Search Formatter

searchHighlightFormatter

showSelectTitle

  • Attribute: data-show-select-title

  • Type: Boolean

  • Detail:

    Set true to show the title of column with ‘radio’ or ‘singleSelect’ ‘checkbox’ option.

  • Default: false

  • Example: Show Select Title

sortable

  • Attribute: data-sortable

  • Type: Boolean

  • Detail:

    Set true to allow the column can be sorted.

  • Default: false

  • Example: Column Sortable

sorter

  • Attribute: data-sorter

  • Type: Function

  • Detail:

    The custom field sort function that is used to do local sorting, take four parameters:

    • fieldA: the first field value.
    • fieldB: the second field value.
    • rowA: the first row.
    • rowB: the second row.

    Expected return values: -1, 0, 1.

  • Default: undefined

  • Example: Column Sorter

sortName

  • Attribute: data-sort-name

  • Type: String

  • Detail:

    Provide a customizable sort-name, not the default sort-name in the header, or the field name of the column. For example, a column might display the value of fieldName of ‘html’ such as <b><span style="color:red">abc</span></b>, but a fieldName to sort is ‘content’ with the value of 'abc'.

  • Default: undefined

  • Example: Sort Name Order

switchable

  • Attribute: data-switchable

  • Type: Boolean

  • Detail:

    Set false to disable the switchable of columns item.

  • Default: true

  • Example: Column Switchable

switchableLabel

  • Attribute: data-switchable-label

  • Type: String

  • Detail:

    The label of the switchable column in the dropdown. If not specified uses the column title.

  • Default: undefined

  • Example: Column Switchable

title

  • Attribute: data-title

  • Type: String

  • Detail:

    The column title text.

  • Default: undefined

  • Example: Column Title

titleTooltip

  • Attribute: data-title-tooltip

  • Type: String

  • Detail:

    The column title tooltip text. The value of this option will also be applied to the HTML title attribute.

  • Default: undefined

  • Example: Title Tooltip

valign

  • Attribute: data-valign

  • Type: String

  • Detail:

    Indicate how to align the cell data. 'top', 'middle', 'bottom' can be used.

  • Default: undefined

  • Example: Aligning Columns

visible

  • Attribute: data-visible

  • Type: Boolean

  • Detail:

    Set false to hide the columns item.

  • Default: true

  • Example: Column Visible

width

  • Attribute: data-width

  • Type: Number

  • Detail:

    The width of the column. If not defined, the width will auto expand to fit its contents. Though if the table is left responsive and sized too small, this 'width' might be ignored (use min/max-width via class or such then). The default used unit is ‘px’. Use widthUnit to change it!

  • Default: undefined

  • Example: Column Width

widthUnit

  • Attribute: data-width-unit

  • Type: String

  • Detail:

    Defines the unit which is used for the option width.

  • Default: px

  • Example: Width Unit