Fattable 用于创建一个具有无限滚动 / 无限行数 和 无限列数 的表格数据

Question

Fattable 是一个帮助创建无限滚动，及其无限行列数的 JavaScript 类库。比较大的表（多余10000个单元格）使用 DOM 处理不是很方便。你的滚动会变得不均匀。同时比较大的表格增长的速度也更快。不太可能让用户去下载或者保留全部数据。Fattable 可以帮助你很好的处理异步数据加载。

Fattable 是一个 JavaScript 库，用于创建具有无限滚动、无限行数和无限列数的表格。

一个大的表格，超过 10,000 个单元格，不能很好地处理 DOM。你的滚动条会变得响应缓慢。

而且现在的显示器的尺寸也会迅速增长。客户端并不总是能够下载甚至保留所有的表数据。Fattable 包括异步加载数据所需的一切。

特点

轻量级，不需要小于 10 kb 的图书馆。
快速生成，只有可见元素在 DOM 中，完全相同的 DOM 元素被一次又一次地循环。
异步友好：API 使按时间顺序获取数据变得很简单。
强大而不臃肿：样式由你决定。通过 CSS 设置表格的样式，并使用您的画家来连接事件，并在单元格中呈现您的内容。

API

var table = fattable({
  "painter": painter,    // your painter (see below)
  "model": model,          // model describing your data (see below)
  "nbRows": 1000000,     // overall number of rows
  "rowHeight": 35,       // constant row height (px)
  "headerHeight": 100,   // height of the header (px)
  "columnWidths": [300, 300, 300, 300] // array of column width (px) 
})

Painter

painter 是一个对象，它的作用是填充单元格和列Header的内容。它将实现以下接口。

var painter = {
    
    "setupHeader": function(headerDiv) {
        /* Setup method are called at the creation
           of the column header. That is during
           initialization and for all window resize
           event. Columns are recycled. */
    }
,
    "setupCell": function(cellDiv) {
        /* The cell painter tells how 
           to fill, and style cells.
           Do not set height or width.
           in either fill and setup methods. */
    }
,
    "fillHeader": function(headerDiv, data) {
        /* Fills and style a column div.
           Data is whatever the datalayer
           is returning. A String, or a more
           elaborate object. */
        colHeaderDiv.textContent = data;
    }
,
    "fillCell": function(cellDiv, data) {
        /* Fills and style a cell div.
           Data is whatever the datalayer
           is returning. A String, or a more
           elaborate object. */
        cellDiv.textContent = data;
    }
,
    "fillHeaderPending": function(headerDiv) {
        /* Mark a column header as pending.
           When using an asynchronous.
           Its content is not in cache
           and needs to be fetched */
        cellDiv.textContent = "NA";
    }
,
    "fillCellPending": function(cellDiv) {
        /* Mark a cell content as pending
           Its content is not in cache and 
           needs to be fetched */
        cellDiv.textContent = "NA";
    }
};

实际上，这个非常简单的实现是默认的。它可以作为 fattable.Painter 这样你就可以重写它了。

数据层

同步数据层

如果您的数据不太大，您可能只需一次获取所有数据，然后显示该表。对于这个简单的用例，最好的方法可能是扩展 SyncTableData 对象。

你只需要 fattable.SyncTableModel 并实现以下方法

{
  "getCellSync": function(i,j) {
    return "cell " + i + "," + j;
  },
  "getHeaderSync": function(i,j) {
    return "col " + j;
  }
}

异步分页加载

您可能不希望后端接收每个单元格显示的一个请求。解决此问题的一个好方法是将表划分为单元格页。

只有当用户停止滚动时才发送查询。

要使用这样的系统，只需扩展 PagedAsyncTableModel 使用下列方法初始化。此外它还包括一个简单的 LRU 缓存。

{
  "cellPageName": function(i,j) {
      // returns a string which stands for the id of 
      // the page the cell (i,j) belongs to.
      var I = (i / 128) | 0;
      var J = (j / 29) | 0;
      return JSON.stringify([I,J]);
  },
  "fetchCellPage": function(pageName, cb) {
      // Async method to return the page of 
      var coords = JSON.parse(pageName);
      var I = coords[0];
      var J = coords[1];
      getJSON("data/page-" + I + "-" + J + ".json", function(data) {
          cb(function(i,j) {
              return {
                  rowId: i,
                  content: data[i-I*128][j-J*29]
              };
          });
      });
  },
  "headerCellPage" : function(j) {
   // Same as for cellPageName but for cells.
  },
  "fetchHeaderPage" : function(j) {
    // Same as for fetchCellPage but for headers
  }
}

自定义异步模型

如果您想要自定义，可以实现您自己的数据模型，它只需实现以下方法：

{
  hasCell: function(i,j) {
    // returns true if getting the data of the cell (i,j )
    // does not require an async call false if it does need it.
  },
  hasHeader: function(j) {
    // ... same thing for column header j
  },
  getCell: function(i,j,cb) {
      // fetch data associated to cell i,j 
      // and call the callback method cb with it
      // as argument
  },
  getHeader: function(j,cb) {
      // ... same thing for column header j
  }
}

故障排除

使用 <!DOCTYPE html> 对于使用 IE>=9 的库，根本不支持 IE<9。

Fattable 当前使用的是带有溢出的大型容器。浏览器对这样一个容器的大小有一些限制。预期会出现一些错误，在 IE 中出现在 40000 行，在其他浏览器中出现 500000 行。

相关链接

github 地址：https://github.com/fulmicoton/fattable