Вы можете установить соответствия между загружаемыми данными и столбцами таблицы. По умолчанию DataTable предполагает, что входящий JSON/XML содержит атрибуты с теми же именами что и ID столбцов, поэтому следует указать только ID столбцов. Для нестандартных данных требуется маппинг.
Существует несколько способов реализации маппинга:
Атрибут 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), столбцы именуются как 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) }
]
});
Наверх