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

Question

发布锁定表头的一个思路。垂直滚动时表头不动，水平滚动时表头可以同步滚动。在这里呢我只介绍我的思路，因为我觉得思路要比代码重要得多。当然我的想法已经实现了。网页两个：一个是放置表的；一个是放置表头的。放置表的网页里的东东：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了。

Answer 1

不错的思路 ！其实Datagrid的header可以隐藏 不用被div盖住

Answer 2

header隐藏了 怎么取表头呀。div里显示什么呢。

Answer 3

其实表头、表体分别是两个网格，上下两个div分别放就行了。然后下面一个div当横向滚动时触发上面的div的横向滚动偏移量保持与自己一样。

Answer 4

上面的div的滚动条怎么隐藏呢？你自己试一下，看看效果就知道了。:)

Answer 5

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

Answer 6

何况，上面的“滚动”是程序控制的，不是用户鼠标事件，所以完全可以通过改变内嵌对象的pixelLeft、posLeft等来实现。

Answer 7

用一个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

Answer 8

to:  xrll() 能否将标题部分改得更好一点？

Answer 9

to:  xrll() 不太明白你放上去的第二个例子是什么作用？证明的代码？farpoint控件我研究过，也在这个论坛上推荐给别人用过，可是从来没敢说是自己开发的。你.....

Answer 10

大家可以去搜索 FarPoint Spread 并下载。研究技术是好事。但要试试求是，不可骗人搭载下载烂代码。

Answer 11

to:xrll() 你的两个页面都打不开呀？你的页面效果会不会“蹦”呢，就是一蹦一蹦地呢？:)
to:sp1234() ( 四级(中级)) div可以只滚动不显示滚动条呀！==========
这个怎么实现呀？我还不会呢，望指教。谢谢pixelLeft、posLeft js脚本还不是很熟，这些都没有用过呢。

Answer 12

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