Flex-通过文本输入搜索/筛选DataGrid [英] Flex - Search/Filter DataGrid by Text Input
问题描述
我使用的是在网上找到的过滤器设置，但无法使用三个组件(comboBox，复选框和文本输入)过滤mx:DataGrid.该复选框和comboBox可以与我的IFilter接口和Filter类一起正常使用，但无法使搜索输入正常工作.这是源文件中的代码
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屋！
