Flex - 按文本输入搜索/过滤 DataGrid [英] Flex - Search/Filter DataGrid by Text Input

查看:23
本文介绍了Flex - 按文本输入搜索/过滤 DataGrid的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用的是网上找到的过滤器设置,但在使用三个组件(组合框、复选框和文本输入)过滤 mx:DataGrid 时遇到问题.复选框和组合框与我的 IFilter 接口和过滤器类一起正常工作,但我无法使搜索输入正常工作.这是源文件中的代码

I’m using a filter setup that I found online and I’m having trouble filtering my mx:DataGrid using three components – comboBox, checkbox and text input. The checkbox and comboBox are working properly with my IFilter interface and Filter class, but I’m unable to get the search input working correctly. Here’s of the code from the source files

package com.daveoncode.filters {
	
//Defines a common interface that must be implemented by all the filters.
	
	public interface IFilter {
		
		function apply(item:Object):Boolean;
		
	}
	
}

package com.daveoncode.filters {
	
	// The only purpose of Filter is to be wrapped by one or more filters (classes which extend AbstractFilter)
	
	public class Filter implements IFilter {

		// A wildcard which means "all values are accepted"
		
		public static const ALL_VALUES:String = "*";
		
		public function Filter() {
			
		}

		// This is a basic implementation of IFilter interface, the value returned is always true and only apply() 
		// methods implemented by subclasses of AbstractFilter have real buisiness logic implementation
		 
		//@return Boolean <p>Always true</p>
		 
		public function apply(item:Object):Boolean {
			
			return true;
			
		}
		
	}
	
}

package com.daveoncode.filters {
	
	public class SearchFilter extends AbstractFilterDecorator {
		
		// @param target IFilter <p>A reference to a wrapped IFilter object</p>
		// @param value Object <p>Value against which the filter is applied</p>
		
		public function SearchFilter(target:IFilter, value:Object) {
			
			super(target, value);
			
		}
		
// Impl of IFilter int by overr the dummy apply() of AbstractFilterDecorator
		
		override public function apply(item:Object):Boolean {
			

	return this._target.apply(item) && (this._value == item.Package || this._value == Filter.ALL_VALUES);
			
		}
		
	}
	
}

我正在尝试使搜索功能与下面的 applyFilterRefresh() 过滤器功能一起使用.目前它确实搜索 DataGrid,但它只过滤区分大小写的精确匹配.我正在寻找它在每次笔画后进行过滤.

I’m trying to get the search functionality to work with my applyFilterRefresh() filter function below. Currently it does search the DataGrid, but it only filters case sensitive exact matches. I’m looking for it to filter after each stroke.

private function applyFiltersRefresh():void {
							
		var data:ArrayCollection = ArrayCollection(sourceData);
		var filter:IFilter = new Filter();
					
		//combo box filtering - works great!
		filter = new FacilityTypeFilter(filter, facilityFilter.value);
		filter = new BedRangeFilter(filter, bedFilter.value);
				
		//checkbox filtering – works great!
		if (hideHealthcareVar == "Healthcare"){
		filter = new HideHealthcareFilter(filter, hideHealthcareVar.valueOf());
				}
				
		//Search box filtering – needs 
		 if (search.text.length > 0){
			var tempSearch:String = search.text;
			 filter = new HideHealthcareFilter(filter, tempSearch);
		}
				
		data.filterFunction = filter.apply;
		data.refresh();
			
	
				
	}

我能够以这种方式过滤我的数据网格(通过每次击键和不区分大小写),但是因为这样过滤器最终会相互覆盖而不是同时进行.这就是为什么我试图将它包含在我的 ApplyFiltersRefresh() 函数中.很抱歉发表冗长的帖子,并提前感谢您的帮助!!

I am able to filter my datagrid (by each key stroke and non-case sensitive) this way, but because then the filters end up overriding each other instead of doing both at the same time. That’s why I’m trying to include it in my ApplyFiltersRefresh() functions. Sorry for the lengthy post and thanks in advance for the help!!

private function budgetGrid_filterFunc(item:Object):Boolean {
		if (search.text.length == 0) return true;
		var f:String = "ig";
		var packageSearch:RegExp = new RegExp(search.text, f);
		var packageMatch:Boolean = packageSearch.test(item.Package);
				
		var itemSearch:RegExp = new RegExp(search.text, f);
		var itemMatch:Boolean = itemSearch.test(item.ItemNum);
				
		var descriptionSearch:RegExp = new RegExp(search.text, f);
		var descriptionMatch:Boolean = descriptionSearch.test(item.ItemDescription);
				
		return (packageMatch || itemMatch || descriptionMatch);
				
				
}

private function searchInput_change():void {
				

		if (search.text.length == 0) {
			budgetGrid.dataProvider.filterFunction = null;
		} else {
			budgetGrid.dataProvider.filterFunction = budgetGrid_filterFunc;
		}
			budgetGrid.dataProvider.refresh();
				
				
		}
			

推荐答案

package com.daveoncode.filters {
	
	/**
	 * @author Davide Zanotti (davidezanotti@gmail.com)
	 */
	public class searchFilter extends AbstractFilterDecorator {
		
		/**
		 * @param target IFilter <p>A reference to a wrapped IFilter object</p>
		 * @param value Object <p>Value against which the filter is applied</p>
		 */
		public function searchFilter(target:IFilter, value:Object) {
			
			super(target, value);
			
		}
		
		/**
		 * Implementation of IFilter interface by overriding the dummy apply() of AbstractFilterDecorator
		 */
		override public function apply(item:Object):Boolean {
			var f:String = "ig";
			var packageSearch:RegExp = new RegExp(this._value, f);
			var packageMatch:Boolean = packageSearch.test(item.Package);
			
			var itemSearch:RegExp = new RegExp(this._value, f);
			var itemMatch:Boolean = packageSearch.test(item.ItemNum);


			return this._target.apply(item) && (packageMatch  || itemMatch);
			
		}
		
	}
	
}

这篇关于Flex - 按文本输入搜索/过滤 DataGrid的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆