Webix JavaScript-Bibliothek mit den Augen eines Anfängers. Teil 5. Arbeiten Sie mit Daten auf der Benutzerseite

FÜNFTE AUFGABE

• Filtern und Sortieren von Tabellendaten;
• Filtern und Sortieren über die API;
• Gruppieren von Daten aus einer Baumtabelle
• Komponente Synchronisation ;

Filtern und Sortieren von Tabellendaten

Der Code für das Tabellen-Widget befindet sich in der Datei table.js und wird auf der Registerkarte "Dashboard" gerendert.

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

API-Sortierung und -Filterung

Der Code für das Listen-Widget befindet sich in der Datei users_module.js und wird auf der Registerkarte "Benutzer" gerendert.

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

• Mit der Methode attachEvent füge ich dem Ereignis onTimedKeyPress einen Handler hinzu .
• Das Ereignis onTimedKeyPress wird durch Eingabe von Zeichen in das Textfeld ausgelöst, jedoch mit einer kurzen Verzögerung, um den Filter nicht bei jedem Tastendruck zu aktivieren.
• Dann erhalte ich den eingegebenen Text und verwende die Filtermethode , um mit dem Filtern zu beginnen. Suchen Sie im Listen-Widget nach Übereinstimmungen.

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

Gruppierung von Baumtabellendaten

Der TreeTable-Widget-Code befindet sich in der Datei products_module.js und wird auf der Registerkarte „Poducts“ gerendert.

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

• sofort beim Laden;
• dynamisch mit Gruppen- und Gruppierungsmethoden .

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

• Erforderlicher Parameter nach , nach dem Daten gruppiert werden. Hier ist eines der Felder ("Kategorie");
• map Objekt - hier haben wir die Datenfelder für die erstellten Gruppen beschreiben. Durch die Gruppierung werden die Quelldaten gemäß den angegebenen Parametern aufgeteilt und für sie "übergeordnete Datensätze" erstellt. Über die Karte können wir diesen Datensätzen neue Felder hinzufügen. Damit die Daten in der Tabelle korrekt angezeigt werden, füge ich das Feld "Titel" hinzu. Ich werde den Wert des Parameters übergeben, nach dem die Gruppierung erfolgt.

Komponentensynchronisation

Die Aufgabe verwendet Diagramm- und Listen-Widgets, deren Code sich in der Datei users_module.js befindet und auf der Registerkarte "Benutzer" gerendert wird

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

Verallgemeinerung