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

المهمة الخامسة

• تصفية و فرز بيانات الجدول.
• التصفية والفرز من خلال API ؛
• تجميع البيانات من جدول شجرة
• تزامن المكونات

تصفية وفرز بيانات الجدول

كود عنصر واجهة تعامل الجدول موجود في ملف 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}
    ]

الفرز والتصفية API

رمز عنصر واجهة المستخدم List موجود في ملف users_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;
    })
});

• باستخدام طريقة attachEvent ، أقوم بإضافة معالج إلى حدث 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")
    }},
]

تجميع بيانات جدول الشجرة

يوجد رمز القطعة TreeTable في ملف 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}
]

• على الفور عند تحميلها ؛
• حيوي باستخدام مجموعة و طرق فك تجميع .

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

• المعلمة المطلوبة بواسطة ، والتي يتم من خلالها تجميع البيانات. هنا أحد الحقول ("الفئة") ؛
• كائن الخريطة - هنا نصف حقول البيانات للمجموعات التي تم إنشاؤها. يؤدي التجميع إلى فصل بيانات المصدر وفقًا للمعايير المحددة وإنشاء "سجلات رئيسية" لها. من خلال الخريطة يمكننا إضافة حقول جديدة لهذه السجلات. لكي يتم عرض البيانات في الجدول بشكل صحيح ، سأضيف حقل "العنوان". سأمرر فيه قيمة المعلمة التي يتم من خلالها التجميع.

مزامنة المكونات

تستخدم المهمة عناصر واجهة مستخدم المخطط والقائمة ، التي يوجد رمزها في ملف users_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);
};

تعميم