提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
原创|其它|编辑:郝浩|2009-08-31 13:55:36.000|阅读 943 次
概述:本文的代码可以实现锁定表格的行和列的功能,效果和Excel里的冻结窗格类似,当然没有Excel那么强大了,只是类似。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
功能介绍:
可以实现锁定表格的行和列的功能,效果和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、适用范围比较广:针对生成的 标签,而不针对服务器控件,所以DataGrd、GridView、DataList等都可以使用,只要输出的是 table 形式的html代码就可以。
3、可以同时锁定行和列,行数和列数可以自定义。“锁定”效果好,不会出现“跳动”的现象。
缺点:
1、占用客户端的资源比较大,行数多的时候会有一点点慢。
2、不支持ff.
js的能力还是不够强,目前只能这样了,但这不是最终的结果,还是要更新升级的。发出来也是想请各路高手指点一二。
说了这么多了,可能大家还是没有看明白,不好意思,表达能力比较差。发代码看看吧,呵呵。
。aspx文件里面需要加的代码:
你的控件控件
放置行
放置列
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 - 12;
//修正
var sch = document.getElementById("div_Search");
//alert(sch.scrollHeight);
if (sch.style.display == "")
{
dMain.style.height = windowHeight - 100 - sch.scrollHeight;
}
else
{
dMain.style.height = windowHeight - 120;
}
//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+6; //左上角的坐标
var myLeft = tleft; //左上角的坐标
//===================================寻找完毕===============
hh = dMain.style.height; //修正
hh = hh.replace("px","");
myTop = myTop - hh + 12;
var dg = document.getElementById("DG"); //显示数据的表格
var RowsCount = "1"; //锁定行数
var LineCount = "1"; //锁定列数
//锁定行的高度
var RowsHeight = dg.rows[RowsCount].cells[0].offsetTop - dg.rows[0].cells[0].offsetTop + 2
//锁定列的宽度
var LineWidth = dg.rows[0].cells[LineCount].offsetLeft - dg.rows[0].cells[0].offsetLeft + 2
//锁定列的高度
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 <25)
RowsHeight = 25;
if (LineWidth <20)
LineWidth = 20;
dTop.style.width = RowsWidth - 16;
dTop.style.height = RowsHeight;
dLeft.style.width = LineWidth;
dLeft.style.height = LineHeight - 16;
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;
}
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
文章转载自:IT专家网面对“数字中国”建设和中国制造2025战略实施的机遇期,中车信息公司紧跟时代的步伐,以“集约化、专业化、标准化、精益化、一体化、平台化”为工作目标,大力推进信息服务、工业软件等核心产品及业务的发展。在慧都3D解决方案的实施下,清软英泰建成了多模型来源的综合轻量化显示平台、实现文件不失真的百倍压缩比、针对模型中的大模型文件,在展示平台上进行流畅展示,提升工作效率,优化了使用体验。
本站的模型资源均免费下载,登录后即可下载。模型仅供学习交流,勿做商业用途。
本站的模型资源均免费下载,登录后即可下载。模型仅供学习交流,勿做商业用途。
本站的模型资源均免费下载,登录后即可下载。模型仅供学习交流,勿做商业用途。
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@pclwef.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢