发布一个锁定行列的一种方法。(实现Excel里的冻结窗格的功能)
功能介绍:
可以实现锁定表格的行和列的功能,效果和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.body.scrollWidth;
var windowHeight = document.body.clientHeight;
//alert(windowWidth);
dMain.style.background="#ffffff";
//alert(windowHeight);
dMain.style.width = windowWidth - ;
//修正
var sch = document.getElementById("div_Search");
//alert(sch.scrollHeight);
if (sch.style.display == "")
{
dMain.style.height = windowHeight - - sch.scrollHeight;
}
else
{
dMain.style.height = windowHeight - ;
}
//dMain.style.display = "none";
//寻找Top 和 Left
var tt = dMain; // 寻找左上角的坐标,代码来自梅花雪的日期控件
var th = tt;
var ttop = tt.offsetTop;
var thei = tt.clientHeight;
var tleft = tt.offsetLeft;
var ttyp = tt.type;
while (tt = tt.offsetParent){ttop+=tt.offsetTop; tleft+=tt.offsetLeft;}
var myTop = (ttyp=="image")? ttop+thei : ttop+thei+; //左上角的坐标
var myLeft = tleft; //左上角的坐标
//===================================寻找完毕===============
hh = dMain.style.height; //修正
hh = hh.replace("px","");
myTop = myTop - hh + ;
var dg = document.getElementById("DG"); //显示数据的表格
var RowsCount = ""; //锁定行数
var LineCount = ""; //锁定列数
//锁定行的高度
var RowsHeight = dg.rows[RowsCount].cells[].offsetTop - dg.rows[].cells[].offsetTop +
//锁定列的宽度
var LineWidth = dg.rows[].cells[LineCount].offsetLeft - dg.rows[].cells[].offsetLeft +
//锁定列的高度
var LineHeight = dMain.style.height;
LineHeight = LineHeight.replace("px","");
//锁定行的宽度
var RowsWidth = dMain.style.width;
RowsWidth = RowsWidth.replace("px","");
//hh = parseint(hh);
//赋值
divResize(dMain,dTop,dLeft,dMid);
if (RowsHeight <)
RowsHeight = ;
if (LineWidth <)
LineWidth = ;
dTop.style.width = RowsWidth - ;
dTop.style.height = RowsHeight;
dLeft.style.width = LineWidth;
dLeft.style.height = LineHeight - ;
dMid.style.width = LineWidth ;
dMid.style.height = RowsHeight;
//设置左上角的位置
dTop.style.top = myTop ;
dTop.style.left = myLeft ;
dLeft.style.top = myTop;
dLeft.style.left = myLeft;
dMid.style.top = myTop;
dMid.style.left = myLeft;
}
function divResize(dMain,dTop,dLeft,dMid)
{
dTop.innerHTML = dMain.innerHTML;
dMid.innerHTML = dMain.innerHTML;
dLeft.innerHTML = dMain.innerHTML;
dLeft = dMain;
}
function divResize2(dMain,dLeft)
{
dLeft.innerHTML = dMain.innerHTML;
}
function myScroll(me)
{
var dTop = document.getElementById("dTop");
var dLeft = document.getElementById("dLeft");
var dMid = document.getElementById("dMid"); //左上角的Div
dTop.scrollLeft = me.scrollLeft;
dLeft.scrollTop = me.scrollTop;
//dMid.scrollLeft = me.scrollLeft;
//dMid.scrollTop = me.scrollTop;
}
代码比较乱,最近打算简化一下代码,换一个更高效的方式。
- flash 显示 qq客服状态
- android获得ImageView图片的等级
- SqlServer:此数据库处于单用户模式,导致数据库无法删除的处理
- jQuery中排除指定元素,同时选择剩下的所有元素
- windows客户机连接gerrit的一个报错处理
- 装箱与值类型虽然很容易理解,但是在实际使用中,并不总是能100%用对
- Jexus 配置ssl
- 局部打印插件 jquery.PrintArea.js
- FluorineFx应用中“页面长时间不动”导致无法连接的解决办法
- Mysql主从同步(1)-主从/主主环境部署梳理
- mysql主从同步(3)-percona-toolkit工具(数据一致性监测、延迟监控)使用梳理
- 网站压力测试软件WebBench以及压测Jexus
- Gershon Dublon & Nan Zhao:用传感器网络感知世界
- 即日起珠海可用微信乘公交,腾讯乘车码助力智慧城市建设
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【词库】Python关键词筛选分类,Levenshtein编辑距离算法分词
- 爬取数据缺失的补坑,Python数据爬取的坑坑洼洼如何铲平
- 如何开发跨框架的组件
- SpringBoot系列之异步任务@Async使用教程
- 深入k8s:k8s部署&在k8s中运行第一个程序
- Java是如何实现Future模式的?万字详解!
- Tensorflow基础入门十大操作总结
- Django个人博客,三小时带你入门Django框架
- 微信公众号文章采集工具,可采集文章文字内容信息及图片
- Python打包GUI界面组件汇总,Tkinter(TK)实例代码
- 知了超细讲解Django打造大型企业官网学习记录,02diango url 笔记
- 直播卖货小程序源码中,商品分类页面是如何实现的
- python requests.session验证码登录应用实战,爱站关键词挖掘采集
- 【淘宝】python的淘宝秒杀抢购下单源码参考
- Python素材下载爬虫,ui素材下载爬取采集源码