如何为angularjs实现ng-handsontable延迟加载

时间:2016-09-17 09:24:07

标签: javascript jquery angularjs handsontable

我正在开发一个angularJS项目,我遇到了实现ng-handsontable延迟加载功能的要求。数据量巨大,如果允许一次显示所有内容将使网站变得非常慢。 有没有办法为angularJS的ng-handsontable实现延迟加载功能。

我尝试使用纯javascript来实现它,但不适用于angularjs。

Html代码是:

<div id="example1" class="hot handsontable htRowHeaders htColumnHeaders">
</div>

Javascript代码是:

document.addEventListener("DOMContentLoaded", function() {

// mock service for getting data
var fetchData = function(n) {
return Handsontable.helper.createSpreadsheetData(n, 3);
};
// variables
var example = document.getElementById('example1');
var hot;
var data = fetchData(100);  
var compute_window = function(e) {
var rowCount = hot.countRows();
var rowOffset = hot.rowOffset();
var visibleRows = hot.countVisibleRows();
var lastRow = rowOffset + (visibleRows * 1);
var lastVisibleRow = rowOffset + visibleRows + (visibleRows/2);
var threshold = 15;

if(lastVisibleRow > (rowCount - threshold)) {
  loadMoreData(rowCount);
}
};

// initialize HOT
hot = new Handsontable(example,{
data: data,
rowHeaders: true,
colHeaders: true,
afterScrollVertically: compute_window
});

// load data and render
var loadMoreData = function(n) {
// call data service
  var incoming = fetchData(n);
incoming.forEach(function(d) {
    data.push(d);
});
hot.render();
};
});

任何人都请帮忙。 感谢

0 个答案:

没有答案