Flex 搜索定位DataGrid里的数据

最新推荐文章于 2025-10-08 16:19:00 发布

最新推荐文章于 2025-10-08 16:19:00 发布 · 124 阅读

文章标签：

#Flex #XML #Adobe #Blog

flex 专栏收录该内容

20 篇文章

订阅专栏

本文展示了一个通过用户输入城市名称并自动滚动到匹配项的应用，应用从远程服务器获取数据并进行筛选，突出展示了信息技术在搜索和数据处理方面的强大能力。

实现的功能：

在输入框中输入你要找的城市（city）名，点击Search City按钮，然后调用了searchCity()进行搜索并自动滚屏到匹配项

<?xml version="1.0" encoding="utf-8"?>
<!--搜索定位，编辑单元格功能-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="http_test.send();">
	<mx:HTTPService id="http_test" 
		url="/flex_xml/date.xml" 
		result="onResult();">	
	</mx:HTTPService>
	<mx:Script>
		<![CDATA[
			import mx.controls.Button;
			import mx.collections.SortField;
			import mx.collections.ArrayCollection;
			import mx.collections.Sort;
			import mx.collections.IViewCursor;
			[Bindable]
			var datas:ArrayCollection;
			var cursor:IViewCursor;
			private function onResult():void{
				var sort:Sort=new Sort();
				sort.fields=[new SortField("city",true)];
				this.datas=http_test.lastResult.blog.channel.item;
				this.datas.sort=sort;
				this.datas.refresh();
				this.cursor=this.datas.createCursor();
			}
			private function  searchCity():void{
				if(search_city.text!=""){
					if(this.cursor.findFirst({city:search_city.text})){
						var idx:int=this.datas.getItemIndex(this.cursor.current);
						this.http_dataGird.scrollToIndex(idx);
						this.http_dataGird.selectedItem=this.cursor.current;
					}
				}
			}
		]]>
	</mx:Script>
	
	<mx:Panel title="{http_test.lastResult.blog.channel.title}" width="90%" height="90%">
		<mx:Form>
			<mx:FormItem label="Search">
				<mx:TextInput id="search_city"/>
			</mx:FormItem>
			<mx:FormItem>
				<mx:Button label="Search City" click="searchCity()"/>
			</mx:FormItem>
		</mx:Form>
		<mx:DataGrid id="http_dataGird" dataProvider="{datas}"  editable="true" width="100%" height="50%">
			<mx:columns>
				<mx:DataGridColumn headerText="标题" dataField="title"/>
				<mx:DataGridColumn headerText="作者" dataField="author"/>
				<mx:DataGridColumn headerText="类型" dataField="category"/>
				<mx:DataGridColumn headerText="城市" dataField="city"/>
			</mx:columns>
		</mx:DataGrid>
	</mx:Panel>
</mx:Application>