datatable - 呈现一个可编辑的记录表格,以网格形式格式化。单元格内容可以直接在网格中编辑,以便管理多行多列的信息。
data:
type: datatable
adding: true
deleting: true
columns: []
recordsPerPage: false
searching: false为了将其与模型一起使用,该字段应定义在 jsonable 属性 或任何可以处理存储为数组的内容中。
以下 字段属性 受支持且常用。
| Property | Description |
|---|---|
| label | a name when displaying the form field to the user. |
| default | specifies a default string value, optional. |
| comment | places a descriptive comment below the field. |
| adding | allow records to be added to the data table. Default: true. |
| btnAddRowLabel | defines a custom label for the "Add Row Above" button. |
| btnAddRowBelowLabel | defines a custom label for the "Add Row Below" button. |
| btnDeleteRowLabel | defines a custom label for the "Delete Row" button. |
| columns | an array representing the column configuration of the data table. See the Column configuration section below. |
| deleting | allow records to be deleted from the data table. Default: true. |
| dynamicHeight | if true, the data table's height will extend or shrink depending on the records added, up to the maximum size defined by the height configuration value. Default: false. |
| fieldName | defines a custom field name to use in the POST data sent from the data table. Leave blank to use the default field alias. |
| height | the data table's height, in pixels. If set to false, the data table will stretch to fit the field container. |
| keyFrom | the data attribute to use for keying each record. This should usually be set to id. Only supports integer values. |
| postbackHandlerName | specifies the AJAX handler name in which the data table content will be sent with. When set to null (default), the handler name will be auto-detected from the request name used by the form which contains the data table. It is recommended to keep this as null. |
| recordsPerPage | the number of records to show per page. If set to false, the pagination will be disabled. |
| searching | allow records to be searched via a search box. Default: false. |
| toolbar | an array representing the toolbar configuration of the data table. |
数据表组件允许通过 columns 配置变量将列指定为数组。每列应使用字段名作为键,以及以下配置变量来设置字段。
示例:
columns:
id:
type: string
title: ID
validation:
integer:
message: Please enter a number
name:
type: string
title: Name| Option | Description |
|---|---|
| type | the input type for this column's cells. Must be one of the following: string, checkbox, dropdown or autocomplete. |
| options | used only for dropdown and autocomplete columns. The array key defines the option value, and the array value defines the option label. See the AJAX Handlers section below. |
| readOnly | whether this column is read-only. Default: false. |
| title | defines the column's title. |
| validation | an array specifying the validation for the content of the column's cells. See the Column validation section below. |
| width | defines the width of the column, in pixels. |
列单元格可以根据以下验证类型进行验证。验证应指定为一个数组,其中验证类型用作键,并将可选消息指定为该验证的 message attrbute。
| Validation | Description |
|---|---|
| float | Validates the data as a float. An optional boolean allowNegative attribute can be provided, allowing for negative float numbers. |
| integer | Validates the data as an integer. An optional boolean allowNegative attribute can be provided, allowing for negative integers. |
| length | Validates the data to be of a certain length. An integer min and max attribute must be provided, representing the minimum and maximum number of characters that must be entered. |
| regex | Validates the data against a regular expression. A string pattern attribute must be provided, defining the regular expression to test the data against. |
| required | Validates that the data must be entered before saving. |
对于类型为 dropdown 或 autocomplete 的列,可用选项列表可以通过模型中定义的 AJAX 处理程序提供。
处理程序必须遵循命名约定 getFieldNameDataTableOptions(),其中 FieldName 匹配在表单配置中定义的字段名称。
该方法应返回一个关联数组,其中数组键用作存储值,而数组值用作数据表中的显示标签。
举例来说,对于名为 country 的字段,会使用 getCountryDataTableOptions.
public function getCountryDataTableOptions()
{
return Country::pluck('name', 'code')->all();
}这将自动填充 DataTable 中 country 字段的选项。