如何实现行列的锁定

作者:互联网   出处:控件中国网   2014-11-05 19:18:39   阅读:1

功能介绍:

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

Copyright© 2006-2015 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 渝ICP备12000264号 法律顾问:元炳律师事务所
客服软件
live chat