MooTools 的表格数据无限滚动答案

【问题标题】：Infinite scroll of tabular data for MooToolsMooTools 的表格数据无限滚动
【发布时间】：2012-07-15 16:12:08
【问题描述】：

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

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

【问题讨论】：

标签： javascript html mootools infinite-scroll

【解决方案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);
}

同样，如果您需要修剪表格：

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 不是目的，它只是达到目的的简单方法！

警告：这一切都未经测试。我对任何语法错误概不负责！

【讨论】：

那么，如果我没有能够一次将所有数据行存储在内存中怎么办。这个解决方案如何滚动？
AJAX 了。您不必存储整个数据集，并且可以进行 AJAX 调用以按需提取更新的条目。
对。就我现在如何获取数据而言，我现在正在这样做。我正在寻找的是实现这种技术的简单模块，例如 infinite-scroll.com 。您的回答非常笼统，目前没有给我任何不明显的信息。我正在寻找的是干净的实现，可能作为 MooTools 插件，它允许我指定数据源、将其转换为 html 的代码以及何时触发获取新数据的规则。