Perpustakaan Webix JavaScript melalui mata seorang pemula. Bagian 5. Bekerja dengan data di sisi pengguna

TUGAS KELIMA

• memfilter dan menyortir data tabel;
• memfilter dan menyortir melalui API;
• Mengelompokkan data dari tabel pohon
• sinkronisasi komponen;

Memfilter dan menyortir data tabel

Kode untuk widget Table ada di file table.js dan ditampilkan di tab "Dashboard".

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

Penyortiran dan penyaringan API

Kode untuk widget Daftar ada di file users_module.js dan ditampilkan di tab “Users”.

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

• menggunakan metode attachEvent, saya menambahkan handler ke acara onTimedKeyPress ;
• acara onTimedKeyPress dipicu dengan memasukkan karakter di bidang teks, tetapi dengan jeda singkat, sehingga tidak mengaktifkan filter dengan setiap penekanan tombol;
• kemudian saya mendapatkan teks yang dimasukkan dan menggunakan metode filter untuk mulai memfilter - mencari kecocokan di widget Daftar.

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")
    }},
]

Pengelompokan data tabel pohon

Kode widget TreeTable terletak di file products_module.js dan ditampilkan di tab “Poducts”.

[
    {"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}
]

• segera saat memuatnya;
• secara dinamis menggunakan metode grup dan tanpa grup .

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

• diperlukan parameter oleh , dimana data dikelompokkan. Inilah salah satu bidang ("kategori");
• objek peta - di sini kami menjelaskan bidang data untuk grup yang dibuat. Pengelompokan memecah data sumber sesuai dengan parameter yang ditentukan dan membuat "catatan induk" untuknya. Melalui peta kita dapat menambahkan bidang baru ke catatan ini. Agar data dalam tabel ditampilkan dengan benar, saya akan menambahkan bidang "judul". Saya akan memberikan nilai parameter di mana pengelompokan terjadi.

Sinkronisasi komponen

Tugas ini menggunakan widget Chart and List, kode yang ada di file users_module.js dan ditampilkan di tab “Users”

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

Generalisasi