Маппинг данных

Вы можете установить соответствия между загружаемыми данными и столбцами таблицы. По умолчанию DataTable предполагает, что входящий JSON/XML содержит атрибуты с теми же именами что и ID столбцов, поэтому следует указать только ID столбцов. Для нестандартных данных требуется маппинг.

Существует несколько способов реализации маппинга:

  1. используя атрибут свойства columns - map
  2. используя свойство Datatable - scheme
  3. используя атрибут Datatable - map, чтобы установить общую схему отображения для всех элементов данных

Использование атрибута "map" столбца

Атрибут map определяет какое свойство загруженного объекта данных должно быть использовано для столбца:

Загрузка из XML

webix.ui({
    view:"datatable",
    columns:[
        {
            id:"size",
            map:"#cells[0]#",                       header:"Will use the value from the first cell sub-tag"
        },
        {
            id:"url",
            map:"#details#",                        header:"Will use the value from the details attribute or sub-tag"
        }
    ],
    datatype:"xml"
    url:"data/data.xml"
});

Код выше будет корректно отображать данные из XML как:

<rows>
    <item details="http://mysite.com"><cell>15x24</cell><cell>19.02.2008</cell></item>
    <item details="http://mysite.com"><cell>10x12</cell><cell>22.02.2008</cell></item>
    ...
</rows>

Типы данных CSV и JsArray

Во время парсинга CSV (JsArray), столбцы именуются как data1..dataN. Вы можете использовать эти значения как ID столбцов:

webix.ui({
    view:"datatable",
    columns:[
        { id:"data1"  },
        { id:"data2"  }
    ]
});

Related sample:  Loading from an Inline Data source

Или вы можете использовать маппинг, чтобы дать столбцам более понятные и удобные в использовании имена:

webix.ui({
    view:"datatable",
    columns:[
        { id:"url",   map:"#data1#"  },
        { id:"size",  map:"#data2#"  }
    ]
});

Преобразование значений к нативному типу

При загрузке данных из XML, все значения загружаются как строки (в JSON как строки или числа). Это не всегда удобно для данных разных типов (например объектов и объектов с датами). Маппинг позволяет преобразовать значения из строк в определенный формат, например date:

webix.ui({
    view:"datatable",
    columns:[
        { id:"start", map:"(date)#start#" }
    ]
});

Related sample:  Converting Strings to Dates

Если ID столбца и имя сопоставляемого поля совпадают, вы можете сократить запись как в примере:

webix.ui({
    view:"datatable",
    columns:[
        { id:"start", map:"(date)" }
    ]
});

Схема отображения данных

Если все вышеописанное не работает, вы можете использовать свойство scheme, чтобы задать свою функцию для маппинга:

webix.ui({
    view:"datatable",
    scheme:{                                                            $init:function(obj){                                                // obj - data object from incoming data                          // set value based on data in the incoming dataset              obj.count = obj.cells[0];                                       obj.price = obj.cells[1];                                       // or calculate values on the fly                               obj.total = obj.price * obj.count;                          }                                                           },                                                              columns:[
        { id:"count" },
        { id:"price" },
        { id:"total" }
    ]
});

Подробнее.

Общая схема отображения для всех элементов данных

Вы можете собрать все ID столбцов и их соответствующие поля данных в свойстве DataТable - map:

webix.ui({
    view:"datatable",
    map:{                                               name:"#firstname# #lastname#",                  birth:"(date)#birthdate#"                   },                                              columns:[
        { id:"name", header:"User name" },
        { id:"birth", header:"Date of birth"}
    ],
    data:[
        { id:1, firstname:"Adam", lastname:"Smith", birthdate:new Date(1985, 1, 1) },
        { id:2, firstname:"Tom", lastname:"Brown", birthdate:new Date(1986, 2, 2) }
    ]
});
Наверх
If you have not checked yet, be sure to visit site of our main product Webix js framework and page of datagrid javascript product.