Редактирование данных

DataTable - это редактируемый компонент, т.е. пользователь может редактировать значения таблицы вручную.

Как правило, чтобы позволить пользователю редактировать значения таблицы, достаточно задать true параметру editable.

Сделать таблицу редактируемой

webix.ui({
    view: "datatable",
    editable:true,
    autoConfig:true // editor:"text" будет добавлен для каждой ячейки
});

Related sample:  Basic Use of Editors

После чего вы можете:

• выбрать редактор для каждого столбца
• определить действие, которое будет открывать редактор

Редакторы

В Webix есть 12 редакторов:

• text, inline-text, password;
• checkbox, inline-checkbox;
• select, combo, richselect;
• multiselect (только в Webix Pro);
• date;
• color;
• popup.

Подробнее о редакторах.

Чтобы добавить редактор для столбца, задайте атрибут editor параметра columns:

Указание редактора для столбца

columns: [
  { id:"title", header:"Film title", editor:"text" }
]

Related sample:  Basic Use of Editors

Создание своего редактора (общие рекомендации)

Чтобы создать свой редактор, используйте следующие методы:

• focus() - устанавливает фокус на контрол.
• getValue() - возвращает текущее значение контрола.
• setValue() - задает новое значение для компонента.
• render() - отрисовывает на экране компонент или его элемент.

webix.editors = {
    "myeditor": {
        focus: function () {/* ... */},
        getValue: function () {/* ... */},
        setValue: function (value) {/* ... */},
        render: function () {/* ... */}
    }
};

Внутренние свойства описанных методов:

• this.node - элемент HTML редактора. Появляется после вызова render();
• this.value - исходное значение инпута. Появляется после вызова setValue();
• this.config - конфигурация редактора;
• this.popup - ID попапа (используется для редакторов с выпадающими окнами).

После того как ваш редактор попал в коллекцию, вы можете установить его для столбца:

Добавление нового редактора и установка его для столбца

webix.ui({
    view: "datatable",
    columns: [
        { id: "title", header: "Film title", editor: "myeditor" }
    ]
});

Подробнее о пользовательских редакторах.

Задание действия открывающего редактор

Чтобы задать действие вызывающее редактор, используйте свойство editaction.

Действия по умолчанию

По умолчанию редактор открывается по клику. Чтобы переопределить это действие на двойной клик, установите значение dblclick свойству editaction:

Открыть редактор двойным кликом

webix.ui({
    view: "datatable",
    editable: true,
    editaction: "dblclick"
});

Пользовательские действия

Если вы хотите задать свое действие для открытия редактора, вам нужно полностью определить логику работы редактора (от начала до конца редактирования).

Открытие редактора по нажатию на кнопку:

1. Установите 'custom' для editaction.
2. Используйте миксин UIManager (метод addHotKey), чтобы добавить горячую клавишу и ее обработчик.

Открыть редактор нажатием на Enter

var mytable = webix.ui({
    view: "datatable",
    editable: true,
    editaction: "custom"
});
 
webix.UIManager.addHotKey("enter", function(view){
    var pos = view.getSelectedId();
    view.edit(pos);
}, mytable);

Related sample:  Basic Use of Editors

Открыть редактор определенным действием (события таблицы):

1. Установите 'custom' для editaction.
2. Обработайте событие (вы можете сделать это с помощью параметра on или метода the attachEvent).

Открыть редактор выделением ячейки

webix.ui({
    view: "datatable",
    editable:true,
    editaction: "custom",
    select: "cell",
    on:{
        onAfterSelect: function (data,prevent) {
            this.editCell(data.row, data.column);
        }
    }
});

Юзкейс: редактирование всей строки/столбца

Чтобы открыть все редакторы в указанной строке/столбце, сделайте следующее:

1. Установите 'custom' для editaction.
2. Используйте параметр on, чтобы указать действие и определить логику:
   • например, вы можете выбрать событие onItemClick;
   • методы editRow и editColumn открывают все редакторы указанной строки/столбца.

Открыть редактор для всех ячеек строки/столбца

// редактирование всей строки
var table1 = webix.ui({
    view: "datatable",
    editable: true,
    editaction: "custom",
    on: {
        onItemClick: function (id) {
            this.editRow(id);
        }
    }
});
 
// редактирование всего столбца
var table2 = webix.ui({
    view:"datatable",
    editable: true,
    editaction: "custom",
    on: {
        onItemClick: function(id){
            this.editColumn(id);
        }
    }
});

Related sample:  Opening Multiple Editors

Кроме редактирования строк и столбцов вы можете:

• открыть редактор в следующей ячейке строки (если она редактируема) с помощью метода editNext;
• переместить фокус на активный редактор (если такой есть) с помощью метода focusEditor;
• закрыть редактор без сохранения изменений с помощью метода editCancel;
• закрыть редактор и сохранить изменения с помощью метода editStop.

Редактирование с помощью связанной формы

Компоненты Webix могут быть связаны друг с другом для синхронного изменения их данных. Например, вы можете связать форму и таблицу, что позволит редактировать данные таблицы в форме:

• клик по строке таблицы спровоцирует заполнение формы соответствующими данными;
• после чего пользователь сможет отредактировать данные в форме;
• сохранение формы пошлет измененные данные назад в таблицу.

var form = $$("form1");
form.bind("datatable1");
//...после того как пользователь отредактировал данные
form.save();

Related sample:  Editors. Bind Form

Обратите внимание, что атрибут name полей формы должен совпадать с ID столбцов таблицы.

Подробнее о связывании компонентов.

Навигация по кнопке Tab

По умолчанию клавиша Tab (сочетание Tab+Shift)* позволяют переключаться между редакторами таблицы.

Как это работает:

• Нажмите Tab -> текущий редактор закроется и откроется следующий. Если текущий редактор последний в строке, будет открыт первый редактор в следующей строке.
• Нажмите Tab+Shift -> текущий редактор закроется и откроется предыдущий. Если текущий редактор первый в строке, будет открыт последний редактор в предыдущей строке.
• Ячейки без редактора игнорируются.
• Если редактор открывается в ячейке, которая в данный момент находится вне области просмотра, таблица прокрутится до местоположения этой ячейки.
• Если одновременно открыто несколько редакторов, навигация Tab/Tab+Shift будет работать для открытых редакторов.

Related sample:  Tab Navigation and Scrolling

Related sample:  Opening Multiple Editors

Туториалы Webix

Проверить свои знания по ссылке.

Наверх