在DataGrid中实现多条件筛选和搜索

  • 本站文章除注明转载外,均为本站原创或者翻译。
  • 本站文章欢迎各种形式的转载,但请18岁以上的转载者注明文章出处,尊重我的劳动,也尊重你的智商;
  • 本站部分原创和翻译文章提供markdown格式源码,欢迎使用文章源码进行转载;
  • 本博客采用 WPCMD 维护;
  • 本文标题:在DataGrid中实现多条件筛选和搜索
  • 本文链接:http://zengrong.net/post/349.htm

其实,对DatatGrid进行筛选,本质是对DataGrid的dataProvider进行筛选。筛选功能通过ICollectionView接口的filterFunction属性实现。

通常,DataGrid的dataProvider会是一个ArrayCollection,而ArrayCollection实现了ICollectionView接口,因此可以直接使用filterFunction属性。

因此,要实现对一个ArrayCollection的筛选,只需要把一个自定义函数名指定给这个要被筛选的ArrayCollection的filterFunction属性,然后刷新ArrayCollection即可,例如:

cityAC.filterFunction = filterFunc;
cityAC.refresh();

在这里例子里面,我使用的数据是武汉市和宜昌市的下级行政区。可以使用三种条件进行筛选:

  1. 显示武汉市、宜昌市、或者全部的行政区
  2. 显示区、县或者县级市
  3. 根据名称或者名称的拼音进行筛选

所以,这个自定义函数就是筛选功能实现的核心:

private function filterFunc(item:Object):Boolean
{
    var _csv:int = citySelectCOB.selectedItem.data; //csv = citySelectValue
    var _lsv:String = levelSelectCOB.selectedLabel; //lsv = levelSelectValue
    var _sv:String = searchTI.text; //sv - seachValue
    var _lre:RegExp = new RegExp(_lsv, "");
    var _sre:RegExp = new RegExp(_sv, "gi");
    var _cb:Boolean = (_csv == -1) ? true : (item.parent == _csv);
    var _lb:Boolean = (_lsv == "全部") ? true : _lre.test(item.label);
    var _sb:Boolean = (_sv == "") ? true : (_sre.test(item.label) || _sre.test(item.data));
    trace("_sv:", _sv)
    trace("_sre.test(item.label):", _sre.test(item.data));
    trace("item.label:", item.data);
    return _cb && _lb && _sb;
}

filterFunc这个函数的参数就是ArrayCollection的一项,通过在判断相应项目的值,返回true的项目会显示,返回false的项目则不会显示在DataGrid中。由于是多种条件,因此在函数中进行了三重判断,最后对三重判断的结果进行
与 操作或者最终判断值。

范例效果:

  在DataGrid中实现多条件筛选和搜索 (1.7 KiB, 3,236 hits)