表头锁定可滚动的表格 - BizStruct 商业架构
Blog的文章：http://blog.csdn.net/bizstruct/archive/2006/05/22/750026.aspx 因为没人推荐，进不了分类，那位有推荐权限的，如果看了感兴趣的话，请推荐一下：http://writeblog.csdn.net/PromotePost.aspx?Id=750026
表头锁定可滚动的表格 - BizStruct 商业架构
基于架构的富界面Web应用的可视化快速开发平台
浏览器里标准的表格展现方式比较简单，表格行数多时，页面会有滚动条，浏览数据不方便。
一种解决方法是把表格数据全部显示，通过 DIV 来把表格固定在一个范围内，表格只能在这个范围内滚动；更进一步的是通过 javascript 或 css 把标题锁定在顶端。这种方式存在几个问题，一是不能确保显示完整的行，会有显示半行的情况； 二是因为所有的行都是显示在浏览器里的，行数过多时，会占用大量的资源；另外这种方式无法利用 AJAX 来动态下载表格数据。
另一种解决方法是将表格数据缓存在内存中， 表格每次只显示一页的数据，通过分页浏览条或页码连接在分页之间切换；这种方式可以充分的利用 AJAX 来动态下载表格数据；存在的问题一是数据的展示和操作分离，不直观； 二是数据浏览不平滑，不能同时展示相邻页的数据。
我们的解决方案采用了更复杂的实现技术，从而使表格有了更好的展现效果。将表格数据缓存在内存，每次只显示一页的数据，当表格的数据量很大时，也只占用较少的浏览器资源；通过滚动条操作，和表格一体化，操作很方便。
通过浏览器提供的 DOM 模型，我们几乎可以对表格进行任意的操作，包括添加、删除、修改行或单元格。我们只要删除表头下面的一行，将新行添加到表格的底部，就可以实现表格的向下滚动；删除表格底部行，将新行添加到表头的下面一行，就可以实现表格的向上滚动；而同时表头又是锁定的。
其中涉及到的几项技术，一是表格数据的缓存，XML 文档为我们提供了很大的便利，通过 XML 文档，我们可以很容易的保存、检索和读取表格数据。二是表格行的生成，如果完全通过 DOM，技术难度不大，但工作量大，运行效率较低；更好的方式是 XSLT 和 DOM 的组合，通过 表格的 XML 文档和 XSLT 生成表格行的 HTML，然后通过 DOM 插入到表格中。
下面是我们表格的图示，您也可以访问我们的网站 www.BizStruct.cn，对我们演示的表格进行操作，
通过滚动条的操作，可以实现向上一页，向上一行，向下一行，向下一页和托拽定位的操作。用鼠标左键点击表格标题，设置键盘的输入焦点后，通过键盘的PageUp，向上箭头， 向下箭头和PageDown，可以实现相同的操作。还可以按下 Ctrl + Home 或 End，跳转到整个数据的开始或结尾。支持鼠标滚轮的操作，将鼠标移动到表格内，滚动鼠标的滚轮，表格即可滚动。
下一次，我们将介绍通过 AJAX 来动态下载表格数据。
问题点数：20、回复次数：26Top
1 楼mingxuan3000（铭轩）回复于 2006-05-22 23:09:59 得分 0
upTop
2 楼deninghe（毛毛虫ァ野战军->挺进中原）回复于 2006-05-23 08:46:51 得分 0
wa haha mark...Top
3 楼bizstruct（）回复于 2006-05-23 14:32:11 得分 0
顶一下Top
4 楼yinww（一剑西来）回复于 2006-08-18 22:09:58 得分 0
markTop
5 楼impeller（竹子）回复于 2006-08-19 00:04:29 得分 0
接分Top
6 楼boxigroup（）回复于 2006-08-19 14:09:15 得分 0
欢迎光监点石成金网 http://www.boxigroup.com 网站提供web开发(j2ee .net asp php javascript、c#等) c/s开发(delphi、vb、vc、pb、cb等) 数据库开发(oracle、sqlserver、db2、access、mysql、Postgresql、informix)等学习资料，希望能为你解决燃眉之急 ，请把本网站加入收藏夹，以备不时查询之需 bs+cs讨论群（9638134）Top
7 楼JK_10000（JK）回复于 2006-08-19 16:08:11 得分 0
“您也可以访问我们的网站 www.BizStruct.cn，对我们演示的表格进行操作”
看了一下，可能是眼拙不识泰山，感觉太小儿科了，
说得不好听，在中国，这样的代码把它拿出手要有些胆量哦！
“为了适应不同的分辨率”
----这个起步太低了吧，事实上也是经常看到有人的代码，竟然跟“分辨率”联系紧密，就算有联系，那也应该很松散，与“窗口大小”联系起来，倒还勉强说得过去。
“将表格数据缓存在内存”
数据与对象分离，破坏页面的结构。
但对于做控件开发的公司来说，它却是个好东东，
因为用户一量接受这一点，那就像是上了船下不来，
之后，就得无条件的接受其它的控件:
没办法(或很难)用select，得用控件公司的select；
没办法（或很难）用input，得用控件公司的input；
没办法自己加验证，得用控件公司的验证
。。。
当你提个问题：
“我修改了一个输入框，跳到另一个输入框，再按^Z，可是^Z没效果了”
或者说你提另外一个问题：
“我刚才填了值，跳到其它页面，再后退回来，那些值都丢了”
问题提出后三天或更多时间，控件公司的大约会是：“对不起，你用了我们的控件，请接受这些规则”
自己的看法，
很多控件公司就喜欢说自己控件的长处，
不提附加规则，
在选用前须慎重一些。
这里有无缝的固定表头的代码，
也许功能没有楼主链接里的丰富
不过，使用时接收的附加规则要少一点点：
http://community.csdn.net/Expert/topic/4942/4942954.xml?temp=.6157648
Top
8 楼bizstruct（）回复于 2006-09-19 01:39:24 得分 0
很想对你说，无知者无畏，虽然你肯定不会接受，不过如果你知道自己连小儿科都不如，会有什么感受。如果不服气，就拿出有分量的东西。
不知道你到底有没有仔细读文章，有没有看我们的演示；如果看过的话，我就奇怪了，你到底是凭什么，在质疑别人的胆量的时候，把你的那些代码亮出来。有些人在开始回复我们的文章的时候，也是冷言冷语，我们就劝他们看看我们的演示，然后他们就不说话了；那你凭的是什么呢，至少你给的连接是没有资格的，最好是拿出更有分量的东西。
虽然你口出恶言，我还是逐条回复你。
一般的管理系统在打开时都会把 IE 最大化，甚至于全屏，所以适应窗口大小也就相当于适应分辨率，只是表达上可能让人误解，不过这个问题不值得你这么大惊小怪。
竟然连“将表格数据缓存在内存”都会认为有问题，那微软.Net 的DataSet 根本没有存在的意义了，两者的方式是一样的，这个问题提得莫名奇妙。
至于你说采用控件会受到限制，这个是可能的，不过他的好处也是显而易见的；至少我们的系统，客户端的可交互性很强，开发的难度和工作量较低；具体还需要试用和评估，甚至于可以先开发，开发成功后，销售的时候再购买，最大程度的规避风险。
还有不要总是站在控件的角度看问题，单凭控件是做不出好界面的，对开发效率的提升也有限；我们为了实现富界面，就涉及到三层的配合。
富界面的用户交互，参考的是传统的 C/S 程序，比标准的 B/S 界面交互要方便的多，可很多人竟然也会把 B/S 的一些缺点说成是优点，要强加到富界面的系统上，这个就难以理喻了。还有一些特殊的界面操作，可能难以满足要求，但这不是技术上的问题，而是存在需求上的矛盾；作为客户提出矛盾的需求，还是可以谅解的，但对于设计师设计出矛盾的需求，就说不过去了。
你的连接里的那个固定表头的方式，我们在文章里已经分析过了，会占用大量的系统资源，你用一千条记录试试，会占用很多内存，只要一滚动 CPU 就 100%，在我们看来是不可用的。
你的表格是静态的，要用数据填充还需要大量的工作；我们的表格只需要数据库的表名就可以工作了，连 SQL 语句都不用写，甚至于分页和更新都自动完成了。
就凭这样的效果还有资格说别人。Top
9 楼JK_10000（JK）回复于 2006-09-19 10:10:27 得分 0
"虽然你口出恶言，我还是逐条回复你。"
----
我是以一种平和的心态来看这件事的，
如果让你动怒了，说声抱歉。
在我的回贴里，
其它的都只是技术讨论，应该算不上“恶言”
除了这一句带有感情色彩（已先作过澄清，可能是自己“可能是眼拙不识泰山”），
--------
“看了一下，可能是眼拙不识泰山，感觉太小儿科了，
说得不好听，在中国，这样的代码把它拿出手要有些胆量哦！”Top
10 楼JK_10000（JK）回复于 2006-09-19 10:51:37 得分 0
再申明一下，以下回答是以一种平和的心态来回答的，
只作技术讨论，没有想攻击谁的意思。
------------------------------------
"不知道你到底有没有仔细读文章，有没有看我们的演示"
----回答是：仔细读过你的文章，仔细考察过你们的演示，
不然也不敢贸然说“^Z没效果”“得用控件公司的select”
"一般的管理系统在打开时都会把IE最大化"
----这样的管理系统不应该算是一般的管理系统吧，因为他要求用户把ie最大化。
----如果我也算是一个用户的话，我的windows任务栏通常是三行，
尤其在使用qq history时，觉得很不方便，因为qq的history的弹出框是假设用户的任务栏是一行的，
也许我代表不了很多用户，但是我想，应该有不少人跟我类似吧。
----不习惯最大化的人 应该比 任务栏有三行的人 多一些吧。
"竟然连“将表格数据缓存在内存”都会认为有问题，那微软.Net 的DataSet 根本没有存在的意义了，"
----有缺点 != 没有存在的意义
----我们用别人，是用他们的长处，不是短处，
别人有长处，有就存在的意义，
而不是别人有短处，就没有存在的意义。
----我也在上一个回贴里说了你们的长处:功能丰富，“也许功能没有楼主链接里的丰富”，
也说了我认为的它的短处:"使用时接收的附加规则"很多。
我只是从系统开发者的角度，认为这附加规则有点过多，例如“就得无条件的接受其它的控件:没办法(或很难)用select，得用控件公司的select；没办法（或很难）用input，得用控件公司的input；没办法自己加验证，得用控件公司的验证”
所以觉得要慎用("在选用前须慎重一些")。
Top
11 楼fantiny（卖身不卖艺的菜鸟）回复于 2006-09-19 10:54:39 得分 0
低调低调。
切磋一下就好。Top
12 楼bizstruct（）回复于 2006-09-19 20:43:26 得分 0
如果那样的话都不算恶语的话，不知道你的恶语怎么定义的。
你看问题的角度让人质疑，如果总是想挑刺，那是吸收不到的别人的优点的。
如果你做过管理系统，你就知道基于Web 的管理系统，IE 窗口最大化的比例。而且最大化难道不能自动吗，竟然还要用户手动操作，不知道你是怎么想的？IE 窗口不覆盖任务栏的叫最大化，覆盖任务栏的叫全屏。这样的问题，要我们回复这么多次，值得吗？
你如果真的看了我们的网站，就不会说那个select 的问题了。我们的持久层把前端和数据库隔离了，对于表格对象，不需要写 SQL 语句，可以自动实现分页的下载，和更新。也支持标准的SQL 语句。
还要强调一点，不要总是把目光放在控件上，没有好的架构，控件是发挥不了太大的作用的。
我觉得自己没有资格和你讨论 DataSet 的问题，这个问题你应该去和微软讨论，这样才能显示你的水平。
慎重是没错的，任何系统也都是有他的弱项的，但现在的问题是，你讨论的都是一些细枝末节的东西。
就你连接里的代码，单从 Javascript 上来看还是不错的，但他只是皮毛，整个系统的多层架构才是骨肉，数据才是血液，孰轻孰重。Top
13 楼fantiny（卖身不卖艺的菜鸟）回复于 2006-09-20 09:16:23 得分 0
JK同学给你指出弱点是很好的。
真正好的产品什么细节都需要得到保证。
当然你们看问题的角度不一样。
其实都不错。
楼主应该习惯一下别人挑刺。
因为不是每个用户都会很简单的接受你的产品。Top
14 楼JK_10000（JK）回复于 2006-09-20 10:02:33 得分 0
"你如果真的看了我们的网站，就不会说那个select 的问题了"
----事实我是看过，你不信拉倒。
"而且最大化难道不能自动吗，竟然还要用户手动操作，不知道你是怎么想的"
----如果我也能算一个用户的话，我不乐意“使用的系统一打开就把窗口最大化”。
----站在开发者角度，如果某用户提出这样的要求，我会劝阻他。
"我觉得自己没有资格和你讨论 DataSet 的问题"
----我没有说过谁有资格谁没资格，
只是不愿意被乱扣帽子成:
"竟然连“将表格数据缓存在内存”都会认为有问题，那微软.Net 的DataSet 根本没有存在的意义了"
"javascript...但他只是皮毛"
----同意，html是皮，js是毛，dhtml就是皮毛
"整个系统的多层架构才是骨肉，数据才是血液，孰轻孰重"
----同意。
不想讨论是美容花的钱多还是健身花的钱多，
只是想说，现在已过了只抓重点的时代，
用户完全可以用一点点非重点的细节来否定/放弃一个系统，
所以，不要因为不是重点而不重视皮毛。
另外，对不认识的人，
最好别说“如果你真做过多层架构的系统的话，就不会如何如何”类似的话。
-------------------
这是个自以为是的时代
你我他都是。
不想再说什么，
失陪了！Top
15 楼bizstruct（）回复于 2006-09-20 11:46:32 得分 0
这个帖子，除了 JK 一开始的恶语和我的一两句气话外，大家都是不错的，就事论事。
我们考察过市面上的富界面产品，对自己的产品交互方面还是有信心的；我们的文章是很认真的写的，但对其他人回复也是按照自己的思路去考虑的，所以我们的回复不一定很恰当；
每个人都有自己的开发和设计的经历，看别人的系统时，实际上都是带着自己的经验的眼镜去看的，我就是这样的。
由于大家的经历不同，对很多东西的看法也不同。我就认为，表格的读取，分页和更新必须自动完成，因为这些工作完全是重复的。可我的朋友做的 Web 应用连页都不分，因为他们做的是政府的项目，服务器都是 8 CPU的，不需要考虑性能。
每个项目和产品都是用自己的方式，沿着自己的道路前进；对某些系统遇到的问题，在其他的系统可能就不会遇到，比如我们的分页算法就不会有效率问题，不论多少条记录的表格，任何一页的速度都和第一页是一样的，参见“分页算法，还可以更好”。但对于某些系统的优点，也会被其他人认为是缺点，比如我们系统的表格分页是传统的 C/S 表格的滚动条自动分页，可还是有人提出为什么没有页码跳转分页。
但每个人的眼界都是有限的，我们也只有自己的经验可以依靠，可自己的经验外的世界是无限的，只能不断的学习和实践。
JK 说的“用户完全可以用一点点非重点的细节来否定/放弃一个系统”是确实存在的，这也是中国软件的悲哀，大家对细枝末节的东西花的精力太多了，而没有精力去追求本源的东西了。
Top
16 楼bizstruct（）回复于 2006-09-30 12:09:52 得分 0
这两天有空，看了上面 JK_10000(JK) 给出的连接。
http://community.csdn.net/Expert/topic/4942/4942954.xml?temp=.6157648
看完以后气就不打一处来。就这点雕虫小技，竟然敢说
“看了一下，可能是眼拙不识泰山，感觉太小儿科了，
说得不好听，在中国，这样的代码把它拿出手要有些胆量哦！”。
套用陈凯歌的话，“人不能无耻到这个地步”。对这样的人，还那么有礼貌，真是我们的错。
“这样的代码”，我们所有的代码都是加密的，你能看到我们的代码，只怕你没有这个水平。
我们也说一句不好听的话，别说你根本看不出来我们采用的是什么技术，就是我们把它告诉你，估计你连听都没有听说过。
别不服气，有本事，把你看到的代码说出来。Top
17 楼BlueDestiny（Design Life - never-online.net）回复于 2006-09-30 12:29:36 得分 0
楼主说话怎么就这么冲呢？Top
18 楼bizstruct（）回复于 2006-09-30 12:44:49 得分 0
只是有点气不过，就像自己认为很优秀的孩子，却被别人无端辱骂，那个家长也受不了。Top
19 楼xbbin（dephiplayer）回复于 2006-11-01 18:28:32 得分 0
这个东西很不错呀，楼主是WEB高手。Top
20 楼LCKKING（黑旋风）回复于 2007-02-28 10:05:06 得分 0
楼主,也许你的东西很好,但是你人品真的很↓,说话太冲了，看完这个帖子之后,简直提不起我对你的东西的兴趣,不看也罢。Top
21 楼lyq708（爱你无话说）回复于 2007-04-08 22:18:34 得分 0
文笔还不错的两位
我要提点建议
如果程序员都看不起同行的程序员
我想程序员更会贬值
所以大家得和睦、团结
现在国内的程序员势风日下，现在不管给多少钱都得拼命的干
其中的原因也就不多说了
Top
22 楼lyq708（爱你无话说）回复于 2007-04-08 22:22:13 得分 0
固定列宽行高不错的效果
http://www.jxxg.com/dh20156/dhdatagrid/Top
23 楼operfume（橘子香水）回复于 2007-04-09 00:47:50 得分 0
一个完整的框架只有前端表现是不够的，还必须实现后台数据库的操作，打印等问题。用js编写一个表格目前网上到处都是例子。Top
24 楼woneinwy（★★★★★★★★★★@しǒひê）回复于 2007-04-09 09:28:49 得分 0
楼主你要想想，客户要用你的东西首先就是对你的产品挑刺。。。
你不会敢保证你的产品没有刺给人挑吧。。。Top
25 楼hb_gx（高升）回复于 2007-04-11 20:48:36 得分 0
本来是进来看看的...
楼主你肯定是做技术的
我们做技术的人最不喜欢别人说自己技术不好等等...
楼主如果做过销售或者客户关系的如果听到别人批评那绝对应该感到荣幸
你要自己一个顾客愿意评论你的产品绝大时候都是对你的产品感兴趣了,至少说明他看了你的产品,否则别人理你做什么
难道楼主觉得进来就说接分的会去点你的网址吗?
至少如果我说接分的话就代表我只是单纯为了分才来的,至于你说什么真的没兴趣看,能混分就好
最后还想说一句一个人要能经受得起别人的批评Top
26 楼lfecnu（GISER）回复于 2007-04-12 10:10:01 得分 0
嘻嘻，都和谐社会了，咋还这样？Top
