Данный материал рассчитан на ember-models-table
версии 2.3.0
и выше.
Редактирование данных
Редактирование данных в таблице подразумевает, что в какой-то момент вместо данных в ячейках появляются поля ввода с текущими значениями, а пользователю дается возможность их поменять и сохранить (или отменить) свои изменения.
Для перевода строки таблицы в режим редактирования у ember-models-table
есть Компонент models-table/cell-edit-toggle
. В нем выводится кнопка «Edit», а после клика по ней — две кнопки «Save» и «Cancel». Такой Компонент можно разместить в последнем столбце таблицы:
1 2 3 4 5 6 7 8 | columns = [ {/* ... */}, { title: "Edit", component: "edit-row", editable: false } ]; |
Далее, используя columnComponents
указываем, что такое edit-row
:
1 2 3 4 5 6 7 8 9 10 11 | {{models-table data=model columns=columns columnComponents=(hash edit-row=(component "models-table/cell-edit-toggle" saveRowAction=(action "onSaveRow") cancelRowAction=(action "onCancelRow") ) ) }} |
Передача обработчиков событий onSaveRow
и onCancelRow
является обязательной. Они вызываются при сохранении измененной строки таблицы (нажатие кнопки «Save» у cell-edit-toggle
) и их отмене соответственно (нажатие кнопки «Cancel» у того-же Компонента). Они могут возвращать как Promise
(например, результат выполнения record.save()
) или же «обычное» значение:
1 2 3 4 5 6 7 8 9 10 11 12 | Controller.extend({ actions: { onSaveRow(param) { return param.record.save(); }, onCancelRow({record}) { record.rollbackAttributes(); return true; } } }); |
Каждый из этих методов получает один параметр — объект с полем record
(это редактируемая в данный момент строка).
По умолчанию все колонки таблицы являются редактируемыми. Для колонок, которые такими быть не должны, надо указать свойство editable
со значением false
.
В режиме редактирования в ячейке отрисовывается Компонент models-table/cell-content-edit
. Он выводит обычное поле ввода (input
), значение которого связано с определенным полем строки таблицы ({{get record column.propertyName}}
). Этот Компонент хорош в простых случаях. Но как быть, если надо вывести список допустимых значений или какой-либо другой элемент ввода (например, color-picker)? В таких случаях вам придется создать свой собственный Компонент. Как бы сложно он не выглядел, задача у него только одна — изменить значение определенного поля строки таблицы.
В свойстве componentForEdit
колонки указывается имя Компонента, который будет отрисован в ячейке, когда ее строка будет в режиме редактирования. Как и «обычный» component
ячейки, componentForEdit
может быть задан в columnComponents
:
1 2 3 4 5 6 | columns= [ { propertyName: 'date', componentForEdit: 'date-edit' } ]; |
1 2 3 4 5 6 7 8 9 10 11 | {{models-table data=model columns=columns columnComponents=(hash date-edit=(component "date-edit" extraData=extraData extraAction=(action "extraAction") ) ) }} |
Редактирование данных в таблице — это не очень сложный процесс, однако вам может понадобиться большое количество маленьких Компонентов. В самом «плохом» случае — отдельный Компонент на каждую колонку.
Агрегативные данные
С самой первой версии ember-models-table
в его таблицах tfoot
либо не использовался вообще, либо был пустым. Только с текущей версии (2.3.0) от него пошла какая-то польза. И так, теперь tfoot
будет содержать одну строчку, если хотя бы для одной колонки указано свойство componentForFooterCell
. В нем должно быть имя Компонента, который будет отрисован в качестве ячейки (не внутри ячейки, а как сама ячейка). То есть, тэг этого Компонента должен быть td
.
В ember-models-table
добавлен Компонент models-table/cell-column-summary
с рядом предопределенных свойств:
- mappedData
- mappedExpandedItems
- mappedSelectedItems
Каждое из них является результатом выполнения mapBy
по data
, expandedItems
и selectedItems
. В качестве имени свойства, значения которого берутся, выступает column.propertyName
.
Использовать данный Компонент в виде componentForFooterCell
нет смысла, так как его Шаблон практически пустой. Куда лучше сделать дочерний Компонент:
1 2 3 | import CellColumnSummary from './models-table/cell-column-summary'; export default CellColumnSummary.extend({ }); |
На основе трех вышеуказанных свойств высчитываются еще несколько, а именно — минимальное, максимальное, среднее значение и сумма для mappedData
и mappedSelectedItems
(а вот mappedExpandedItems
остались не у дел). Смысл в этих значениях есть только в случае, когда в колонке выводятся числа.
Как обычно, демка с новым функционалом есть на ember-twiddle — Inline edit and columns summary. В одном большом примере показано следующее:
- Использование Компонента
models-table/cell-edit-toggle
- Использование собственных Компонентов для редактирования данных в ячейках
- Использование предопреленных агрегативных данных
- Объявление собственных агрегативных данных
addon, ember, emberModelsTable, table
Советы и приемы по работе с ember-models-table
- Переход с первой версии ember-models-table на вторую
- Темизация в ember-models-table 2.x
- Использование вложенных таблиц ember-models-table
- Дополнительные запросы при загрузке данных для models-table-server-paginated
- Синхронизация состояния таблицы с параметрами запроса страницы
- Группировка строк в таблицах
- Редактирование данных в таблице и немного агрегативки
- Навигация с использованием клавиатуры в ember-models-table
- Асинхронная загрузка опций для фильтров в ember-models-table
- Контекстное меню для ember-models-table
Оставить комментарий