gallery-quickedit Module
The QuickEdit plugin provides a new mode for DataTable where all
values in the table can be edited simultaneously, controlled by the
column configuration. Each editable cell contains an input field. If
the user decides to save the changes, then you can extract the changed
values by calling dt.qe.getChanges()
.
For a column to be editable in QuickEdit mode, the column
configuration must include quickEdit
. The contents of
this object define the column's behavior in QuickEdit mode.
To move up or down within a column while in QuickEdit mode, hold down the Ctrl key and press the up or down arrow.
If a column should not be editable, but needs to be formatted
differently in QuickEdit mode, then you must define qeFormatter in
the column configuration. This is simply a normal cell formatter
function that will be used in QuickEdit mode. The static functions
readonly*Formatter
provide examples.
The following configuration can be provided as part of quickEdit:
- changed
- Optional. The function to call with the old and new value. Should return true if the values are different.
- formatter
- The cell formatter which will render an appropriate form field: <input type="text">, <textarea>, or <select>.
- validation
- Validation configuration for every field in the column.
- copyDown
- If true, the top cell in the column will have a button to copy the value down to the rest of the rows.
The following configuration can be provided as part of quickEdit.validation:
- css
- CSS classes encoding basic validation rules:
yiv-required
- Value must not be empty.
yiv-length:[x,y]
- String must be at least x characters and at most y characters. At least one of x and y must be specified.
yiv-integer:[x,y]
- The integer value must be at least x and at most y. x and y are both optional.
yiv-decimal:[x,y]
- The decimal value must be at least x and at most y. Exponents are not allowed. x and y are both optional.
- fn
- A function that will be called with the DataTable as its scope and the cell's form element as the argument. Return true if the value is valid. Otherwise, call this.qe.displayMessage(...) to display an error and return false.
- msg
- A map of types to messages that will be displayed when a basic or regex validation rule fails. The valid types are: required, min_length, max_length, integer, decimal, and regex. There is no default for type regex, so you must specify a message if you configure a regex validation.
- regex
- Regular expression that the value must satisfy in order to be considered valid.
Custom QuickEdit Formatters
To write a custom cell formatter for QuickEdit mode, you must structure the function as follows:
function myQuickEditFormatter(o) { var markup = '<input type="text" class="{yiv} quickedit-field quickedit-key:{key}" value="{value}"/>' + '{cd}' + Y.Plugin.DataTableQuickEdit.error_display_markup; var qe = o.column.quickEdit; return Y.Lang.sub(markup, { key: o.column.key, value: o.value.toString().replace(/"/g, '"'), yiv: qe.validation ? (qe.validation.css || '') : '', cd: QuickEdit.copyDownFormatter.call(this, o) }); };
You can use textarea or select instead of input, but you can only create a single field.
extractMyEditableValue
does not have to be a separate
function. The work should normally be done inline in the formatter
function, but the name of the sample function makes the point clear.
This module provides the following classes: