Виджеты Примеры Демо Форум Сервисы
Документация
СтартКомпонентыDataTableНастройка

Загрузка данных

DataTable может загружать данные в различных форматах:

  • JSON;
  • XML;
  • JsArray;
  • CSV.

Примеры форматов данных

Кроме перечисленных выше форматов, вы можете определить свой формат (подробнее).

Два основных способа загрузить данные в DataTable:

  • задать источник данных в объекте конструктора;
  • использовать метод parse или load.

Оба способа работают одинаково.

Загрузка из набора данных на клиенте

webix.ui({
    view:"datatable",
    data:[
        { id:1,name:"The Shawshank Redemption",year:1994},
        { id:2,name:"The Godfather",year:1972}
    ]
});

Related sample:  Loading from an Inline Data Source

Загрузка данных из файла

webix.ui({
    view:"datatable",
    url:"data/data.json"
});

Related sample:  Datatable: Loading from Different File Types

Свойство url может быть:

  • строкой с путем к файлу, скрипту или сервису
webix.ui({
    view:"datatable",
    url:"data/customers"
});
  • функцией, чтобы извлечь и проанализировать данные
{ view:"datatable", autoConfig:true, url:function(params){
    return webix.ajax("data/customers");
}};
  • загрузочным прокси объектом
{ view:"datatable", id:"table", autoConfig:true, url:{
    $proxy:true,
    load:function(view, params){
       return webix.ajax().get("data/customers", params);
    }
}};

Загрузка из XML, CSV, JSArray

При загрузке данных в отличном от JSON формате, необходимо также указать свойство datatype в конфигурации или передать имя ожидаемого типа данных как второй параметр метода parse/load.

Чтобы отобразить корректные данные для каждого столбца, используйте маппинг данных.

Загрузка из CSV 

webix.ui({
    view:"datatable",
    columns:[
        { map:"#data1#", header:"First column" }
        { map:"#data2#", header:"Second column" }
    ],
    datatype:"csv"
    url:"data/data.csv"
});

Related sample:  Loading from an External Data File

Маппинг не используется в XML, если теги в данных совпадают с ID столбцов:

webix.ui({
    view:"datatable",
    columns:[
        { id:"name", header:"Will use value from sub-tag 'name'" }
        { id:"details", header:"Will use value from the 'details' attribute or sub-tag" }
    ],
    datatype:"xml"
    url:"data/data.xml"
});

В ином случае также используется маппинг:

Загрузка из XML 

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

Related sample:  Loading from an External Data File

Подробнее.

Конвертация таблицы HTML в DataTable

Чтобы преобразовать таблицу HTML в HTML, вызовите метод parse с параметрами:

  • data - ID таблицы;
  • datatype - формат данных. Значение должно быть 'htmltable'.

Загрузка данных из таблицы HTML 

<table id="films">
    <tr>
        <td width="40">id</td>
        <td width="200">Film title</td>
        <td width="80">Release year</td>
    </tr>
    ...
</table>
<script>
grid = webix.ui({
    view:"datatable",
    autoheight:true,
    autowidth:true
});
 
grid.parse("films", "htmltable");
</script>

Related sample:  Loading from an HTML Table

Загрузка из базы данных

Чтобы загрузить данные из таблиц базы данных, вы должны иметь дело как с клиентской стороной, так и с серверной.

На клиентской стороне указывается параметр url (или вызывается метод load()) и там указывается серверный скрипт.

Статическая загрузка из БД. Код на клиенте. 

webix.ui({
    url:"data/table_data.php"
});
// или
grid.load("data/table_data.php");

Серверный ответ должен включать следующую информацию:

  • data - массив записей данных;
  • pos - часть компонента данных, куда должны быть добавлены загруженные данные;
  • total_count - общее количество записей, доступных на сервере.

Пример ответа JSON 

{
    "data":[
        {"id":1,"package":"acx100-source"},
        {"id":2,"package":"acx200-source"}
    ],
    "pos":0,
    "total_count":999
}

Related sample:  Dynamic Loading from DB

Загрузка больших баз данных (Динамическая)

Как правило, если речь идет о динамической загрузке, источником выступает база данных.

На клиенте вы должны указать параметр url (или вызвать метод load()) с файлом, реализующим "коммуникацию" с серверной стороной.

Dynamic loading from db. Client-side code 

webix.ui({
    view:"datatable",
    autoConfig:true,
    url:"data/data_dyn.php"
});

Серверный ответ должен включать следующую информацию:

Пример ответа JSON 

{
    "data":[
        {"id":1,"package":"acx100-source"},
        {"id":2,"package":"acx200-source"}
    ],
    "pos":0,
    "total_count":999
}

Related sample:  Dynamic Loading from DB

Обратите внимание, внутри dynamic_loading() вы должны указать число записей, которые будут загружены единовременно.

Параметры связанные с динамической загрузкой

Библиотека предлагает различные свойства и методы для работы с динамической загрузкой.

Таблица 1 Параметры связанные с динамической загрузкой
Параметр Описание Пример использования
datafetch Задает число элементов, данные для которых загрузятся со следующим запросом Если вы хотите загрузить определенное число записей (например 80), задайте datafetch:80.
Related sample:  Setting Loading Position
datathrottle Задает интервал между запросами (между получением ответа от одного запроса и отправлением следующего) Как правило, данные подгружаются по мере прокрутки пользователем таблицы. Если пользователь прокручивает таблицу медленно, приложение посылает много запросов к серверу, большинство из которых необязательны. Чтобы исключить ненужные запросы и сократить перегрузку сервера, установите для свойства datathrottle значение, например 5 и запросы будут посылаться на сервер с интервалом 5 секунд.
Related sample:   Datatable: Setting Timeout for Dynamic Loading
loadahead Задает число элементов данных, которые будут подгружаться во время прокрутки Когда пользователь начинает прокрутку, DataTable определяет направление прокрутки и загружает следующие в этом направлении данные (число записей определяется параметром loadahead). Если установить loadahead:50, то каждое движение прокрутки будет подгружать следующие 50 записей.
Related sample:  Dynamic Loading.Load Ahead

Экран загрузки

Когда вы имеете дело с большими данными, полезно в нужный момент отображать экран загрузки, чтобы пользователь понимал когда приложение находится в процессе выполнения определенных действий.

Вызовите метод showOverlay(), чтобы включить экран загрузки для DataTable и метод hideOverlay(), чтобы отключить его.

Использование экрана загрузки в DataTable 

webix.ui({
    view:"datatable",
    on:{
        onBeforeLoad:function(){
            this.showOverlay("Loading...");
        },
        onAfterLoad:function(){
            this.hideOverlay();
        }
    },
    url:"data/table_data.php"
});

Related sample:  Loading Screen

Если на сервере нет данных, вместо скрытия сообщения, вы можете заменить его другим, вызвав showOverlay() с другим текстом:

Задание текста сообщения 

on:{
    onAfterLoad:function(){
        if (!this.count())
            this.showOverlay("Sorry, there is no data");
        else
            this.hideOverlay();
    }
}

Related sample:  Adding Overlay Text

Загрузка конфигурации

Вы можете загрузить конфигурацию со стороны сервера вместе с данными. В этом случае данные будут выглядеть следующим образом:

{
    config:{
        columns:[ /* columns configuration here...*/ ],
        // дополнительные опции, как в конструкторе...
    },
    data:[ /* массив объектов данных, как в примерах выше...*/ ]
}

Подробнее в статье и Webix tutorials.

Наверх
If you have not checked yet, be sure to visit site of our main product Webix web control library and page of datagrid javascript product.
© XB Software Ltd
2013-2023