javascript - MooTools 的表格数据无限滚动

Question

是否有一个强大的基于 MooTools 的 JavaScript 库来实现表格数据的无限滚动？

因此，请考虑在 Excel 电子表格中显示部分数据（可能是 10000 行）——我们最初显示 500 行，然后向下滚动，然后加载接下来的 500 行。此外，如果 dom 太大，我们可能需要删除“第一”行。

Answer 1

You don't need a library for this sort of data manipulation/render.

If your data is contained in a javascript Array:

var dataArray = [
    [1, 5, 7, 9],
    [3, 6, 2, 86],
    [77, 3, 5, 14],
    ...
];

You only need to iterate through the array and render the rows as necessary.

function renderRows(startIndex, endIndex) {
    dataArray.slice(startIndex, endIndex);
    var numRows = dataArray.length;
    for(x=0;x<numRows;x++) {
        renderRow(dataArray[x]);
    }
}

function renderRow(data) {
    new Element('tr', {
        // ...
    }).inject(table);
}

Likewise, if you need to prune the table:

function pruneTable(number) {
    // assuming "table" is defined elsewhere and points to the <table> element
    var rows = table.getElements('tr');
    for(x=0;x<number;x++) rows[x].destroy();
}

This same set of functions can be easily modified to make ajax calls to "get" a set of n rows, and render them as they come in, etc etc.

Mootools isn't the end, it's simple a means to an end!

Caveat: This is all untested. I take no responsibility for any syntax errors!