发布锁定表头的一个思路。垂直滚动时表头不动，水平滚动时表头可以同步滚动。

自然框架 2005-04-05 08:56:28

发布锁定表头的一个思路。垂直滚动时表头不动，水平滚动时表头可以同步滚动。

在这里呢我只介绍我的思路，因为我觉得思路要比代码重要得多。当然我的想法已经实现了。

网页两个：一个是放置表的；一个是放置表头的。

放置表的网页里的东东：

1.DataGrid （就以它为例吧）
2.div两个
3.iframe一个
4.js脚本若干

放置表头的网页里的东东：

1.一个div

。这些是主料，其他的像css样式表了什么的，更具个人口味自行添加。

下面是主要步骤：

1.在DataGrid的外面套一个div——DGdiv，目的是给DataGrid加滚动条。详细的做法嘛，网上已经有n多代码了，随便找一个

就行了。

2.把iframe放在另一个div里面——frmDIV，div设置成可以移动的那种，就是用“坐标”定位的那种；iframe的src就是放置

放置表头的那个网页。高度要调整到和DataGrid的表头一致，宽度也是。

3.编写js脚本，这个就复杂了一点又要分成若干步：

a.读取DataGrid的内容，其实也就是DGdiv.innerHTML，然后把他放在iframe里面的网页里面的div里面。

这时可以运行一下，初步的效果已经出来了，DataGrid有了滚动条，出现了两个表头，一个是DataGrid的，一个是iframe里面

的，垂直滚动的时候DataGrid得表头不见了，iframe的依旧......

b.写一个移动div的脚本，把frmDIV移动到DGdiv 的上面，目的是让iframe的表头盖住DataGrid的表头。

c.再写一个滚动iframe的脚本，在DGdiv滚动的事件里触发，这样就可以实现水平滚动的时候表头也可以跟着同步滚动。

结论：每一部分的代码都可以在网上找到，而且有些是很常见的方法，不知道其他人有没有想到过这种组合。:)

另外几点说明：
1.为什么要把整个DataGrid都放到iframe里面的div里？

目的就是要保证表头的宽度和DataGrid的宽度一致，如果列宽是固定的话，也可以只把表头的行放在iframe里面的div里。

2.为什么要用iframe？

一开始想用div的，但是div的滚动条无法隐藏，让他盖在DataGrid的上面也可能会有失败的情况。
所以呢就用iframe了，他的滚动条可以隐藏，而且可以绝对放在div的上面。

3.为什么iframe的外面还要再套一个div呢？

因为我用js移动iframe没有成功，所以呢只好再套一个div了。

...全文

742 22 打赏收藏转发到动态举报

写回复

用AI写文章

22 条回复

切换为时间正序

请发表友善的回复…

发表回复

Ordin 2005-08-24

打赏
举报

mark

东风E9527 2005-05-10

打赏
举报

学习

karykwan 2005-05-08

打赏
举报

不错

xrll 2005-05-08

打赏
举报

to sp1234()
关于固定表头的例子有不少,我提供的第一个例子是一种方法,将表头的第一个单元格修改一下,可以实现表头和第一列固定。
第二个例子是设定表头和列的格式（点右键查看源文件）
至于farpoint控件，我是第一次看到，这要感谢这位老弟，非常棒。不过我提供的代码是实现数据的批量添加、修改、删除的，与farpoint控件没有任何关系，看看源代码就知道了：
http://community.csdn.net/Expert/topic/3917/3917999.xml?temp=.1219141
有一些问题我已做了修改。

ILearnCSharp 2005-05-06

打赏
举报

自然框架 2005-05-06

打赏
举报

to:xrll()

你的两个页面都打不开呀？

你的页面效果会不会“蹦”呢，就是一蹦一蹦地呢？:)

to:sp1234() ( 四级(中级))

div可以只滚动不显示滚动条呀！

==========

这个怎么实现呀？我还不会呢，望指教。谢谢

pixelLeft、posLeft

js脚本还不是很熟，这些都没有用过呢。

以专业开发人员为伍 2005-04-30

打赏
举报

大家可以去搜索 FarPoint Spread 并下载。

研究技术是好事。但要试试求是，不可骗人搭载下载烂代码。

brando_beat 2005-04-30

打赏
举报

以专业开发人员为伍 2005-04-30

打赏
举报

to: xrll()

不太明白你放上去的第二个例子是什么作用？证明的代码？

farpoint控件我研究过，也在这个论坛上推荐给别人用过，可是从来没敢说是自己开发的。你.....

以专业开发人员为伍 2005-04-30

打赏
举报

to: xrll()

能否将标题部分改得更好一点？

singlepine 2005-04-30

打赏
举报

强

xrll 2005-04-30

打赏
举报

用一个DIV就可以了,DataGrid外加个<div id="c" tyle="width:400px;height:300px;overflow:auto"></div>
然后：
if(e.Item.ItemType == ListItemType.Header)
e.Item.Attributes.Add("style", "position:relative; top:expression(this.offsetParent.scrollTop);");
if((e.Item.ItemType == ListItemType.Item) ||(e.Item.ItemType == ListItemType.AlternatingItem)||(e.Item.ItemType == ListItemType.Header)||e.Item.ItemType == ListItemType.EditItem)
e.Item.Cells[0].Attributes.Add("style", " LEFT: expression(document.getElementById('c').scrollLeft); POSITION: relative;border-bottom:0px;border-right:0px;background:#ccccff");
样式可以自己设。参考这个：
http://218.84.107.5/antai/g.aspx
http://218.84.107.5/antai/mutifunctable/webform1.aspx

以专业开发人员为伍 2005-04-30