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

पांचवी TASK

• छानने और टेबल डेटा छँटाई ;
• एपीआई के माध्यम से फ़िल्टरिंग और छंटाई;
• एक पेड़ की मेज से डेटा समूहीकरण
• घटक तुल्यकालन ;

छानने और टेबल डेटा छँटाई

तालिका विजेट के लिए कोड table.js फ़ाइल में है और "डैशबोर्ड" टैब में प्रदान किया गया है।

columns:[
    { id:"rank", header:"", width:50, css:"rank"},
    { id:"title", header:["Film title", { content:"textFilter"}], fillspace:true },
    { id:"year",  header:["Released", {content:"selectFilter" }], width:100 },
    { id:"votes", header:"Votes", width:100 },
    { id:"rating", header:"Rating", width:100 },
    { header:"", template:"<span class='webix_icon wxi-close'></span>", width:35}
]

    columns:[
        { id:"rank", header:"", width:50, css:"rank"},
        { id:"title", header:["Film title", { content:"textFilter"}], fillspace:true, 
         sort:"string"},
        { id:"year",  header:["Released", {content:"selectFilter" }], width:100, sort:"int"},
        { id:"votes", header:"Votes", width:100, sort:"int"},
        { id:"rating", header:"Rating", width:100, sort:"int"},
        { header:"", template:"<span class='webix_icon wxi-close'></span>", width:35}
    ]

एपीआई सॉर्टिंग और फ़िल्टरिंग

सूची विजेट के लिए कोड user_module.js फ़ाइल में है और "उपयोगकर्ता" टैब में प्रदान किया गया है।

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

$$("list_input").attachEvent("onTimedKeyPress",function(){
    var value = this.getValue().toLowerCase();
    $$("user_list").filter(function(obj){
        return obj.name.toLowerCase().indexOf(value) !== -1;
    })
});

• संलग्नक विधि का उपयोग करते हुए, मैं onTimedKeyPress घटना में एक हैंडलर जोड़ता हूं ;
• onTimedKeyPress ईवेंट को टेक्स्ट फ़ील्ड में वर्ण दर्ज करके ट्रिगर किया जाता है, लेकिन थोड़ी देरी के साथ, ताकि हर कीस्ट्रोके साथ फ़िल्टर को सक्रिय न करें;
• तब मुझे प्रवेश किया हुआ पाठ मिलता है और फ़िल्टर शुरू करने के लिए फ़िल्टर विधि का उपयोग करते हैं - सूची विजेट में मिलान के लिए खोजें।

cols:[
    { 
        view:"button", id:"btn_add_person", 
        value:"Add new person", width:150, css:"webix_primary", 
        click:addPerson
    },
    { 
        view:"text", id:"list_input" 
    },
    { view:"button", id:"btn_asc", width:150, value:"Sort asc", css:"webix_primary", 
        click:()=>{
            $$("user_list").sort("#name#","asc")
     }},
    { view:"button", id:"btn_desc", width:150, value:"Sort desc", css:"webix_primary", 
        click:()=>{
            $$("user_list").sort("#name#","desc")
    }},
]

ट्री टेबल डेटा ग्रुपिंग

ट्रीटेबल विजेट कोड products_module.js फ़ाइल में स्थित है और "पॉडक्ट्स" टैब में प्रदान किया गया है।

[
    {"id": "1.1",   "title": "Standard Ticket",  "price": 21, "category":"Cinema", "rank":1.1},
    {"id": "2.1",   "title": "Cola",  "price": 10, "category":"Cafe", "rank":2.1},
    {"id": "3.1",   "title": "Flowers",  "price": 10, "category":"Other", "rank":3.1}
]

• उन्हें लोड करते समय तुरंत;
• गतिशील रूप से समूह और ungroup विधियों का उपयोग करना ।

const products = {
    editable:true,
    view:"treetable",
    scrollX:false,
    columns:[
        { id:"rank", header:"", width:50 },
        { id:"title", header:"Title", fillspace:true, template:"{common.treetable()} #title#"},
        { id:"price", header:"Price", width:200, editor:"text" }
    ],
    select:"row",
    url:"data/products.js",
    scheme:{
        $group:{
            by:"category",
            map:{
                title:["category"]
            }
        },
        $sort:{ by:"value", dir:"asc" }
    }
}

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

घटक सिंक

कार्य चार्ट और सूची विगेट्स का उपयोग करता है, जिनमें से कोड user_module.js फ़ाइल में है और "उपयोगकर्ता" टैब में प्रदान किया गया है

{
    view:"chart",
    id:"chart",
    type:"bar",
    value:"#age#",
    label:"#age#",
    xAxis:{
        template:"#name#",
        title:"Age"
    }
}

$$("chart").sync($$("user_list"));

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

सामान्यकरण