Intermediate

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

У всех компонентов схожий шаблон редактирования, однако есть некие особенности. Поэтому можно выделить две основные группы:

Редактирование Datatable и Treetable
Редактирование других UI компонентов

В конструкторе компонента есть набор свойств, который даёт возможность динамического редактирования. Также программное редактирование имеет место быть.

Что необходимо сделать: - свойству editable укажите значение true; - определите тип editor; - укажите editaction (одинарный/двойной щелчок мыши, или при нажатии на клавишу).

В случае с datatable необходимо добавить свойство editor объекту столбца.

Редакторы описаны здесь.

Редактирование в Datatable и Treetable

По умолчанию только у datatable и treetable есть встроенные редакторы.

Свойства Editable и editaction включены в объект конструктора, а свойство editor указывается отдельно для каждого столбца.

webix.ready(function(){
    webix.ui({
    view:"datatable",
    columns:[
        { id:"rank", editor:"text", header:""},
        // другие столбцы
    ],  
    editable:true,
    editaction:"click",
    data: small_wide_film_set // данные из внешнего файла
});

Редактирование других UI компонентов

Чтобы обеспечить возможность редактирования других UI компонентов, вам необходимо создать объект прототипа на их основе и расширить их возможностью редактирования. После чего им будет доступно редактирование.

Например, для редактирования списка, создайте прототип с возможностью редактирования и присвойте ему любое имя:

webix.protoUI({
    name:"editlist" // или "edittree", "dataview-edit". если вы работаете с ними
}, webix.EditAbility, webix.ui.list);

После этого инициализируйте объект списка. Обратите внимание, что компонент называется "editlist" вместо "list", т.к. это имя нового объекта из примера выше:

webix.ui({
    container:"listA",
    view:"editlist",
    template:"#rank#. #title#",
    editable:true,
    editor:"text",
    editValue:"title", 
    data:big_film_set
});

Related sample: List: Editing

Обратите внимание на свойство editValue. Оно задаёт элемент из темплейта, т.к. у каждой записи списка и похожих компонентов есть темплейт с несколькими значениями из исходного источника данных. Более подробно о темплейтах можно почитать здесь.

Редактирование допускает изменения на странице только если не подразумевается автоматическое сохранение данных. Чтобы сохранить данные на сервер, используйте webix.DataProcessor дял редактируемого компонента.

Методы редактирования

В библиотеке есть набор методов для редактирования.

Обычно вы можете переключить какой-либо элемент в состояние редактирования с помощью метода edit, который принимает ID элемента в качестве параметра:

editlist.edit(7);

Чтобы открыть редактор в ячейке таблицы, вам необходимо указать ID ряды и столбца. Однако мы рекомендуем использовать методы editRow, editColumn и editCell для этих целей. Читайте Datatable API.

datatable.edit({
    row:2,
    column:"title"
});

Следующие методы также применяются для редактирования:

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

Читайте о методах редактирования в справочнике API.

Редактирование через форму

Связывание формы и компонента

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

щелчок по элементу заполнит форму данными элемента;
затем происходит редактирование этих данных в форме;
сохранение формы отправит изменённые данные обратно в компонент.

$$("form1").bind("datatable1");

Related sample: Editors: Bind Form

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

Форма для редактируемого компонента

API для редактирования позволяет прикрепить форму без привязки данных. В отличие от привязки это работает только для
редактируемых компонентов:

rows:[
    {
        view: "datatable", id:"data", autoConfig: true,
        data: grid_data, editable: true
    }
]

Форму нужно определить отдельно, например в layout:

rows:[
    {
        view: "datatable", id:"data", autoConfig: true,
        data: grid_data, editable: true
    },
    {
        view:"form", id:"myform",
        elements:[
            { view:"text", name:"title" },
            { view:"button", label:"Save", css:"webix_primary" }
        ]
    }
]

или в popup:

webix.ui({
    view:"popup", 
    id:"myform",
    body:{
        view:"form", elements:[
            { view:"text", name:"title" },
            { view:"button", label:"Save", css:"webix_primary" }
        ]
    }
});

После чего передайте ID формы или ID окна в параметр form компонента данных:

{
    view: "datatable", id:"data", autoConfig: true,
    data: grid_data, editable: true, form:"myform"
}

Значения формы необходимо собрать и передать в таблицу с помощью getValues / updateItem:

{
    view: "form",
    id:"myform",
    elements: [
        { view: "text", name: "title" },
        {
            view: "button", label: "Save", css:"webix_primary",
            click(id) {
                const form = $$(id).getFormView();
                var values = form.getValues();
                $$("data").updateItem(values.id, values);
            }
        }
    ]
}

Статьи по теме

Обновления данных - альтернативный способ редактирования элементов
Редакторы данных

Наверх