在Web上实现数据表动态⾏列锁定
1.需求提出
在B/S业务系统开发与应⽤过程中，经常存在⼤量的数据需要以表格⽅式呈现，但由于HTML本⾝的技术限制，在⼤量数据查询时，因为不能对数据的⾏、列进⾏有效的控制，导致数据查询困难、表现形式不直观等问题。
需要有⼀个⽅案来实现数据表表头、左侧列的锁定功能，实现Web模式下的数据动态查看。
2.实现原理
由于HTML的表格（TABLE）本⾝并不能提供类似的功能，要实现数据表表头、左侧列的锁定功能，必须通过⼈⼯将HTML表格进⾏分区，对不同区域的表格数据进⾏控制，来达到类似的⽬的。
要实现数据表分区，有两种基本的⽅法实现，⼀种是通过在客户端执⾏脚本来进⾏控制、⼀种是直接通过在服务器端进⾏数据分区来实现。客户端通过脚本控制执⾏效率存在问题，本⽅案只从服务器端实现的⾓度提出解决⽅案。
对于HTML表格来说，要实现⾏、列锁定，必须实现的4个分区。各分区的位置及特点如下：
序号分区类型特点
1左上⾓分区固定不动
2上分区可横向滚动，上下固定，不显⽰滚动条
3左侧分区可纵向滚动，左右固定，不显⽰滚动条
4中⼼区可⾃由滚动，根据需要显⽰滚动条
下⾯为⽰意图：
要实现表格的锁定与滚动功能，需要⽤到HTML中的DIV控件，DIV容器控件有多种内容显⽰模式，包括⾃动扩充，剪切、⾃动处理、显⽰滚动条。通过对表格分区的定义可知，左上⾓的区域⾃动扩充显⽰（全部显⽰），上部及左侧的区域使⽤裁剪模式，主数据区域使⽤⾃动处理或显⽰滚动条模式。
由于数据表为分割在多个不同的DIV中，要实现⾏、列之间的严格对齐，必须要使⽤到CSS中的样式控制。在HTML页⾯显⽰时，页⾯呈现的尺⼨由多个因素所决定，并根据窗⼝情况进⾏动态计算，内部控件、内容及上层控件等样式与属性都可能影响表格的呈现尺⼨与位置。
⽽table-layout样式中的fix属性，⽤来强制当前控件采⽤指定的固定格式（长、宽）显⽰，⽽不受其他参数影响。表格的⾏列锁定必须使⽤改参数。
3.实现⽅法
l源数据的构造
源数据的来源很多，⼀般在业务页⾯处理及报表统计时，都需要构造Table对象，对表格进⾏数据填充，这类数据⼀般有1⾏或多⾏表头，⽐较典型的如DataGrid中的表头等。源数据的来源与⼀般的业务处理类似，此处不再详述。需要主要的是，要实现固定表⾏、列，必须要指定数据表⾏的⾼度及每⼀列的宽度。
l数据表的分割与控制实现过程的讲解能否再详细？看得不是很明⽩
要对源数据表进⾏分割，⾸先要指定要固定⾏与列的数量，依据指定的固定⾏列数量，对表格的单元格进⾏重新划分。分别填充到4个新的表格(Table)中。系统⾃动构造⼀个两⾏两列的容器表格，将4个分割的表格通过Panel(DIV)包装后，分别放置在单元格中。
需要注意的是，⼀般在表格中，只是对表头的宽度进⾏了指定，要实现表格⾼宽的绝对定义，需要对拆分后的4个表格的表头⾏的宽度执⾏⼿⼯指定。由于表头可能存在跨⾏、跨列的情况，直接指定并不
能覆盖到所有的⾏、列。这⾥的技巧是，在每个表格的表头增加⼀⾏，根据表格位置批量增加⾼度为0，宽度为指定宽度的单元格，这样每个表格的宽度就可以固定了；⽽⾼度的固定，可以通过样式直接指定。
整个处理过程⽰意图如下：
html横向滚动条样式
源表格
切块分区
⽬标表格
DIV
l客户端控制
表格呈现在客户端浏览器时，默认情况下，上部区域显⽰左侧内容、左侧区域显⽰上部分类型，中⼼区域显⽰左上部分内容，要浏览其他内容，需要进⾏表格滚动条拖动，由于在中⼼区域有滚动条，只需要实现左侧区域与上部区域的联动即可，实现很简单，注册中西区域
的onscroll拖动事件，代码如下：
上部区域实现与主区域横向滚动位置的联动
pPanel.scrollLeft=this.scrollLeft;
左侧区域实现与主区域纵向滚动位置的联动
document.all.leftPanel.scrollTop=this.scrollTop;"
l辅助功能实现
辅助功能包括：
1.全屏显⽰，根据客户端浏览器的宽度与⾼度，⾃动计算并配置表格各区域的宽度、⾼度，实现全屏显⽰。基本原理为：
上部与中⼼区域DIV宽度＝窗⼝客户区宽度－页⾯宽度＋当前DIV宽度
左侧与中⼼区域DIV⾼度＝窗⼝客户区⾼度－页⾯⾼度＋当前DIV⾼度
也可以在窗⼝尺⼨变化时，响应window的onsize事件来动态调整表格的⾼、宽度。
2.类 Excel虚拟列
Excel中，处理数据区域外，还有⼤量⽆数据的⾏、列，这些⾏、列的存在为数据的对⽐提供了⽅便。为了实现Web下的数据表格对⽐，如：将最后⼀列数据移动紧靠左侧数据区，可以在上部及中⼼区域的表格中增加⼀列空⽩列，并指定合适的宽度，这样滚动条在最右侧时，最后⼀列数据能紧靠左侧数据列，便于数据查看。
3.表格⾏选中
与⼀般的表格⾏选中有所区别，在此功能所呈现的表格中，数据的⼀⾏包含在两个表格中，所以需要在⽤户⿏标选择⼀⾏时，需要同时⼿动选择对应表格的同⼀⾏，使⽤JS脚本较容易实现。
最终显⽰效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。