Dynamic Loading: datatable(WEBIX) + WT(WebToolkit). We use C++

Webix JS
1

Hello.
As the transport we use WT (http://www.webtoolkit.eu/wt). Can we get the documentation for the datatable API? Please, help us to understand how to set up dynamic loading for datatable. How can our server connect to the load signal and transmit JSON pack into a table?
Perhaps it makes sense to connect to a signal from javascript and then processed using WT?
Thank you.

2

There are two way to intercept the dynamic loading

a) you can use onDataRequest event and call from it any custom code to retrieve the data

http://docs.webix.com/api__link__ui.proto_ondatarequest_event.html

b) you can use Data Proxy

3

trying:

ttable = webix.ui({

         view:"datatable", autoConfig:true,

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

                   datatype:"json",

});

ttable.attachEvent(‘onDataRequest’, function (start, count){webix.message(“Loading…”); return false; });

The message “Loading…” will not be displayed…

4

Yes, onDataRequest will fire only for dynamic data loading requests ( loading data while scrolling | paging ), it will not fire for the direct .load calls.

5

Спасибо за предыдущие ответы.

Возникло 2 вопроса:

  1. Есть ли какая-либо разница в производительности этих 2 механизмов: с прокси и без прокси.

  2. Можно ли увидеть пример динамической таблицы без использования прокси и чтобы пачка данных формировались javascript-ом в обработке сигнала onDataRequest?

6

Вот этот код работает:

ttable = webix.ui({

         view:"datatable", autoConfig:true,

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

                   datatype:"json"});
ttable.attachEvent('onDataRequest', function (start, count){
webix.message("Loading....");

ttable.parse([
                 { id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rank:1},
                 { id:2, title:"The Godfather", year:1972, votes:511495, rank:2}], "json");
return false; });

webix.ready(function(){
ttable.callEvent("onDataRequest");
});

Однако теперь вопрос: Как задать количество всех записей в таблице? Чтобы ползунок правильно спозиционириовался…

7

Есть ли какая-либо разница в производительности этих 2 механизмов: с прокси и без прокси.

Разницы нет. Прокси объект просто описывает механизм загрузки или сохранения данных, накладные расходы на него - минимальны.

Можно ли увидеть пример динамической таблицы без использования прокси и чтобы пачка данных формировались javascript-ом в обработке сигнала onDataRequest?

Типичное решение

ttable.attachEvent('onDataRequest', function (start, count){
  var data = some_magic_to_get_data(start, count);
  ttable.parse(data);
  return false; 
});

.parse обеспечивает точно такуюже обработку данных как и стандартная авто-загрузка

8

Вместо

webix.ready(function(){
   ttable.callEvent("onDataRequest");
});

можно использовать

ttable.parse({
   total_count:2000, data:[]
});

что установит и общий размер, и тут же запустит первый цикл автозагрузки ( так как при попытке отрисовки, компонент не найдет данных )

9

Весьма благодарен.