Flex - 通过文本输入搜索/过滤 DataGrid

Posted 2023-04-18

【中文标题】Flex - 通过文本输入搜索/过滤 DataGrid

【英文标题】：Flex - Search/Filter DataGrid by Text Input

【发布时间】：2015-07-14 09:03:49

【问题描述】：

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

---

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，但它只过滤区分大小写的完全匹配。我正在寻找它在每次笔画后进行过滤。

---

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() 函数中。很抱歉这篇冗长的帖子，并提前感谢您的帮助！

---

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();
				
				
		
			

【问题讨论】：

方法applyFiltersRefresh 对我来说似乎没问题。为什么要在searchInput_change 中再次更改过滤器功能。如果text.length 为零，那么在这种情况下，您不需要将过滤函数设置为空。实际上你甚至不需要这个功能，IMO。为什么还要写一个函数budgetGrid_filterFunc 来过滤？

搜索输入遇到什么问题？每次更改时，更改的文本都应该在HideHealthcareFilter 中传递，并且应该可以正常工作。

applyFlterRefresh 首先应用，由组合框将我的数据网格缩小到大约 445 个搜索结果（我的 XML 文件中有大约 4500 个项目）。我认为因为这两个过滤器是分开的，所以 searchInput_Change 开始过滤 4500 而不是 445 显示。因此，一旦您清除了文本输入，数据网格就会显示所有 4500。我可以通过将 searchINput_change 功能与我的 searchFilter 类相结合来使其工作。

【参考方案1】：

package com.daveoncode.filters 
	
	/**
	 * @author Davide Zanotti ([e-mail])
	 */
	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);