欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Flex中怎么给表格中的滚动条定位避免刷新回到原处

程序员文章站 2022-07-10 15:18:38
1、问题背景 如果表格中的字段过多,会出现滚动条,在将滚动条滚到一定的位置时,重新刷新表格,滚动条会回到原处,原来查看的字段还得继续滚动,才能查看到。 2、实现实例...

1、问题背景

如果表格中的字段过多,会出现滚动条,在将滚动条滚到一定的位置时,重新刷新表格,滚动条会回到原处,原来查看的字段还得继续滚动,才能查看到。

2、实现实例

<?xml version="1.0" encoding="utf-8"?> 
<s:application xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx" 
creationcomplete="inithandler(event)" 
width="100%" height="100%"> 
<s:layout> 
<s:basiclayout/> 
</s:layout> 
<fx:script> 
<![cdata[ 
import mx.collections.arraycollection; 
import mx.controls.alert; 
import mx.events.flexevent; 

[bindable] 
//表格数据绑定 
private var gridarray:arraycollection = new arraycollection([ 
{jan:"5678",feb:"7890",mar:"3454",apr:"4565",may:"6756",jun:"5656",jul:"7867",aug:"8990",sep:"5676",oct:"4655",nov:"6778",dec:"8909", 
jan1:"3344",feb1:"5676",mar1:"7898",apr1:"9089",may1:"9009",jun1:"5675",jul1:"3433",aug1:"4455",sep1:"6676",oct1:"7867",nov1:"4556",dec1:"8656"}, 
{jan:"5678",feb:"7890",mar:"3454",apr:"4565",may:"6756",jun:"5656",jul:"7867",aug:"8990",sep:"5676",oct:"4655",nov:"6778",dec:"8909", 
jan1:"3344",feb1:"5676",mar1:"7898",apr1:"9089",may1:"9009",jun1:"5675",jul1:"3433",aug1:"4455",sep1:"6676",oct1:"7867",nov1:"4556",dec1:"8656"}, 
{jan:"5678",feb:"7890",mar:"3454",apr:"4565",may:"6756",jun:"5656",jul:"7867",aug:"8990",sep:"5676",oct:"4655",nov:"6778",dec:"8909", 
jan1:"3344",feb1:"5676",mar1:"7898",apr1:"9089",may1:"9009",jun1:"5675",jul1:"3433",aug1:"4455",sep1:"6676",oct1:"7867",nov1:"4556",dec1:"8656"}, 
{jan:"5678",feb:"7890",mar:"3454",apr:"4565",may:"6756",jun:"5656",jul:"7867",aug:"8990",sep:"5676",oct:"4655",nov:"6778",dec:"8909", 
jan1:"3344",feb1:"5676",mar1:"7898",apr1:"9089",may1:"9009",jun1:"5675",jul1:"3433",aug1:"4455",sep1:"6676",oct1:"7867",nov1:"4556",dec1:"8656"}, 
{jan:"5678",feb:"7890",mar:"3454",apr:"4565",may:"6756",jun:"5656",jul:"7867",aug:"8990",sep:"5676",oct:"4655",nov:"6778",dec:"8909", 
jan1:"3344",feb1:"5676",mar1:"7898",apr1:"9089",may1:"9009",jun1:"5675",jul1:"3433",aug1:"4455",sep1:"6676",oct1:"7867",nov1:"4556",dec1:"8656"}, 
{jan:"5678",feb:"7890",mar:"3454",apr:"4565",may:"6756",jun:"5656",jul:"7867",aug:"8990",sep:"5676",oct:"4655",nov:"6778",dec:"8909", 
jan1:"3344",feb1:"5676",mar1:"7898",apr1:"9089",may1:"9009",jun1:"5675",jul1:"3433",aug1:"4455",sep1:"6676",oct1:"7867",nov1:"4556",dec1:"8656"}, 
{jan:"5678",feb:"7890",mar:"3454",apr:"4565",may:"6756",jun:"5656",jul:"7867",aug:"8990",sep:"5676",oct:"4655",nov:"6778",dec:"8909", 
jan1:"3344",feb1:"5676",mar1:"7898",apr1:"9089",may1:"9009",jun1:"5675",jul1:"3433",aug1:"4455",sep1:"6676",oct1:"7867",nov1:"4556",dec1:"8656"}, 
{jan:"5678",feb:"7890",mar:"3454",apr:"4565",may:"6756",jun:"5656",jul:"7867",aug:"8990",sep:"5676",oct:"4655",nov:"6778",dec:"8909", 
jan1:"3344",feb1:"5676",mar1:"7898",apr1:"9089",may1:"9009",jun1:"5675",jul1:"3433",aug1:"4455",sep1:"6676",oct1:"7867",nov1:"4556",dec1:"8656"}, 
{jan:"5678",feb:"7890",mar:"3454",apr:"4565",may:"6756",jun:"5656",jul:"7867",aug:"8990",sep:"5676",oct:"4655",nov:"6778",dec:"8909", 
jan1:"3344",feb1:"5676",mar1:"7898",apr1:"9089",may1:"9009",jun1:"5675",jul1:"3433",aug1:"4455",sep1:"6676",oct1:"7867",nov1:"4556",dec1:"8656"}, 
{jan:"5678",feb:"7890",mar:"3454",apr:"4565",may:"6756",jun:"5656",jul:"7867",aug:"8990",sep:"5676",oct:"4655",nov:"6778",dec:"8909", 
jan1:"3344",feb1:"5676",mar1:"7898",apr1:"9089",may1:"9009",jun1:"5675",jul1:"3433",aug1:"4455",sep1:"6676",oct1:"7867",nov1:"4556",dec1:"8656"}, 
{jan:"5678",feb:"7890",mar:"3454",apr:"4565",may:"6756",jun:"5656",jul:"7867",aug:"8990",sep:"5676",oct:"4655",nov:"6778",dec:"8909", 
jan1:"3344",feb1:"5676",mar1:"7898",apr1:"9089",may1:"9009",jun1:"5675",jul1:"3433",aug1:"4455",sep1:"6676",oct1:"7867",nov1:"4556",dec1:"8656"}, 
{jan:"5678",feb:"7890",mar:"3454",apr:"4565",may:"6756",jun:"5656",jul:"7867",aug:"8990",sep:"5676",oct:"4655",nov:"6778",dec:"8909", 
jan1:"3344",feb1:"5676",mar1:"7898",apr1:"9089",may1:"9009",jun1:"5675",jul1:"3433",aug1:"4455",sep1:"6676",oct1:"7867",nov1:"4556",dec1:"8656"}, 
{jan:"5678",feb:"7890",mar:"3454",apr:"4565",may:"6756",jun:"5656",jul:"7867",aug:"8990",sep:"5676",oct:"4655",nov:"6778",dec:"8909", 
jan1:"3344",feb1:"5676",mar1:"7898",apr1:"9089",may1:"9009",jun1:"5675",jul1:"3433",aug1:"4455",sep1:"6676",oct1:"7867",nov1:"4556",dec1:"8656"}, 
{jan:"5678",feb:"7890",mar:"3454",apr:"4565",may:"6756",jun:"5656",jul:"7867",aug:"8990",sep:"5676",oct:"4655",nov:"6778",dec:"8909", 
jan1:"3344",feb1:"5676",mar1:"7898",apr1:"9089",may1:"9009",jun1:"5675",jul1:"3433",aug1:"4455",sep1:"6676",oct1:"7867",nov1:"4556",dec1:"8656"}, 
{jan:"5678",feb:"7890",mar:"3454",apr:"4565",may:"6756",jun:"5656",jul:"7867",aug:"8990",sep:"5676",oct:"4655",nov:"6778",dec:"8909", 
jan1:"3344",feb1:"5676",mar1:"7898",apr1:"9089",may1:"9009",jun1:"5675",jul1:"3433",aug1:"4455",sep1:"6676",oct1:"7867",nov1:"4556",dec1:"8656"}, 
{jan:"5678",feb:"7890",mar:"3454",apr:"4565",may:"6756",jun:"5656",jul:"7867",aug:"8990",sep:"5676",oct:"4655",nov:"6778",dec:"8909", 
jan1:"3344",feb1:"5676",mar1:"7898",apr1:"9089",may1:"9009",jun1:"5675",jul1:"3433",aug1:"4455",sep1:"6676",oct1:"7867",nov1:"4556",dec1:"8656"}, 
{jan:"5678",feb:"7890",mar:"3454",apr:"4565",may:"6756",jun:"5656",jul:"7867",aug:"8990",sep:"5676",oct:"4655",nov:"6778",dec:"8909", 
jan1:"3344",feb1:"5676",mar1:"7898",apr1:"9089",may1:"9009",jun1:"5675",jul1:"3433",aug1:"4455",sep1:"6676",oct1:"7867",nov1:"4556",dec1:"8656"}, 
{jan:"5678",feb:"7890",mar:"3454",apr:"4565",may:"6756",jun:"5656",jul:"7867",aug:"8990",sep:"5676",oct:"4655",nov:"6778",dec:"8909", 
jan1:"3344",feb1:"5676",mar1:"7898",apr1:"9089",may1:"9009",jun1:"5675",jul1:"3433",aug1:"4455",sep1:"6676",oct1:"7867",nov1:"4556",dec1:"8656"}, 
{jan:"5678",feb:"7890",mar:"3454",apr:"4565",may:"6756",jun:"5656",jul:"7867",aug:"8990",sep:"5676",oct:"4655",nov:"6778",dec:"8909", 
jan1:"3344",feb1:"5676",mar1:"7898",apr1:"9089",may1:"9009",jun1:"5675",jul1:"3433",aug1:"4455",sep1:"6676",oct1:"7867",nov1:"4556",dec1:"8656"} 
]); 

/** 
* 初始化函数 
*/ 
protected function inithandler(event:flexevent):void 
{ 

} 

/** 
* 刷新按钮函数 
*/ 
protected function refresh_clickhandler(event:mouseevent):void 
{ 
var hx:object = hsb.left; 
var hy:number = hsb.y; 

//var dx:number = datagrid.contentmousex; 
//var dy:number = datagrid.contentmousey; 
//alert.show("hx:"+hx+"\n"+"hy: "+hy + "\n" + "dx: " + dx + "\n" + "dy: " + dy); 
alert.show("hx:"+hx+"\n"+"hy: "+hy); 
} 

]]> 
</fx:script> 
<fx:declarations> 
<!-- 将非可视元素(例如服务、值对象)放在此处 --> 
</fx:declarations> 

<mx:vbox width="100%" height="100%" paddingbottom="10" paddingleft="10" paddingright="20" 
paddingtop="10" horizontalalign="center"> 
<mx:hbox width="100%" height="30"> 
<s:label width="100%"/> 
<s:button id="refresh" label="刷新" click="refresh_clickhandler(event)"/> 
</mx:hbox> 
<mx:datagrid width="1350" height="90%" id="datagrid" dataprovider="{gridarray}" horizontalscrollpolicy="on" textalign="center"> 
<mx:columns> 
<mx:datagridcolumn headertext="2013年01月" datafield="jan" width="200"/> 
<mx:datagridcolumn headertext="2013年02月" datafield="feb" width="200"/> 
<mx:datagridcolumn headertext="2013年03月" datafield="mar" width="200"/> 
<mx:datagridcolumn headertext="2013年04月" datafield="apr" width="200"/> 
<mx:datagridcolumn headertext="2013年05月" datafield="may" width="200"/> 
<mx:datagridcolumn headertext="2013年06月" datafield="jun" width="200"/> 
<mx:datagridcolumn headertext="2013年07月" datafield="jul" width="200"/> 
<mx:datagridcolumn headertext="2013年08月" datafield="aug" width="200"/> 
<mx:datagridcolumn headertext="2013年09月" datafield="sep" width="200"/> 
<mx:datagridcolumn headertext="2013年10月" datafield="oct" width="200"/> 
<mx:datagridcolumn headertext="2013年11月" datafield="nov" width="200"/> 
<mx:datagridcolumn headertext="2013年12月" datafield="dec" width="200"/> 
<mx:datagridcolumn headertext="2014年01月" datafield="jan1" width="200"/> 
<mx:datagridcolumn headertext="2014年02月" datafield="feb1" width="200"/> 
<mx:datagridcolumn headertext="2014年03月" datafield="mar1" width="200"/> 
<mx:datagridcolumn headertext="2014年04月" datafield="apr1" width="200"/> 
<mx:datagridcolumn headertext="2014年05月" datafield="may1" width="200"/> 
<mx:datagridcolumn headertext="2014年06月" datafield="jun1" width="200"/> 
<mx:datagridcolumn headertext="2014年07月" datafield="jul1" width="200"/> 
<mx:datagridcolumn headertext="2014年08月" datafield="aug1" width="200"/> 
<mx:datagridcolumn headertext="2014年09月" datafield="sep1" width="200"/> 
<mx:datagridcolumn headertext="2014年10月" datafield="oct1" width="200"/> 
<mx:datagridcolumn headertext="2014年11月" datafield="nov1" width="200"/> 
<mx:datagridcolumn headertext="2014年12月" datafield="dec1" width="200"/> 
</mx:columns> 
</mx:datagrid> 
<!-- 
<s:hscrollbar id="hsb" width="100%" viewport="{datagrid}"/> 
--> 

<s:hscrollbar id="hsb" width="100%"/> 

</mx:vbox> 
</s:application>

3、实现结果
Flex中怎么给表格中的滚动条定位避免刷新回到原处