Загрузка настроек

Вы можете загрузить не только данные, но и конфигурацию из внешнего файла или сервера.

Конфигурация из файла JSON

Чтобы загрузить данные и конфигурацию из файла JSON, инициализируйте DataTable как показано ниже:

webix.ui({
    view:"datatable",
    url:"data/data-config.json" //путь к файлу, содержимое ниже
});

Файл data-config.json должен содержать:

Файл 'data-config.json'

{
    "config":{
        "columns":[
            { "id":"title", "header":"Film title", "width":200},
            { "id":"year", "header":"Released", "width":80},
            { "id":"votes", "header":"Votes", "width":100}
        ],
        "height":100,
        "autowidth":true
    },
    "data":[
        {"id":"1", "title":"The Shawshank Redemption", "year":"1994", "votes":"678790"},
        {"id":"2", "title":"The Godfather", "year":"1972", "votes":"511495"}
    ]
}

Конфигурация из файла XML

Чтобы загрузить данные и конфигурацию из файла XML, инициализируйте DataTable как показано ниже:

webix.ui({
    view:"datatable",
    url:"data/data-config.xml"//путь к файлу, содержимое ниже
});

Указанный data-config.xml файл должен иметь следующую структуру:

Файл 'data-config.xml'

<?xml version='1.0' encoding='utf-8' ?>
<data>
    <config>
        <columns>
            <column ID="title"   header="Film title"  width="200"></column>
            <column ID="year"     header="Released"    width="80"></column>
            <column ID="votes"    header="Votes"       width="100"></column>
        </columns>
        <height>100</height>
        <autowidth>true</autowidth>
    </config>
    <item id='1' title='The Shawshank Redemption' year='1994' votes='678790'></item>
    <item id='2' title='The Godfather'            year='1972' votes='511495'></item>
</data>

Related sample:  Loading Configuration from External URL

Конфигурация с сервера

Чтобы загрузить конфигурацию DataTable с серверной стороны, инициализируйте DataTable как показано ниже:

webix.ajax("data/config.json").then(function(data){
    var config = data.json();
    webix.ui({
        view:"datatable",
        columns:config,
        data: [
            { id:1, title:"The Shawshank Redemption", year:1994,  votes:678790},
            { id:2, title:"The Godfather",            year:1972,  votes:511495}
        ]
    });
});

Указанный config.json файл должен иметь следующую структуру:

Файл 'config.json'

[
    { "id":"title", "header":"Film title",  "width":200},
    { "id":"year",  "header":"Released",   "width":80},
    { "id":"votes", "header":"Votes",       "width":100}
]

Настройка и заполнение данными на сервере

Чтобы загрузить данные и конфигурацию на серверной стороне, инициализируйте DataTable как показано ниже:

webix.ajax("data/data-config.json").then(function(data){
    var obj = data.json();
    webix.ui({
        view:"datatable",
        columns:obj.config,
        data:obj.rows
    });
});

Указанный data-config.json файл должен иметь следующую структуру:

Файл 'data-config.json'

{
    "config":[
        { "id":"title", "header":"Film title", "width":200},
        { "id":"year", "header":"Released", "width":80},
        { "id":"votes", "header":"Votes", "width":100}
    ],
    "rows":[
        {"id":"1", "title":"The Shawshank Redemption", "year":"1994", "votes":"678790"},
        {"id":"2", "title":"The Godfather", "year":"1972", "votes":"511495"}
    ]
}

Related sample:  Loading Configuration from Server Side