शुरुआत की आँखों के माध्यम से वेबिक्स जावास्क्रिप्ट लाइब्रेरी। भाग 4. डेटा के साथ काम करें। CRUD

चार चांद लगाना

• एक फॉर्म के माध्यम से संपादन तालिका डेटा;
• अंतर्निहित लाइन संपादक की स्थापना ;
• सूची और चार्ट में डेटा जोड़ना;
• आइटम हटाएं;

चरण 1. प्रपत्र के माध्यम से डेटा का संपादन

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 );
    }
}

• शुरुआत में, दो स्थितियों के लिए एक चेक शुरू किया जाता है - क्या फॉर्म डेटा सत्यापन से गुजर चुका है और क्या फॉर्म बदल गया है। प्रपत्र में परिवर्तन isDirty () विधि द्वारा निगरानी कर रहे हैं ;
• उसके बाद, हालत "item_data.id" आपको एक नया रिकॉर्ड परिभाषित करने की अनुमति देता है। एक स्ट्रिंग को आईडी सहित उसके सभी डेटा के साथ फ़ॉर्म में भेजा जाता है, जिसके लिए फ़ॉर्म में कोई पाठ फ़ील्ड नहीं है, लेकिन डेटा के लिए यह आवश्यक है। प्रपत्र संग्रहीत करता है और आपको सभी सबमिट किए गए मानों को पढ़ने की अनुमति देता है, इसलिए हम सत्यापित करने के लिए आईडी का उपयोग करते हैं;
• रिकॉर्ड्स को समेटने के बाद, या तो एक नया रिकॉर्ड जोड़ा जाता है - ऐड () विधि द्वारा , या वर्तमान तत्व को नए गुणों के साथ अपडेट किया जाता है।

चरण 2. अंतर्निहित संपादक को स्थापित करना

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> "
}

चरण 3. सूची और चार्ट में डेटा जोड़ना

{
    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);
};

चरण 4. आइटम हटाना

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;
        }
    }
},

निष्कर्ष