Добавление/удаление элементов

Чтобы добавлять/удалять элементы, методы add() и remove() соответственно.

Добавление и удаление элементов осуществляется через события, которые срабатывают от действий пользователя. Обычно, это клик по кнопке с соответствующим ярлыком.

Базовое добавление и удаление

Базовый синтаксис выглядит следующим образом:

$$("myview").add({
    id:"item_id",  // добавляем элемент с двумя свойствами
    property:"some_value"
});
$$("myview").remove("item_id"); // удаляем один элемент
 
$$("myview").remove(["idA","idB","idC","idD"]); // удаляем несколько элементов

Как добавить данные из формы

Чтобы добавить элемент, который является введённой в форму строкой, вам необходимо получить эту строку из поля ввода и затем добавить данные в нужный компонент. При выполнении подобных операция используйте ID элемента. Это общее правило для всех методов и обработчиков событий.

У компонентов Form и HTMLForm разный код для полей ввода. Посмотрите на пример с Webix контролом text и стандартным HTML полем. Для каждого используются свои методы для получения значений:

Добавляем данные из JS формы

function addData(){
    $$("data_1").add({
        user:$$('form1').getValues().user, 
        email:$$('form1').getValues().email,
    }, 0);
} // 'user' и 'mail' - ID соответствующих полей

Добавляем данные из [HtmlForm]

function addData() {
 $$("data_2").add({
    title: document.getElementById("title").value, // данные, которые ввёл пользователь 
    year: document.getElementById("year").value 
 },0)
}

Как удалять выбранные элементы

Так как можно удалить только выбранные элементы, разрешите выбор элементов (select: true) при инициализации компонента. Перед удалением давайте проверим, выбран ли элемент с помощью блока if-else.

Как удалить один элемент

function removeData(){ 
    if(!$$("data").getSelectedId()){ //'data' - ID необходимого элемента
        webix.message("No item is selected!");
        return; 
    }
    $$("data").remove($$("data").getSelectedId());
};

Related sample:  Adding/Removing Items

Как удалить несколько элементов

В режиме multiselect можно выбрать несколько элементов. Чтобы удалить все выбранные элементы используйте for-loop:

function remove_item(){
    var list = $$('mylist');
    var sel = list.getSelectedId(true);
    if (!sel) return;
    for (var i = 0; i < sel.length; i++)
    list.remove(sel[i]);
};

Вы можете удалить все элементы с помощью следующей строчки кода:

$$("mylist").clearAll();

Метод clearAll принимает дополнительный boolean параметр, который позволяет сохранять некоторые свойства компонента. Например, x-scroll в datatable или url, который используется при динамической загрузке данных в компонент. Чтобы разрешить такое поведение, передайте true в метод clearAll():

$$("mylist").clearAll(true);

Наверх