发布一个锁定行列的一种方法。(实现Excel里的冻结窗格的功能)

简介: 功能介绍:     可以实现锁定表格的行和列的功能,效果和Excel里的冻结窗格类似,当然没有Excel那么强大了,只是类似。     问题:     当一个table太大而导致在屏幕里显示不下的时候,IE会出现滚动条,但是这时候就不好看了,对用户的操作也不是很方便。

功能介绍:
    可以实现锁定表格的行和列的功能,效果和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 - 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;
}

代码比较乱,最近打算简化一下代码,换一个更高效的方式。

相关文章
|
7月前
|
存储 数据可视化 数据处理
Python中读取Excel文件的方法
【2月更文挑战第18天】
302 4
Python中读取Excel文件的方法
|
7月前
|
NoSQL 关系型数据库 MySQL
多人同时导出 Excel 干崩服务器?怎样实现一个简单排队导出功能!
业务诉求:考虑到数据库数据日渐增多,导出会有全量数据的导出,多人同时导出可以会对服务性能造成影响,导出涉及到mysql查询的io操作,还涉及文件输入、输出流的io操作,所以对服务器的性能会影响的比较大;结合以上原因,对导出操作进行排队; 刚开始拿到这个需求,第一时间想到就是需要维护一个FIFO先进先出的队列,给定队列一个固定size,在队列里面的人进行排队进行数据导出,导出完成后立马出队列,下一个排队的人进行操作;还考虑到异步,可能还需要建个文件导出表,主要记录文件的导出情况,文件的存放地址,用户根据文件列表情况下载导出文件。
多人同时导出 Excel 干崩服务器?怎样实现一个简单排队导出功能!
|
7月前
|
存储 数据处理 索引
Python操作Excel常用方法汇总
Python操作Excel常用方法汇总
272 0
|
17天前
|
数据可视化 数据处理 Python
使用Pandas实现Excel中的数据透视表功能
本文介绍了如何使用Python的Pandas库实现Excel中的数据透视表功能,包括环境准备、创建模拟销售数据、代码实现及输出等步骤。通过具体示例展示了按地区和销售员汇总销售额的不同方法,如求和、平均值、最大值等,帮助读者掌握Pandas在数据处理上的强大能力。
52 12
|
1月前
|
前端开发 Java easyexcel
SpringBoot操作Excel实现单文件上传、多文件上传、下载、读取内容等功能
SpringBoot操作Excel实现单文件上传、多文件上传、下载、读取内容等功能
99 8
|
2月前
|
数据处理 Python
Python 高级技巧:深入解析读取 Excel 文件的多种方法
在数据分析中,从 Excel 文件读取数据是常见需求。本文介绍了使用 Python 的三个库:`pandas`、`openpyxl` 和 `xlrd` 来高效处理 Excel 文件的方法。`pandas` 提供了简洁的接口,而 `openpyxl` 和 `xlrd` 则针对不同版本的 Excel 文件格式提供了详细的数据读取和处理功能。此外,还介绍了如何处理复杂格式(如合并单元格)和进行性能优化(如分块读取)。通过这些技巧,可以轻松应对各种 Excel 数据处理任务。
247 16
|
3月前
|
前端开发 Java easyexcel
SpringBoot操作Excel实现单文件上传、多文件上传、下载、读取内容等功能
SpringBoot操作Excel实现单文件上传、多文件上传、下载、读取内容等功能
50 6
|
3月前
|
存储 数据挖掘 测试技术
Python接口自动化中操作Excel文件的技术方法
通过上述方法和库,Python接口自动化中的Excel操作变得既简单又高效,有助于提升自动化测试的整体质量和效率。
39 0
|
5月前
|
存储 开发工具 git
好的git管理方法,标明项目_编号_(功能,不过还是在没有bug出现时就提交为好)+Excel表管理的格式
好的git管理方法,标明项目_编号_(功能,不过还是在没有bug出现时就提交为好)+Excel表管理的格式
|
7月前
|
文字识别
分享:如何ocr识别身份证复印件并导出至excel表格 ? 图片批量识别导出excel表格应用,图片批量识别转excel表格的方法
该软件是一款OCR身份证识别工具,能批量处理图片,自动提取身份证信息并导出为Excel。支持百度网盘和腾讯云盘下载。用户界面直观,操作简单,适合新手。识别过程包括:打开图片、一键识别、导出结果。特别注意,此程序仅适用于身份证识别,不适用于其他类型的图片识别。
282 1
分享:如何ocr识别身份证复印件并导出至excel表格 ? 图片批量识别导出excel表格应用,图片批量识别转excel表格的方法