快速业务通道

发布一个锁定行列的一种方法

作者 佚名技术 来源 NET编程 浏览 发布时间 2012-05-20

功能介绍:

可以实现锁定表格的行和列的功能,效果和Excel里的冻结窗格类似,当然没有Excel那么强大了,只是类似。

问题:

当一个table太大而导致在屏幕里显示不下的时候,IE会出现滚动条,但是这时候就不好看了,对用户的操作也不是很方便。于是我们就想给他加一个限制,在制定的范围内滚动。

如何实现呢?网上也有不少实现方法了,效果如何就不发表意见了,这里主要是想说一下我的思路。

思路:

1、其实思路很简单,div有一个“功能”,给他的style 加上 "CLEAR: none; OVERFLOW: auto; WIDTH: 100px; HEIGHT:100px" 后,div就会出现滚动条(当然要在div里的内容超出div设置的时候)。这样div里的table 就可滚动了。但是行和列也以一起跟着动了起来。

2、行和列如何“锁定”呢?这里我用了一个笨招,用三个div来分别放置行和列,以及行列交叉的地方。这样看起来就像是别锁定住了。

3、当然行和列并不是不动就可以了,也要根据div的滚动条的滚动作出变化(移动)才可以,这里就要使用js来帮忙了。

优点:

1、侵入性小。只需要在。aspx页面里加几个div,引用一个。js文件就可以了。其他的文件里的代码都不用修改。

2、适用范围比较广:针对生成的 <table> 标签,而不针对服务器控件,所以DataGrd、GridView、DataList等都可以使用,只要输出的是 table 形式的html代码就可以。

3、可以同时锁定行和列,行数和列数可以自定义。“锁定”效果好,不会出现“跳动”的现象。

缺点:

1、占用客户端的资源比较大,行数多的时候会有一点点慢。

2、不支持ff.

js的能力还是不够强,目前只能这样了,但这不是最终的结果,还是要更新升级的。发出来也是想请各路高手指点一二。

说了这么多了,可能大家还是没有看明白,不好意思,表达能力比较差。发代码看看吧,呵呵。

。aspx文件里面需要加的代码:

<div onscroll="myScroll(this)" id="dMain" style="CLEAR: none; OVERFLOW: auto; WIDTH: 500px; HEIGHT: 150px">

你的控件控件

</div>

   <div id="dTop" style="CLEAR: none; LEFT: 10px; OVERFLOW: hidden; WIDTH: 0px; POSITION: absolute; TOP: -10px; HEIGHT: 0px; BACKGROUND-COLOR: #ffffff">放置行</div>

   <div id="dLeft" style="CLEAR: none; LEFT: 10px; OVERFLOW: hidden; WIDTH: 0px; POSITION: absolute; TOP: 10px; HEIGHT: 0px; BACKGROUND-COLOR: #ffffff">放置列</div>

   <div id="dMid" style="CLEAR: none; LEFT: 10px; OVERFLOW: hidden; WIDTH: 0px; POSITION: absolute; TOP: 10px; HEIGHT: 0px; BACKGROUND-COLOR: #ffffff"></div>

js 文件里的代码:

function myLoad()

   {

   if (document.getElementById("dMain"))

   divInit();

   }

   function myResize()

   {

   if (document.getElementById("dMain"))

   {

   divInit();

   }

   }

   function divInit()

   {

   var dMain = document.getElementById("dMain"); //主Div

   var dTop = document.getElementById("dTop"); //锁定行的Div

   var dLeft = document.getElementById("dLeft"); //锁定列的Div

   var dMid = document.getElementById("dMid"); //左上角的Div

   var windowWidth = document.

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号