`
kael____
  • 浏览: 19315 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

dataGrid过滤器查询和渲染器的使用

    博客分类:
  • flex
阅读更多

以前没用过滤器,查询比较麻烦,需要遍历整个arrayCollecton

1.备份原来的数据

	private var myCt:ArrayCollection = new ArrayCollection();
			private var flag:Boolean = true;
			private function backup():void {
				if(flag) {
					myCt.removeAll();
					for(var i:int=0;i<myArrayCollection.length;i++) {
						var person:Object = myArrayCollection.getItemAt(i);
						myCt.addItem(person);
					}
				}
				flag = false;
			}

 

2.从备份中取出所有

 

	private function getAll():void {
				myArrayCollection.removeAll();
				for(var j:int=0;j<myCt.length;j++) {
					var temp:Object = myCt.getItemAt(j);
					myArrayCollection.addItem(temp);
				}
			}


以上两个方法都是为查询做准备的

3.查询

 

	private function selectInfo(key:String):void {
				//查询之前先备份绑定的ArrayCollection,并清空绑定的ArrayCollection
				backup();
				//遍历备份的数据
				if(key.length != 0) {
					myArrayCollection.removeAll();
					for(var i:int=0;i<myCt.length;i++) {
						var person:Object = myCt.getItemAt(i);
						if((person.num).indexOf(key) != -1 || (person.name).indexOf(key) != -1 || (person.company).indexOf(key) != -1) {
							myArrayCollection.addItem(person);
						} 
					}
					//如果查询结果为空
					if(myArrayCollection.length == 0) {
						Alert.show("没有查询到相关数据,请重新输入关键字查询!");
					}
				} else {
					//输入为空,返回所有数据
					getAll();
				}
				myData.invalidateList();
			}

上面是以对编号,姓名和公司的模糊查询

 

下面用filter来做:

 

<?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" minWidth="955" minHeight="600" creationComplete="init()">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.controls.CheckBox;
			import mx.core.FlexGlobals;
			import mx.events.FlexEvent;
			[Bindable]
			public var arr:ArrayCollection = new ArrayCollection([
				{name:'jim',num:'001',selected:true},
				{name:'tom',num:'002'},
				{name:'lucy',num:'003'}]);
			
			private function init():void
			{
				dg.dataProvider = arr;
			}
			
			private function textinput1_enterHandler(event:FlexEvent):void
			{
				arr.filterFunction = dgFilter;
				arr.refresh();
			}
			
			private function dgFilter(item:Object):Boolean{
				if(item["name"].toString().indexOf(txt.text)>=0 ){
					return true;
				}else if(item["num"].toString().indexOf(txt.text.toString())>=0 ){
					return true;
				}else{
					return false;
				}
			}
			
			public function a():void{
				Alert.show("hello");
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	<mx:DataGrid id="dg"  x="166" y="57">
		<mx:columns>
			<mx:DataGridColumn  dataField="selected">
				<mx:itemRenderer>
					<fx:Component>
						<mx:Button label="click me" click="outerDocument.a()"/>
					</fx:Component>
				</mx:itemRenderer>
			</mx:DataGridColumn>
			<mx:DataGridColumn headerText="姓名" dataField="name"/>
			<mx:DataGridColumn headerText="编号" dataField="num"/>
		</mx:columns>
	</mx:DataGrid>
	<s:TextInput id="txt" x="166" y="27" enter="textinput1_enterHandler(event)"/>
</s:Application>

这样就很简单了

分享到:
评论

相关推荐

    模仿EXT效果的datagrid

    EXT提供的DataGrid组件是其核心特性之一,它能够展示大量数据,并提供强大的分页、排序、过滤和编辑功能。在没有EXT库的情况下,我们可以使用JavaScript和其他相关技术来模仿EXT DataGrid的效果。 一、EXT DataGrid...

    Flex Datagrid checkbox实现

    Flex Datagrid提供了许多高级特性,如排序、过滤、分页等,可以通过自定义列样式、数据提供程序和事件处理来实现。此外,还可以通过使用ItemEditor实现单元格编辑,或者通过使用AdvancedDataGrid组件来处理更复杂的...

    Flex中DataGrid和其它控件使用

    7. **Filtering**:为用户提供筛选功能可以提高数据浏览效率,DataGrid支持基本的过滤器,而AdvancedDataGrid则提供了更复杂的过滤选项。 8. **Grouping**:AdvancedDataGrid的一个显著特性是数据分组,可以根据...

    Flex DataGrid组件 使用详解

    6. **自定义渲染**:DataGrid允许使用HeaderRenderer类自定义列头的显示,同时可以为单元格创建自定义渲染器,以满足特殊的数据展示需求。 7. **事件处理**:DataGrid组件拥有丰富的事件,如itemClick、sortChange...

    FLEX的一个DataGrid例子

    如果需要实现更复杂的过滤功能,可能需要编写自定义的过滤器函数。 7. **扩展功能**: DataGrid还支持行选择、多选、复选框、拖放等功能,可以根据项目需求进行配置。 在“Customer_DataGrid”这个例子中,很可能...

    flex datagrid 前台 分页

    3. **用户界面**:创建分页控件,如页码选择器和记录数显示,通过事件监听来响应用户操作,更新DataGrid的数据。 4. **数据排序和过滤**:如果需要在前台进行数据排序或过滤,要确保这些操作不会影响到整个数据集,...

    wpf DataGrid分组

    1. **虚拟化**:启用DataGrid的VirtualizingStackPanel可以使只渲染可视区域内的行,显著减少内存占用和渲染时间。 2. **数据绑定优化**:使用ICollectionView接口,它可以提供实时更新和排序,同时避免一次性加载...

    利用EasyUi和C#实现手风琴式菜单、tabs和datagrid的完整代码,MVC模式,带数据库

    在本文中,我们将深入探讨如何使用EasyUI、jQuery和C#在MVC模式下实现手风琴式菜单、tabs和datagrid的功能,并与数据库进行交互。EasyUI是一个基于jQuery的前端框架,提供了丰富的UI组件,而C#是.NET框架中常用的...

    datagrid合并单元格,MecGrid实现

    在实际项目中,`MecGrid`还提供了其他高级特性,如自定义渲染器、性能优化和可扩展性。通过充分利用这些特性,开发者可以创建出满足各种业务需求的灵活且强大的数据展示界面。 总的来说,`MecGrid`为Flex的`...

    flex DataGrid 嵌套复选按钮

    总的来说,这个Flex4的`DataGrid`实现展示了如何通过自定义列头渲染器和事件监听来增加交互性,使用户能够方便地对数据进行批量操作,这对于数据密集型的应用程序非常有用。通过`CheckBoxHeaderColumn`和相应的事件...

    datagrid-filter

    datagrid-filter 是一个与数据展示相关的前端组件,常用于表格数据的筛选和过滤。在这个特定的场景中,用户遇到了一个问题:当尝试向datagrid-filter插入数据时,组件会错误地显示两个相同的条目。这个问题可能是...

    datagrid 合并单元格

    3. 自定义渲染器:可能需要自定义`headerRenderer`来控制合并后的头部样式,以及`itemRenderer`来处理行内合并单元格的显示。 4. 事件监听:有时需要监听`group`或`sort`事件,以便在数据变化时动态调整合并状态。 ...

    在Flex的DataGrid中使用CheckBox

    - DataGrid 是 Flex 提供的一个用于显示数据表格的组件,它支持各种列类型,可以自定义单元格渲染器。 3. **CheckBox 组件:** - CheckBox 是一个表示复选框的小方框,用于收集用户的布尔选择(即 true 或 false...

    DataGridFilter_demo.zip

    DataGrid控件可以绑定到各种数据源,如数组、列表或数据库查询结果,自动渲染成表格形式。默认情况下,DataGrid提供基本的排序功能,但不包含列过滤器。为了实现过滤,我们需要扩展其功能。 要创建一个自定义...

    Flex DataGrid 插入子组件

    对于更复杂的场景,可以使用运算符渲染器(OperatorRenderer)。它允许在单元格中插入复杂的组件,如下拉列表、滑块等,以实现更丰富的数据过滤或操作功能。 四、实例:添加Button到DataGrid 以下是一个简单的例子...

    Flex dataGrid 自定义显示列

    DataGrid能够自动绑定到数据源,并根据数据字段创建列,但往往我们需要根据业务需求对列的显示进行定制,比如更改列头、调整列宽、添加样式或者使用自定义渲染器。 首先,我们要理解DataGrid的列配置。在Flex中,每...

    Flex FooterSpark DataGrid 表格制作

    7. **自定义扩展**: Spark DataGrid的模块化设计使得开发者能够轻松地扩展其功能,例如添加自定义列渲染器、编辑器,或者创建自定义的脚部组件以满足特定需求。 总之,"Flex FooterSpark DataGrid 表格制作"是一个...

    Laravel开发-datagrid

    6. **过滤和搜索**:根据需求,你可以添加搜索框和过滤器,让用户自定义显示的数据。这通常涉及在控制器中处理这些参数,并将其应用于Eloquent查询。 7. **排序**:数据网格需要支持列的排序。在控制器中,根据用户...

    datagrid-bundle:该捆绑软件的主要目的是注册FSi DataGrid组件服务和Twig DataGrid渲染功能

    `datagrid-bundle` 提供了对Twig的扩展,允许开发者使用熟悉的模板语法来配置和美化DataGrid。这包括列的定义、样式设置、操作按钮等,极大地提高了开发效率。 **使用方法** 在你的Symfony2项目中安装`datagrid-...

    具有分页功能的flex的DataGrid

    3. **自定义列渲染**:根据需求,我们可能需要对不同列的数据进行格式化或显示额外信息,例如,日期列可以使用自定义的日期格式器,图片列则需要加载图片资源。 4. **交互性**:确保用户可以通过鼠标或键盘轻松导航...

Global site tag (gtag.js) - Google Analytics