注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

老陈的博客

非淡泊无以明志,非宁静无以致远,说的是心态!

 
 
 

日志

 
 

JS实现当前编辑行自动滚动至div显示区域  

2009-12-29 22:41:53|  分类: 工作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

最近在正在做的会计系统实施过程中,客户要求在录入凭证分录时,实现每次录入的分录自动选中,并且如果分录在其所在的div隐藏区域时,将其滚动至 显示区域。由于先前已经实现JS控制的当前行高亮显示的功能,因此,只需实现当前行的自动滚动。考虑到所有的凭证分录信息都放在div内,因此可以借助 JavaScript控制div的某些属性实现,google的结果表明,将scrollTop与offsetTop、offsetHeight共同使 用,可以实现此功能。

由于用户每次编辑完一条分录,系统都自动保存,因此会有保存当前分录信息的要求,而每个分录的id是唯一的,此处使用 “curItemId”属性来记录当前编辑的凭证分录id,在整个文档load完毕之后,将每行种隐藏的“itemId”与“curItemId”比较, 如果相同,则设置此行被选中,并获取默认情况下此行的“offsetTop”,同时与用外层div的“offsetTop”与 “offsetHeight”属性值之和比较,如果当前行的offsetTop>外层div的offsetTop+offsetHeight,说明 此行被隐藏显示了,需要将外层div的scrollTop向下移动,直至当前行移动到外层div的显示区域。具体实现代码如下:

function loadedOprt() { //onload事件
 var curRowObj = null; //当前行
 var curItemId = document.myform.curItemId.value; //当前的凭证分录id
 var itemTbObj = document.getElementById("credenceItem"); //包含item的table对象
 if(itemTbObj && itemTbObj.rows.length > 0) {
  for(var i=0; i<itemTbObj.rows.length; i++) {
   var itemId = document.getElementsByName("itemId")[i].value; // 科目ID
   if(curItemId && (curItemId == itemId)) {
    curRowObj = itemTbObj.rows[i];
    break;
   }
  }
  dispHelpInfo(curRowObj); //正在操作的当前行,相当于触发onclick事件
 }
 var divObj = document.getElementById("credenceContent");
 var divTop = divObj.offsetTop + divObj.offsetHeight;
 if(curRowObj) {
  var curTop = curRowObj.offsetTop;
  if(curTop > divTop) {
   divObj.scrollTop += (curTop - divTop) + divTop;
  }
 }
}

〈body onLoad="loadedOprt()"〉

顺便介绍下scrollTop、offseTop等属性的意义,以便查阅

top属性仅仅在对象的定位(position)属性被设置时可用。否则,此属性设置会被忽略。
posTop的数值其实和top是一样的,但区别在于,top固定了元素单位为px,而posTop只是一个数值,因此一般使用posTop来进行运算。
scrollTop是元素的垂直滚动条距离元素最顶端的距离
offsetHeight是自身元素的高度,scrollHeight是 自身元素的高度+隐藏元素的高度。

  评论这张
 
阅读(55)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017