0
点赞
收藏
分享

微信扫一扫

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


最近在正在做的会计系统实施过程中,客户要求在录入凭证分录时,实现每次录入的分录自动选中,并且如果分录在其所在的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的显示区域。具体实现代码如下:



1. function loadedOprt() { //onload事件  
2.  var curRowObj = null; //当前行  
3.  var curItemId = document.myform.curItemId.value; //当前的凭证分录id  
4.  var itemTbObj = document.getElementById("credenceItem"); //包含item的table对象  
5.  if(itemTbObj && itemTbObj.rows.length > 0) {  
6.   for(var i=0; i<itemTbObj.rows.length; i++) {  
7.    var itemId = document.getElementsByName("itemId")[i].value; // 科目ID  
8.    if(curItemId && (curItemId == itemId)) {  
9.     curRowObj = itemTbObj.rows[i];  
10.     break;  
11.    }  
12.   }  
13.   dispHelpInfo(curRowObj); //正在操作的当前行,相当于触发onclick事件  
14.  }  
15.  var divObj = document.getElementById("credenceContent");  
16.  var divTop = divObj.offsetTop + divObj.offsetHeight;  
17.  if(curRowObj) {  
18.   var curTop = curRowObj.offsetTop;  
19.   if(curTop > divTop) {  
20.    divObj.scrollTop += (curTop - divTop) + divTop;  
21.   }  
22.  }  
23. }


〈body onLoad="loadedOprt()"〉



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



top属性仅仅在对象的定位(position)属性被设置时可用。否则,此属性设置会被忽略。


posTop的数值其实和top是一样的,但区别在于,top固定了元素单位为px,而posTop只是一个数值,因此一般使用posTop来进行运算。


scrollTop是元素的垂直滚动条距离元素最顶端的距离


offsetHeight是自身元素的高度,scrollHeight是 自身元素的高度+隐藏元素的高度。

举报

相关推荐

0 条评论