Данный материал рассчитан на 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