Fattable是一个帮助创建无限滚动，及其无限行列数的JavaScript类库。比较大的表（多余个单元格）使用DOM处理不是很方便。你的滚动会变得不均匀。同时比较大的表格增长的速度也更快。不太可能让用户去下载或者保留全部数据。Fattable可以帮助你很好的处理异步数据加载。
Fattable是一个JavaScript库，用于创建具有无限滚动、无限行数和无限列数的表格。
一个大的表格，超过10,个单元格，不能很好地处理DOM。你的滚动条会变得响应缓慢。
而且现在的显示器的尺寸也会迅速增长。客户端并不总是能够下载甚至保留所有的表数据。Fattable包括异步加载数据所需的一切。
特点
轻量级，不需要小于10kb的图书馆。快速生成，只有可见元素在DOM中，完全相同的DOM元素被一次又一次地循环。异步友好：API使按时间顺序获取数据变得很简单。强大而不臃肿：样式由你决定。通过CSS设置表格的样式，并使用您的画家来连接事件，并在单元格中呈现您的内容。
API
vartable=fattable({"painter":painter,//yourpainter(seebelow)"model":model,//modeldescribingyourdata(seebelow)"nbRows":00,//overallnumberofrows"rowHeight":5,//constantrowheight(px)"headerHeight":,//heightoftheheader(px)"columnWidths":[00,00,00,00]//arrayofcolumnwidth(px)})
Painter
painter是一个对象，它的作用是填充单元格和列Header的内容。它将实现以下接口。
varpainter={"setupHeader":function(headerDiv){/*Setupmethodacalledatthecationofthecolumnheader.Thatisduringinitializationandforallwindowsizeevent.Columnsacycled.*/},"setupCell":function(cellDiv){/*Thecellpaintertellshowtofill,andstylecells.Donotsetheightorwidth.ineitherfillandsetupmethods.*/},"fillHeader":function(headerDiv,data){/*Fillsandstyleacolumndiv.Dataiswhateverthedatalayeristurning.AString,oramoelaborateobject.*/colHeaderDiv.textContent=data;},"fillCell":function(cellDiv,data){/*Fillsandstyleacelldiv.Dataiswhateverthedatalayeristurning.AString,oramoelaborateobject.*/cellDiv.textContent=data;},"fillHeaderPending":function(headerDiv){/*Markacolumnheaderaspending.Whenusinganasynchronous.Itscontentisnotincacheandneedstobefetched*/cellDiv.textContent="NA";},"fillCellPending":function(cellDiv){/*MarkacellcontentaspendingItscontentisnotincacheandneedstobefetched*/cellDiv.textContent="NA";}};
实际上，这个非常简单的实现是默认的。它可以作为fattable.Painter这样你就可以重写它了。
数据层
同步数据层
如果您的数据不太大，您可能只需一次获取所有数据，然后显示该表。对于这个简单的用例，最好的方法可能是扩展SyncTableData对象。
你只需要fattable.SyncTableModel并实现以下方法
{"getCellSync":function(i,j){turn"cell"+i+","+j;},"getHeaderSync":function(i,j){turn"col"+j;}}
异步分页加载
您可能不希望后端接收每个单元格显示的一个请求。解决此问题的一个好方法是将表划分为单元格页。
只有当用户停止滚动时才发送查询。
要使用这样的系统，只需扩展PagedAsyncTableModel使用下列方法初始化。此外它还包括一个简单的LRU缓存。
{"cellPageName":function(i,j){//turnsastringwhichstandsfortheidof//thepagethecell(i,j)belongsto.varI=(i/18)
0;varJ=(j/9)
0;turnJSON.stringify([I,J]);},"fetchCellPage":function(pageName,cb){//Asyncmethodtoturnthepageofvarcoords=JSON.parse(pageName);varI=coords[0];varJ=coords[1];getJSON("data/page-"+I+"-"+J+".json",function(data){cb(function(i,j){turn{rowId:i,content:data[i-I*18][j-J*9]};});});},"headerCellPage":function(j){//SameasforcellPageNamebutforcells.},"fetchHeaderPage":function(j){//SameasforfetchCellPagebutforheaders}}
自定义异步模型
如果您想要自定义，可以实现您自己的数据模型，它只需实现以下方法：
{hasCell:function(i,j){//turnstrueifgettingthedataofthecell(i,j)//doesnotquianasynccallfalseifitdoesneedit.},hasHeader:function(j){//...samethingforcolumnheaderj},getCell:function(i,j,cb){//fetchdataassociatedtocelli,j//andcallthecallbackmethodcbwithit//asargument},getHeader:function(j,cb){//...samethingforcolumnheaderj}}
故障排除
使用!DOCTYPEhtml对于使用IE=9的库，根本不支持IE9。
Fattable当前使用的是带有溢出的大型容器。浏览器对这样一个容器的大小有一些限制。预期会出现一些错误，在IE中出现在40行，在其他浏览器中出现500行。
相关链接
github