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

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

发布于 2020-09-25 字数 5758 浏览 1379 评论 0

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

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论