`
yexin218
  • 浏览: 973079 次
  • 性别: Icon_minigender_1
  • 来自: 珠海
社区版块
存档分类
最新评论

Flex-DataGrid使用关键字过滤结果

    博客分类:
  • Flex
阅读更多

这里主要展示如何使用搜索的关键字过滤DataGrid的行。其实也不是很难,因为DataGrid使用dataProvier可以是 ArrayCollection,并且ArrayCollection本身就有过滤的功能即使用变量filterFunction.所以基本上,你的 DataGrid和dataProvider像如下的定义:

[Bindable] public var dpRows:ArrayCollection;

 然后你可以用一种简单的方法来创建过滤的方法:

public function filterResults():void
 {
    dpRows.filterFunction = _sortRows;
    dpRows.refresh();
}

 最后,是使用_sortRows方法来对符合过滤关键字的行返回一个ture--那行就可见,否则返回false--那行就被隐藏。

private function _sortRows(item:Object):Boolean
{
            var col:String = cmbCol.selectedItem.data as String;
            var key:String = keyword.text;
            key = key.toLowerCase();
            if (key != "")
            {
                if (col != "any")
                {
                    var value:String = item[col];
                    value = value.toLowerCase();
                    if (value.indexOf(key)>= 0)
                    {
                        return true;
                    }
                } else {
                    for (var o:String in item)
                    {
                        value = item[o];
                        value = value.toLowerCase();
                        if (value.indexOf(key)>= 0)
                        {
                            return true;
                        }
                    }
                }
            } else {
                return true;
            }
            return false;
}

 查看Demo演示

 

所以全部代码:FilterControl.as

package
{
    import mx.collections.ArrayCollection;
    import mx.core.Application;
    import mx.controls.TextInput;
    import mx.controls.Button;
    import mx.controls.ComboBox;
    
    public class FilterControl extends Application
    {
        [Bindable] public var dpColumns:ArrayCollection;
        [Bindable] public var dpRows:ArrayCollection;
            
        public var keyword:TextInput;
        public var btnFilter:Button;
        public var cmbCol:ComboBox;
        
        public function FilterControl()
        {
        }

        public function init():void
        {
            dpColumns = new ArrayCollection();
            dpColumns.addItem({data:'any', label:'Any'});
            dpColumns.addItem({data:'type', label:'Type'});
            dpColumns.addItem({data:'name', label:'Name'});
            dpColumns.addItem({data:'url', label:'URL'});
            dpColumns.addItem({data:'desc', label:'Descriptiom'});
            dpColumns.addItem({data:'tags', label:'Tags'});
            
            dpRows = new ArrayCollection();
            var item:Object = new Object();
            item.type = "Website";
            item.name = "Expectal.com";
            item.url = "http://www.expectal.com";
            item.desc = "Your Professional Flash Photo Gallery with Slideshow and Background Music";
            item.tags = "Flash, Gallery, Slideshow, Music";
            dpRows.addItem(item);
            
            item = new Object();
            item.type = "Website";
            item.name = "Franto.com Blog";
            item.url = "http://blog.franto.com";
            item.desc = "Your Professional Flash Photo Gallery with Slideshow and Background Music";
            item.tags = "Flash, Flex, AIR, Tutorial";
            dpRows.addItem(item);
            
            item = new Object();
            item.type = "Tutorial";
            item.name = "FlexSpy - Flex/AIR inspector";
            item.url = "http://www.franto.com/blog2/flexspy-inspector-in-your-flexair-application";
            item.desc = "FlexSpy - Kind of what Firebug does for HTML/Ajax applications but for Flex 2.0/3.0 applications.";
            item.tags = "Flex, AIR, Tutorial";
            dpRows.addItem(item);
            
            item = new Object();
            item.type = "Tutorial";
            item.name = "Quick Outline in FlexBuilder - Ctrl+O";
            item.url = "http://www.franto.com/blog2/quick-outline-in-flexbuilder-ctrlo";
            item.desc = "Speed up your development with Quick Outline in FlexBuilder";
            item.tags = "Flex, AIR, Tutorial";
            dpRows.addItem(item);
            
            item = new Object();
            item.type = "Tutorial";
            item.name = "Custom header in DataGrid";
            item.url = "http://www.franto.com/blog2/custom-header-in-datagrid";
            item.desc = "Custom header in DataGrid";
            item.tags = "Flex, AIR, Tutorial";
            dpRows.addItem(item);
            
            item = new Object();
            item.type = "Tutorial";
            item.name = "Custom header in DataGrid 2";
            item.url = "http://www.franto.com/blog2/custom-header-in-datagrid-part-2";
            item.desc = "Custom header in DataGrid - part 2";
            item.tags = "Flex, AIR, Tutorial";
            dpRows.addItem(item);
            
            item = new Object();
            item.type = "Tutorial";
            item.name = "Quick Outline in FlexBuilder - Ctrl+O";
            item.url = "http://www.franto.com/blog2/quick-outline-in-flexbuilder-ctrlo";
            item.desc = "Speed up your development with Quick Outline in FlexBuilder";
            item.tags = "Flex, AIR, Tutorial";
            dpRows.addItem(item);
            
            
        }
        
        public function resetFilter():void
        {
            keyword.text = "";
            filterResults();
        }
        public function filterResults():void
        {
            dpRows.filterFunction = _sortRows;
            dpRows.refresh();
        }
        
        private function _sortRows(item:Object):Boolean
        {
            var col:String = cmbCol.selectedItem.data as String;
            var key:String = keyword.text;
            
            key = key.toLowerCase();
            
            if (key != "")
            {
                if (col != "any")
                {
                    var value:String = item[col];
                    value = value.toLowerCase();
                    
                    if (value.indexOf(key) >= 0)
                    {
                        return true;
                    }
                } else {
                    for (var o:String in item)
                    {
                        value = item[o];
                        value = value.toLowerCase();
                        if (value.indexOf(key) >= 0)
                        {
                            return true;
                        }
                    }
                }
            } else {
                return true;
            }
            
            return false;
        }
    }
}

 FilterFunction.mxml:

<?xml version="1.0" encoding="utf-8"?>
<FilterControl xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns="*"
    layout="vertical" applicationComplete="init()">
    
    <mx:Style source="default.css"/>
    
    <mx:HBox width="100%">
        <mx:Label text="Filter:"/>
        <mx:TextInput id="keyword" width="100%"/>
        <mx:ComboBox id="cmbCol" dataProvider="{dpColumns}"/>
    </mx:HBox>
    <mx:HBox width="100%" horizontalAlign="right">
        <mx:Button label="Filter" id="btnFilter" click="filterResults()" width="150"/>
        <mx:Button label="Reset" click="resetFilter()" width="150"/>
    </mx:HBox>
    <mx:DataGrid width="100%" height="100%" dataProvider="{dpRows}" variableRowHeight="true">
        <mx:columns>
            <mx:DataGridColumn dataField="type" headerText="Type" width="80"/>
            <mx:DataGridColumn dataField="name" headerText="Name" width="180"/>
            <mx:DataGridColumn dataField="url" headerText="URL"/>
            <mx:DataGridColumn dataField="desc" headerText="Description"/>
            <mx:DataGridColumn dataField="tags" headerText="Tags" width="200"/>
        </mx:columns>
    </mx:DataGrid>
    
</FilterControl>

 下载地址:http://www.franto.com/blog2/wp-content/uploads/examples/filterfunction/srcview/

原创作者:Franto 。翻译整理:一路风尘
4
2
分享到:
评论
1 楼 echozhjun 2009-11-13  
在选择any的时候的代码:
for (var o:String in item) 

       value = item[o]; 
       value = value.toLowerCase(); 
       if (value.indexOf(key) >= 0) 
       { 
             return true; 
       } 
}
有个小Bug。item本身有个系统key:mx_internal_uid,有可能该UUID中包含搜索的key。那么过滤的内容就不对了。

相关推荐

    flex-datagrid-advancedDataGrid-demo

    本示例"flex-datagrid-advancedDataGrid-demo"显然是为了演示如何在Flex应用中有效地使用这两种数据网格控件。 首先,DataGrid是最基础的数据展示组件,它允许开发者以表格的形式展示数据,支持排序、选择和编辑等...

    flex-datagrid中,双击选中的数据,自动把数据移动到另一个datagrid里

    flex-datagrid中,双击选中的数据,自动把数据移动到另一个datagrid里 希望可以帮助新的新手!

    Flex-DataGrid源码及资料

    Flex DataGrid是一款在Adobe Flex开发环境中广泛使用的组件,主要用于展示和操作大量结构化的数据。它是一种灵活的表格视图,可以轻松地实现数据的排序、筛选、分页等功能。在这个"Flex-DataGrid源码及资料"的压缩包...

    使用搜索的关键字过滤DataGrid的行

    标题中的“使用搜索的关键字过滤DataGrid的行”是指在数据网格(DataGrid)控件中,通过输入关键字实现对显示行的实时筛选。在IT领域,DataGrid是一种常见的组件,用于展示大量的结构化数据,常见于桌面应用或Web...

    jeasyui-datagrid-datagrid

    JeasyUI DataGrid是一款基于jQuery的轻量级组件,它为开发者提供了丰富的功能,如数据分页、排序、过滤等,极大地提高了开发效率。本文将深入探讨JeasyUI DataGrid的使用方法、特性以及常见问题的解决方案。 1. **...

    easyui-datagrid2-demo.zip

    EasyUI 是一个基于 jQuery 的前端框架,用于快速构建用户界面,尤其适合开发管理类Web应用。其中 Datagrid 是 EasyUI 的一个...在实际项目中,根据需求可以进一步扩展 Datagrid 的功能,如增加过滤、搜索、导出等特性。

    jeasyui-datagrid-datagrid2.zip

    jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip

    easyui-datagrid可编辑可过滤的DEMO

    EasyUI DataGrid的过滤功能通过在列头添加过滤图标实现,用户可以输入文本、选择范围或者使用下拉框等进行过滤。过滤条件可以是单一的,也可以组合使用,提供了非常灵活的筛选机制。 在实际应用中,这些功能对于...

    Easyui-DataGrid表头拖动效果

    UI设计在一个系统中的重要性是不容忽视的,我们开发人员要做到:让用户去控制...给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头灵活显示http://blog.csdn.net/u010293698/article/details/47956865

    easyui-datagrid21-demo.zip

    开发者通常会使用这些数据来模拟实际环境,检查 Datagrid 的显示、编辑和操作是否正常。 在实践中,EasyUI Datagrid21 演示实例不仅教会我们如何创建和配置 Datagrid,还涵盖了前端与后端的数据交互,以及如何利用...

    wpf-datagrid-access DB

    总结,"wpf-datagrid-access DB"的主题涵盖了如何在WPF应用中使用Datagrid控件与Access数据库进行数据操作。通过理解数据绑定、MVVM模式以及ADO.NET组件的使用,开发者可以创建出功能强大的数据驱动的WPF应用程序。

    easyui-datagrid之间拖拽效果demo

    首先,Datagrid 是 EasyUI 提供的一种表格控件,它可以展示大量结构化的数据,并支持排序、分页、过滤等多种功能。在拖拽效果中,用户可以直观地将一行或多行数据从一个 Datagrid 拖动到另一个 Datagrid,实现数据的...

    FLEX的datagrid合计、平均值

    在Flex开发中,Datagrid组件是用于展示数据集的一个强大工具,它允许用户以表格的形式查看和操作数据。本文将深入探讨如何在Flex的Datagrid中实现数据的合计与平均值计算,帮助开发者更好地理解和应用这些功能。 ...

    flex 自定义 datagrid 列头带组合框进行过滤

    这个主题——"flex 自定义 datagrid 列头带组合框进行过滤",涉及到的关键知识点包括Flex组件定制、DataGrid列头的扩展以及ComboBox控件的使用。 1. Flex组件定制: 在Flex中,我们可以使用MXML和ActionScript来...

    react-datagrid:为 React 精心打造的 DataGrid

    如果你使用webpack和css-loader ,你可以要求它: require('react-datagrid/index.css') 例子 var React = require ( 'react' ) var DataGrid = require ( 'react-datagrid' ) var data = [ { id : '1' , ...

    Flex教程DataGrid归类.pdf

    通过以上知识点,我们可以了解到,Flex教程DataGrid归类涉及到的主要内容包括Flex基础、DataGrid组件的使用和定制,以及如何通过MXML和ActionScript对DataGrid进行操作和数据绑定。开发者需要掌握这些知识点才能在...

    flex中dataGrid导出数据到excel中

    flex中dataGrid导出数据到excel中,不存在乱码问题

    Flex FooterSpark DataGrid 表格制作

    3. **高效开发**: 描述中提到的“高效表格开发技术实例”,意味着教程可能会涉及如何优化DataGrid的性能,如通过虚拟化技术减少内存消耗,使用数据代理减少数据绑定的复杂性,以及如何利用分页和过滤功能来提升用户...

Global site tag (gtag.js) - Google Analytics