本文将探讨一种高性能web数据表格组件的本文版权归作者所有，未经授权不得转载。【作者：唐霜】实现，首先简单介绍slickgrid这个著作权归作者所有，禁止商业用途转载。【转载请注明来源】前人开发的组件，接着对该组件的设计和实现转载请注明出处：www.tangshuang.net【转载请注明来源】思路进行讨论，最后对该组件的思想进行提炼【本文受版权保护】未经授权，禁止复制转载。，实现基于原始思想的新组件。
【原创不易，请尊重版权】【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。slickgird著作权归作者所有，禁止商业用途转载。
原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。slickgrid是一款高性能的web数转载请注明出处：www.tangshuang.net【本文受版权保护】据表格组件，由mleibman于2009转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。年5月提交到github，仓库地址htt转载请注明出处：www.tangshuang.net【未经授权禁止转载】ps://github.com/mlei【本文首发于唐霜的博客】【原创内容，转载请注明出处】bman/SlickGrid。该组件近几【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。年已经停止开发，最后一次提交是2016年转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。5月，但是之前的提交已经是2014年。虽【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。然组件本身的开发已经停止，但是留下了非常本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】丰富的grid组件思想。slickgri【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。d的主要特点如下：
本文版权归作者所有，未经授权不得转载。【转载请注明来源】【版权所有】唐霜 www.tangshuang.net- 高性能：slickgrid采用了局部渲染【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。的机制，对于整个数据表格而言，真正对用户【本文受版权保护】【版权所有，侵权必究】有用的，是可视区域的表格，因此，slic【本文受版权保护】【转载请注明来源】kgrid只渲染可视区域的表格，从而节省【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。了大量DOM渲染操作，性能上几乎是目前市本文版权归作者所有，未经授权不得转载。【作者：唐霜】面上知名grid组件里面最好的。 【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。未经授权，禁止复制转载。【未经授权禁止转载】
- DataView：slickgrid里面【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】提供了一个DataView的工具，它独立【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net于grid本身，虽然grid本身就可以完【版权所有，侵权必究】【原创内容，转载请注明出处】成数据的展示，但是为了数据的更多可操作性【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net，DataView提供了更加丰富的操作空著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。间。同时，这一思想把界面操作和数据操作分【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。离开，虽然在现在看来已经非常老套，而且代【版权所有】唐霜 www.tangshuang.net【作者：唐霜】码层面也很落后，但是在当初那个时代，还是原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net非常先进的。 【转载请注明来源】【原创不易，请尊重版权】【本文首发于唐霜的博客】
- 语言性：slickgrid并不是完整的U【未经授权禁止转载】【原创不易，请尊重版权】I组件，并没有提供直接的接口一次性完成所【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】有配置，它具有语言性，也就是提供基础的语本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】法，你可以用它的语法和素材，不断按照自己著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。的需要进行组合，如果它内部没有实现，你可【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。以自己另外写一套代码，和它混淆以后使用。【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net总之，它就像一堆积木的块，构建出什么样的未经授权，禁止复制转载。原创内容，盗版必究。grid功能就看开发者如何利用它提供的块著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。组合起来。 本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net
当然，这些特点并不全是优点，几乎每一个点【未经授权禁止转载】转载请注明出处：www.tangshuang.net都有可诟病的地方。不过，这种思想是对技术原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。的一种提炼，已经非常难能可贵。
【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】grid的构成元素【未经授权禁止转载】
【未经授权禁止转载】【原创内容，转载请注明出处】未经授权，禁止复制转载。【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。现在，我们从头思考，一个数据表格，它应该转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】由哪些元素构成。数据表单最基本的元素是单原创内容，盗版必究。原创内容，盗版必究。元格，也就是cell，是单点数据的展现方【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net式。一个数据节点被存放在一个cell中。著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。cell的父级是行，也就是row。整个数【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net据表格就是由很多row堆叠而成。row是【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】数据展示的主要部分。但是除此之外，还有表原创内容，盗版必究。【本文首发于唐霜的博客】头，也就是指示列信息的columns信息【作者：唐霜】【版权所有】唐霜 www.tangshuang.net，它指明了同一行中，相同索引的cell的【未经授权禁止转载】【版权所有，侵权必究】共同特征。这些是grid中最为基础的元素【转载请注明来源】【本文首发于唐霜的博客】。
【版权所有】唐霜 www.tangshuang.net【作者：唐霜】【本文首发于唐霜的博客】问题是，就像slickgrid中给人的想【作者：唐霜】【版权所有，侵权必究】象一样，我们并没有必要把所有的cell渲【作者：唐霜】未经授权，禁止复制转载。染出来，而是只渲染当前可视区域的数据。这本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】种思想基于数据量很大的假设。当然，即使是本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。小数据量，这种设计也是应该兼容的才可以。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。因此，我们需要设计一种对可视区域和渲染的未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net抽象概念。这就是viewport和can未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netvas。
转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【本文受版权保护】著作权归作者所有，禁止商业用途转载。viewport是用于提供给用户的可视区著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net域的视口，就像浏览器视口一样，只提供这么原创内容，盗版必究。转载请注明出处：www.tangshuang.net大的窗口大小，至于内部网页的实际大小，是【作者：唐霜】本文版权归作者所有，未经授权不得转载。无法通过该视口直接观察到的，必须通过滚动著作权归作者所有，禁止商业用途转载。【本文受版权保护】条来感知。而对于数据可展开的实际大小，就【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。是canvas的大小。canvas的意思转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net是画布，也就是说是绘制cells的地方。【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。canvas的实际大小应该是假设所有数据【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net一次性绘制完成时所占用的空间大小。当然，著作权归作者所有，禁止商业用途转载。【作者：唐霜】这里说假设，意思是我们实际上并不一次性绘原创内容，盗版必究。【原创内容，转载请注明出处】制完所有数据，而是只在canvas的vi转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netewport遮盖区域内进行绘制。所以它们未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net的关系是：
著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】
grid中viewport和canvas【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】的关系示意图
本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。上图中的阴影部分是无法用肉眼看到的，只有【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netviewport内部是可以被看到的。在w【版权所有，侵权必究】【转载请注明来源】eb开发中，通过overflow来轻易的【作者：唐霜】【关注微信公众号：wwwtangshuangnet】实现滚动条，从而可以通过拖动viewpo【本文受版权保护】原创内容，盗版必究。rt的滚动条查看canvas的每一个位置【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net。
原创内容，盗版必究。【作者：唐霜】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。canvas作为gird绘制视图的对象，著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netgrid的cells和columns将会著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】被绘制在canvas中，因此，从这个层面【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net讲，canvas虽然只是绘制的载体，但最【版权所有，侵权必究】【版权所有，侵权必究】终包含来grid的基础元素，因此被视为一【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】个整体。在开发时，将基础元素和canva【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】s打包成一个实体，不需要再去考虑内部但r本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】ow和cell。
未经授权，禁止复制转载。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】【原创内容，转载请注明出处】另一个问题是，columns可能被固定在【转载请注明来源】【版权所有，侵权必究】grid的顶部，滚动视图时，不会被遮盖。【作者：唐霜】【原创不易，请尊重版权】除了columns，在实际使用中还有一些本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】需求，要求左侧、右侧、顶部、底部固定一些【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】真实的数据信息，而不是columns。这【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】样的需求衍生出另外一个思考，就是需要将完著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】整的grid视图拆分为不同的区块，这些区本文作者：唐霜，转载请注明出处。【作者：唐霜】块有的可能被固定在某个位置，但是所有这些【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】区块组合起来让用户可以看到符合逻辑的完整著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。的grid数据信息。而这种拆分，我认为用原创内容，盗版必究。本文作者：唐霜，转载请注明出处。另外一个概念来表达：layout。
【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】layout意思是布局，表示一个grid转载请注明出处：www.tangshuang.net【作者：唐霜】按照一定的思想被切分，按照特定的规则把切著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】分开的部分合理组合在一起。为了满足实际的【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】需求，我将grid layout切分为3【未经授权禁止转载】原创内容，盗版必究。×4的12个部分，如下图：
【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【转载请注明来源】【转载请注明来源】
grid layout示意图本文作者：唐霜，转载请注明出处。
【版权所有，侵权必究】【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netheader部分区别于neck、body【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。、footer，因为它只用于展示colu【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】mns信息。它的结构可能在一些细节上稍有【版权所有，侵权必究】【作者：唐霜】不同。
本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【本文受版权保护】【作者：唐霜】为什么要这样设计呢？它可以满足如下需求：
【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】- 横向滚动时，left、right可以被f【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。ixed，从而实现左侧、右侧的数据列固定 未经授权，禁止复制转载。【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net
- 纵向滚动时，可以固定header、nec本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】k、footer，实现特定的头、行固定需著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】求 【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。
- 当只需要简单结构，不需要固定时，隐藏对应【本文受版权保护】【原创不易，请尊重版权】区域即可，例如不需要固定左侧，则left【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】所有区块hide，不需要footer，h转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。ide即可，最为简单的grid可能仅显示【转载请注明来源】【原创内容，转载请注明出处】header-middle和body-m【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。iddle。 本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。
每一个区块拥有自己的viewport-c本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netanvas结构，区块本身实际上仅对应区块著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。本身的数据（包括columns）而不包含著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net其它区块的数据展示，因此实际上grid没【转载请注明来源】【版权所有】唐霜 www.tangshuang.net有一个完整的展示所有数据的机会，只有这些转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net区块全部正确展示数据时，才能正确把gri【本文受版权保护】本文作者：唐霜，转载请注明出处。d反应给用户阅读。
【本文受版权保护】未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。这里提出的grid layout和很多其转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】它的grid组件存在本质的区别，很多组件著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。采用的是fake概念，也就是将表格复制一本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。份，左右展示。笔者曾经使用过dhtmlx转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。，是一个非常笨重的grid组件，它不仅代著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】码量大，而且无法清晰的解释如何实现我上述本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】提到的需求。它会告诉你，自己是如何实现左【转载请注明来源】【未经授权禁止转载】侧固定列的，但是无法告诉你一种通用的固定本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】策略。
原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】转载请注明出处：www.tangshuang.net最终，一个grid的组成可能是这样的结构本文作者：唐霜，转载请注明出处。【未经授权禁止转载】：layout->viewport【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】->canvas->rows转载请注明出处：www.tangshuang.net原创内容，盗版必究。->cells
未经授权，禁止复制转载。【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net滚动事件【未经授权禁止转载】
未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。我们需要去研究，用户滚动滚动条的目的，当原创内容，盗版必究。原创内容，盗版必究。然很简单，是为了看非可视区域的可预判性数【未经授权禁止转载】【原创内容，转载请注明出处】据。但是当我们把整个grid切分为12个原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】区块之后，滚动变得有些复杂，如何简单有效未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。的去设计表格的滚动呢？
【原创不易，请尊重版权】【转载请注明来源】【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。实际上，header总是被固定的，当用户【原创内容，转载请注明出处】【原创内容，转载请注明出处】滚动滚动条时，其实并不希望表头消失，否则未经授权，禁止复制转载。未经授权，禁止复制转载。他很难确定可视的数据的列信息。而left【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。, right, neck, foote著作权归作者所有，禁止商业用途转载。【作者：唐霜】r这几个区域本身也是为固定设计的，因此，【本文首发于唐霜的博客】【作者：唐霜】实际上在滚动时，这几个区域根本也不会发生【原创不易，请尊重版权】原创内容，盗版必究。本质的变动，最终，body-middle本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。这个区域才是滚动条的作用区域，只有这个区【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】域是任何滚动事件发生时都应该发生变化的。【版权所有，侵权必究】原创内容，盗版必究。而left、right这两个区域在左右滚原创内容，盗版必究。【未经授权禁止转载】动时保持不变，header、neck、f【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。ooter这三个区域在上下滚动时保存不变【未经授权禁止转载】【未经授权禁止转载】。通过观察，我们发现header-lef【本文受版权保护】原创内容，盗版必究。t, neck-left, footer【未经授权禁止转载】【原创不易，请尊重版权】-left, header-right,【本文受版权保护】转载请注明出处：www.tangshuang.net neck-right, footer-【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】right这些区域是永久固定不变的。
【原创不易，请尊重版权】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net基于上面的这些观察，实际上，我们要考虑如本文作者：唐霜，转载请注明出处。原创内容，盗版必究。何安排滚动条的位置。最终，我将滚动条放在【转载请注明来源】【转载请注明来源】body-right的右侧，footer转载请注明出处：www.tangshuang.net【未经授权禁止转载】-middle的底部。
【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net当右侧的纵向滚动条发生滚动时，整个bod著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】y区域的视图发生上下滚动；当底部的横向滚【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。动条发生滚动时，整个middle区域的视【本文首发于唐霜的博客】【原创内容，转载请注明出处】图发生左右滚动。整个滚动事件就这么简单。
【原创内容，转载请注明出处】【本文受版权保护】【本文首发于唐霜的博客】【未经授权禁止转载】在代码层面，我们需要实现滚动的联动效果，【本文受版权保护】【原创不易，请尊重版权】也就是滚动滚动条时，其它区块的viewp【转载请注明来源】著作权归作者所有，禁止商业用途转载。ort发生相同的滚动效果，或者在非滚动条【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。区域，比如在body-middle滚动鼠【原创不易，请尊重版权】【本文首发于唐霜的博客】标滚轮时，其它区域也同时发生联动效果。
本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】原创内容，盗版必究。数据布局本文版权归作者所有，未经授权不得转载。
本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】前面所讲都是视图布局，数据如何按照视图布【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】局的需求，进行拆分和处理呢？实际上，在w【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.neteb开发中，数据可以仅存在一份，相互之间【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。可以引用。我们更关心的是，在全部数据中，【转载请注明来源】【本文首发于唐霜的博客】layout里的viewport应该获得著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。哪些数据用以渲染，这些数据最终决定来该v【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】iewport内的canvas的大小。这【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net里，我们引入一个新的概念：range。
【未经授权禁止转载】【转载请注明来源】【未经授权禁止转载】【作者：唐霜】range表达了一个数据区域，即从第几行未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net到第几行、第几列到第几列的数据区域。用代著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。码表示为{ fromRow, toRow, fromColumn, toColumn }这样一个对象。【原创不易，请尊重版权】
我们需要在两个地方有明确的range概念【未经授权禁止转载】【作者：唐霜】：1. 每一个layout区块的rang著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】e，2. canvas的可视区域的ran【原创内容，转载请注明出处】【原创不易，请尊重版权】ge。
【本文受版权保护】【作者：唐霜】【原创不易，请尊重版权】layout的range用以构建canv【版权所有，侵权必究】未经授权，禁止复制转载。as，而canvas的可视区域range【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】用以渲染。layout的range完全是【未经授权禁止转载】原创内容，盗版必究。用户传入的，比如用户想固定前2列，那么l【本文首发于唐霜的博客】【转载请注明来源】eft区域的range一定有{ fromRow: 0, toRow: 1 }，而这两列的宽度可以通过columns信著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net息中得到，这样left区域的宽度就可以确【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net定了。同样的道理，其它区域的尺寸也可以通原创内容，盗版必究。未经授权，禁止复制转载。过类似的方法确定，最终剩下的区域就用总的【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net尺寸去减去已知的区域尺寸。这样下来，la本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。yout基本就有了固定的尺寸，再将scr原创内容，盗版必究。【原创不易，请尊重版权】ollbar考虑进去，视图布局就确定了。【转载请注明来源】【原创不易，请尊重版权】viewport尺寸也跟着确定。
canvas的尺寸和layout差不多，【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。但是不同的是，它必须知道完整的layou著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。t的range信息，因为canvas是通本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】过真实的数据得到尺寸的，所以在传入的配置【未经授权禁止转载】【原创不易，请尊重版权】信息中，你必须告诉canvas rowH本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】eight信息。如果没有rowHeigh【原创不易，请尊重版权】未经授权，禁止复制转载。t信息，无法得到canvas的尺寸。一般【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netcolumns里面包含了width信息，【转载请注明来源】【版权所有，侵权必究】所以宽度信息基本是不用担心的，如果不存在【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。，那么也必须传入一个columnWidt未经授权，禁止复制转载。【未经授权禁止转载】h信息。
【作者：唐霜】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。canvas的可视区域的range则需要【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。viewport把当前scroll信息传【原创内容，转载请注明出处】【原创不易，请尊重版权】递给canvas，再由canvas利用自著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】己的数据信息计算出具体应该渲染出哪些行哪本文版权归作者所有，未经授权不得转载。【作者：唐霜】些列。而当滚动事件发生时这个计算过程需要转载请注明出处：www.tangshuang.net【作者：唐霜】反复发生，渲染也会反复发生，这是不可避免【本文受版权保护】转载请注明出处：www.tangshuang.net的代价。不过，我们可以做很多缓存的工作。
【本文首发于唐霜的博客】【未经授权禁止转载】【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。数据驱动本文作者：唐霜，转载请注明出处。
未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。我们摒弃slicgrid中DataVie【本文受版权保护】【本文首发于唐霜的博客】w的概念，转而使用DataDriver的【本文首发于唐霜的博客】原创内容，盗版必究。概念。数据层和视图层分离是注定的，对于数本文版权归作者所有，未经授权不得转载。【转载请注明来源】据的操作会引发视图的联动效应，这也是注定【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。的。对于开发而言，开发者只需要关心数据如【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。何变得即可。例如新增了一条数据，修改了一本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。条数据，删除了一条数据。这些操作仅仅需要转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。在数据层完成，完成数据操作之后，视图会自本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net动更新。
著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【本文受版权保护】这在当代开发中非常用以实现，react、【转载请注明来源】本文作者：唐霜，转载请注明出处。vue、redux、mobx都是非常好的未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net思路。问题在于，有没有必要为了实现数据驱本文版权归作者所有，未经授权不得转载。【本文受版权保护】动而去加载其它的库，增加代码量？
【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】【转载请注明来源】【转载请注明来源】另外一个话题是，如何设计数据结构。从结构本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】上，我们还是遵循slickgrid的当初【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net的设计，colunms、rows。数据视著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】图采用扁平的rows结构，由于是局部渲染【未经授权禁止转载】【原创内容，转载请注明出处】，我们必须采用position:abso未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。lute绝对定位，无法使用float等布【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。局方法，因此无法用display等css【转载请注明来源】【版权所有，侵权必究】属性来删除列之后又显示出来。这种操作只能【转载请注明来源】【本文受版权保护】通过修改数据来做到。因此rows信息包含【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。两个层面，一个层面是原始数据，另一个层面【本文首发于唐霜的博客】【未经授权禁止转载】是视图数据。grid真正要展示的是视图数【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net据，但是原始数据是视图数据的根，因此，如本文版权归作者所有，未经授权不得转载。【作者：唐霜】何在两者之间管理好，是一个大问题。
【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。最后还有一个问题，是数据节点的父子关系，未经授权，禁止复制转载。【原创不易，请尊重版权】一条数据是另外一条数据的子节点，这种数据【未经授权禁止转载】未经授权，禁止复制转载。结构怎么来表达？我们采用来扁平的rows【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。结构，所以，只能通过增加_parent,【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。 _chidren属性等属性来表示引用。著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】当展开一个带有children的row时本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net，我们需要想办法把这些children从未经授权，禁止复制转载。【原创不易，请尊重版权】原始数据中加载到视图数据中。而收起一个p【版权所有，侵权必究】转载请注明出处：www.tangshuang.netarent的时候，也要实现从视图数据中删【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net除。
本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【作者：唐霜】总结转载请注明出处：www.tangshuang.net
【原创内容，转载请注明出处】【原创内容，转载请注明出处】原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】本文最大的创新，是在grid layou未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】t上，它非常优雅的解决来冻结行列问题。s【作者：唐霜】【转载请注明来源】lickgrid本身并没有考虑到这个层面【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。，冻结列是在slickgrid的一个fo【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。rk中实现的，不是它的核心库。然而在现代【作者：唐霜】本文版权归作者所有，未经授权不得转载。web数据表格中，冻结行列几乎是必备需求【作者：唐霜】【转载请注明来源】。另外，本文没有探讨的一个问题是编辑问题转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。，也就是用户可以在线像编辑excel一样【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】编辑自己的数据表。我认为，这个话题需要引【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。申出另外一个话题，就是组件的插件／扩展机著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】制，如何在原有功能上实现简便的扩展。
未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。
