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

Question

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

想象一个显示部分数据的 Excel 电子表格(可能有 10000 行) - 我们最初显示 500 行，然后向下滚动，然后加载接下来的 500 行。此外，根据需要，我们可能需要删除“第一”行，以防 dom 太大。

Answer 1

您不需要用于此类数据操作/渲染的库。

如果您的数据包含在 JavaScript 数组中:

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

您只需迭代数组并根据需要呈现行。

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);
}

同样，如果您需要 trim 表:

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();
}

可以轻松修改同一组函数，以进行 ajax 调用来“获取”一组 n 行，并在它们进入时呈现它们，等等。

Mootools 不是目的，它只是达到目的的一种简单手段!

警告:这一切都未经测试。我对任何语法错误不承担任何责任!