Flex - Search/Filter DataGrid by Text Input

允我心安 提交于 2019-12-13 10:25:52

问题


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

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

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

回答1:


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


来源:https://stackoverflow.com/questions/30039259/flex-search-filter-datagrid-by-text-input

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!