Webix JavaScript-Bibliothek mit den Augen eines Anfängers. Teil 4. Mit Daten arbeiten. CRUD

VIERTE HERAUSFORDERUNG

• Bearbeiten von Tabellendaten über ein Formular;
• Installation des eingebauten Zeileneditors ;
• Hinzufügen von Daten zur Liste und zum Diagramm;
• Elemente löschen;

Schritt 1. Bearbeiten von Daten über das Formular

const table = {
    view:"datatable", 
    id:"film_list",
    scroll:"y",
    select:true,
    url:"data/data.js",
    hover:"myhover",
    columns:[
        { id:"rank", header:"", width:50, css:"rank"},
        { id:"title", header:"Film title", fillspace:true},
        { id:"year",  header:"Released", width:100},
        { id:"votes", header:"Votes", width:100},
        { id:"rating", header:"Rating", width:100}
    ],
    on:{
        onAfterSelect(id){
            let values = $$("film_list").getItem(id);
            $$("film_form").setValues(values)
        }
    }
}

let saveItem = () => {
    let form = $$( "film_form" );  
    let list = $$( "film_list" );  
    let item_data = $$("film_form").getValues();    
    if( form.isDirty() && form.validate() ){
        if( item_data.id ) 
            list.updateItem(item_data.id, item_data);
        else 
            list.add( item_data );
    }
}

• Zu Beginn wird eine Prüfung für zwei Bedingungen gestartet - ob die Formulardaten die Validierung bestanden haben und ob sich das Formular geändert hat. Änderungen im Formular werden mit der Methode isDirty () überwacht .
• Danach können Sie mit der Bedingung "item_data.id" einen neuen Datensatz definieren. Eine Zeichenfolge wird mit allen Daten, einschließlich der ID, an das Formular gesendet, für die das Formular kein Textfeld enthält, das jedoch für Daten erforderlich ist. Das Formular speichert und ermöglicht das Lesen aller übermittelten Werte. Daher verwenden wir zur Überprüfung die ID.
• Nach dem Abgleichen von Datensätzen wird entweder ein neuer Datensatz hinzugefügt - mit der Methode add () , oder das aktuelle Element wird mit neuen Eigenschaften aktualisiert.

Schritt 2. Installieren Sie den integrierten Editor

const products = {
    editable:true,
    view:"treetable",
    scrollX:false,
    columns:[
        { id:"id", header:"", width:50 },
        { id:"title", header:"Title", fillspace:true, 
        template:"{common.treetable()} #title#", editor:"text" },
        { id:"price", header:"Price", width:200, editor:"text" }
    ],
    select:"row",
    url:"data/products.js",
    rules:{
        "price":webix.rules.isNotEmpty,
        "title":webix.rules.isNotEmpty
    }
}

webix.protoUI({
    name:"editlist"
}, webix.EditAbility, webix.ui.list);

view: "editlist",
editable:true,
editor:"text",
editValue:"name",
id:"user_list",
select:true,
url:"data/users.js",
template:"#name# from #country# <span class='webix_icon wxi-close'></span> "
}

Schritt 3. Hinzufügen von Daten zur Liste und zum Diagramm

{
    cols:[
        { 
        view:"button", 
        id:"btn_add_person", 
        value:"Add new person", 
        width:150, css:"webix_primary", 
        click:addPerson
        },
       {}
    ]
}

let addPerson = () => {
    let obj = {
        name:"Some name",
        age:Math.floor(Math.random() * 80) + 10, 
        country:"Some country"
    }
    $$("user_list").add(obj);
    $$("chart").add(obj);
};

Schritt 4. Elemente löschen

const table = {
    view:"datatable", 
    id:"film_list",
    scroll:"y",
    select:true,
    url:"data/data.js",
    hover:"myhover",
    columns:[
        { id:"rank", header:"", width:50, css:"rank"},
        { id:"title", header:"Film title", fillspace:true},
        { id:"year",  header:"Released", width:100},
        { id:"votes", header:"Votes", width:100},
        { id:"rating", header:"Rating", width:100},
        { header:"", template:"<span class='webix_icon wxi-close delete_icon'></span>", 
        width:35}
    ],
    onClick:{
        delete_icon(e, id){
        this.remove(id);
        return false;
        }
    },
    on:{
        onAfterSelect(id){
            let values = $$("film_list").getItem(id);
            $$("film_form").setValues(values)
        }
    }
}

{
    view: "editlist",
    editable:true,
    editor:"text",
    editValue:"name",
    id:"user_list",
    select:true,
    url:"data/users.js",
    template:`#name# from #country# 
    <span class='webix_icon wxi-close delete_icon'></span> `,
    onClick:{
        delete_icon(e, id){
            this.remove(id);
            return false;
        }
    }
},

Fazit