专栏首页更流畅、简洁的软件开发方式发布一个锁定行列的一种方法。(实现Excel里的冻结窗格的功能)

发布一个锁定行列的一种方法。(实现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;

}

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • MVC和三层,我的一个不成熟的看法,大家批批

      这里说的MVC指的是设计模式里的MVC不是asp.net mvc。   既然MVC是一种设计模式,那么他就应该在任何地方都可以使用。比如三层。   有人说...

    用户1174620
  • 商品的扩展属性及相关——开篇说在前面大纲

      其实早就想写这方面的了,只是由于各种原因一直拖到现在。终于开始动笔了。另外过了这么多年了,也不知道这种做法是否已经过时了。

    用户1174620
  • 文档驱动 —— 表单组件(五):基于Ant Design Vue 的表单控件的demo,再也不需要写代码了。 表单一 公司信息表单二 员工信息,简化版,只是为了演示表单的切换。以后会出

    https://github.com/naturefwvue/nf-vue3-ant

    用户1174620
  • CSS3-3D转换

    py3study
  • 可视化格式模型-浮动

    浮动是可视化格式模型中非常重要的一节。浮动跟stack level也有一定的关系。可视化模型是一个3维的模型,并不是二维的。元素在页面上的排列,从我们的角度看是...

    练小习
  • 浮动之后的那些事儿 - 清浮动操作

    本文内容概要: 1 上周作业讲解 2 浮动之后的特性 3 如何清浮动 4 实例操作 上周我们讲解了如何去实现页面的简单布局,用了三种基本的CSS选择器来控制标签...

    HTML5学堂
  • 网页|扇形菜单—你不get一下吗?

    扇形菜单,就是将导航菜单制作成扇形的形状。简单来说就是通过点击一个按钮,弹出一个以这个按钮为圆心的扇形按钮菜单,(可以根据需要添加按钮个数)。可以通过改变一下半...

    算法与编程之美
  • js获取input上传文件的文件名和扩展名的方法

    使用 js 可以获取 input 上传文件的文件名和扩展名,这里我整理一下具体方法:

    德顺
  • HTML第三课——css【3】

    用户2149234
  • 前端学习(13)~css学习(七):浮动

    上图中可以看到,h1标签是块级元素,占据了整行,span标签是行内元素,只占据内容这一部分。

    Vincent-yuan

扫码关注云+社区

领取腾讯云代金券