مكتبة Webix JavaScript من خلال عيون مبتدئ. الجزء 4. العمل مع البيانات. الخام

التحدي الرابع

• تحرير بيانات الجدول من خلال نموذج ؛
• تركيب محرر الخط المدمج ؛
• إضافة البيانات إلى القائمة والمخطط ؛
• حذف العناصر؛

الخطوة 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" بتعريف سجل جديد. يتم إرسال سلسلة إلى النموذج مع جميع بياناته ، بما في ذلك المعرف ، والتي لا يوجد لها حقل نص في النموذج ، ولكنها مطلوبة للبيانات. يخزن النموذج ويسمح لك بقراءة جميع القيم المرسلة ، لذلك نستخدم معرف للتحقق ؛
• بعد التوفيق بين السجلات ، تتم إضافة سجل جديد - بواسطة طريقة add () ، أو يتم تحديث العنصر الحالي بخصائص جديدة.

الخطوة 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;
        }
    }
},

استنتاج