zoukankan      html  css  js  c++  java
  • Flex中怎么给表格中的滚动条定位

    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+"
    "+"hy: "+hy + "
    " + "dx: " + dx + "
    " + "dy: " + dy);
    				Alert.show("hx:"+hx+"
    "+"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、实现结果


  • 相关阅读:
    重建索引报错-python数据分析
    机器学习实战1-2.1 KNN改进约会网站的配对效果 datingTestSet2.txt 下载方法
    机器学习实战1-1 KNN电影分类遇到的问题
    权限掩码umask详解
    spark配置(7)--on yarn配置
    spark配置(6)-独立应用程序
    spark配置(5)-独立应用程序
    spark配置(4)-----Spark Streaming
    spark配置(3)
    spark配置(2)
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314803.html
Copyright © 2011-2022 走看看