帮酷LOGO
0 0 评论
文章标签:INT  PAR  数据  Datagrid  parse  表达式  FLEX  EXP  

介绍

Flex datagrid一起使用的现有过滤方法似乎是非常强的UI。 在这里实现中,将提供一个简单的"搜索样式"筛选器。 我相信这提供了更直观的过滤功能,在实现中,扩展过滤功能非常简单。 同时,它允许UI设计者在提供选项和反馈给用户的情况下更加创造性。

使用演示

演示文稿是作为SWF文件提供的。 你需要为你的浏览器安装 Flash Player 9. 然后你可以将SWF文件放入浏览器窗口并测试它。

要开始使用该应用程序,你可以在过滤文本框中开始键入。 键入'mi'或者'12'并查看发生了什么。

若要执行列特定搜索,请键入'( 名称。 '或者或或者'( 名称^ j )'或者或或者'( 名称 ~$ )'或者或或者'( 电话。 21 )"。"。"。"。"。继续。

使用演示继续。

在当前的实现中,我提供了两。 如果搜索文本以除 ( 之外的任何内容开始,则使用的筛选方法是一个简单的筛选。 如果第一个字符是 (,那么在当前实现中,它默认为列搜索模式。

当开始键入打开的括号时( 当前实现将引导你,通过工具提示输入它的余的筛选器文本)。

可以使用的运算符在代码中是可以定制的。 重用这里代码时,你可以选择你的可能操作符是什么。 我使用了以下命令:

  • ><=!= 被用作常用的- GREATER,小于,小于,等于,等于。 用于表示所有逆或者不匹配。 这些是字符串比较。
  • .. 用作'包含'和'不包含'运算符。!
  • ^$ 分别用作'开始'和'结尾为'操作符。 其中每一个都可以是'非'-ed,换句话说,^ 是'不以',$ 是'并不以'。!
  • ~ 用于区分大小写的过滤。 比如,在 (Name ~^ Ben)(Name ^ Ben) 之间,第一个是区分大小写的搜索,第二个是不区分大小写的。

另外,我打算使用这些字符,但是我还没有对它们进行编码。 ( 这需要更多的思考:) )。

  • 用于数值比较的#。比如 在 (Name #> 025)(Name> 025) 之间,第一个做数值比较,第二个是文本比较。 ( 我已经写了这个,但似乎正在工作,但是我并不知道为什么。 这可能是由于ActionScript中有些怪癖,我不知道。 它是默认的,我不知道它是什么,所以应该找出原因,或者使它以已经知的方式工作。

注意:在这一点上,匹配运算符的正则表达式是硬编码的,如果添加不同的运算符,则需要更改。 案例运算符: ColumnOperatorValueParser.as 区域内的区域。

使用代码

代码非常简单,并且没有什么原因可以在这里复制粘贴部分。 然而,活动解释的流程是有用的。 代码的相关部分在高级别具有以下流:

  • 创建一个新的分析器,使用允许的列名集,可以从datagrid本身和允许的操作符集获取。 解析期间,当发现运算符标记上的潜在列时,将它与可用值的可用列表进行比较。
  • 等待用户键入内容。
  • 解析已经更改的输入文本( 或者表达式)。
  • 如果遇到无效表达式,捕获事件( INVALID_EXPRESSIONEMPTY_STRING ) 并向用户显示有用的注释/反馈。
  • 如果提供正确表达式,则可以在类似这样的元组中获取已经解析表达式的列表: [column_name, operator, search_value] 表示这里类型的类是 ColumnOperatorValueTriplet
  • 当遇到正确的表达式时,解析器 ColumnOperatorValueParser 会引发一个 PARSING_COMPLETE 类型的FilterStringEvent
  • 当正确的解析表达式列表可用时,可以使用普通的filterFunction<data id>.refresh() 调用过滤数据。
  • ColumnOperatorValueTriplet 操作符上,通常可以执行 switch( ),并执行比较操作以使用 ColumnOperatorValueTriplet 中的column_namesearch_value 字段来适应数据的类型。

Points of Interest

解析算法

我在一起的解析算法非常简单。 典型的表达式语句应具有以下形式:

((EOL) | (BEGIN_CHAR & COLUMN_NAME & OPERATOR & SEARCH_VALUE & (SEPARATOR_CHAR | EOL)))

例如:( 名字= 本) ( 年龄> 25 )

一些值得注意的点:

  • 首先,免责声明,我认为解析算法工作不正常。 我已经把代码和Flex编码在一起,因为代码不是从网上复制出来的,所以我还没有很好地在FlexBuilder中正确调试。 想象一下,总的说来,长的故事,它现在可以工作,并且我很乐意把反馈结合起来。
  • 现在已经说过了,这里有什么可以让你知道的。

  • 有一个 NextExpectedTokenList,它包含可能下一个标记的列表。 这必须是一个有序的清单。 如果没有遇到第一个在列表中的令牌类型,则只有下一个选中的标记类型是。
  • 接下来要检查的令牌在 NextExpectedToken 中维护。
  • 在某些点上,| 符号是下一个字段的许多可以能性之一,这将导致 NextExpectedTokenList 中的一个条目。 如果它们都没有遇到,那么输入字符串中有一个错误。
  • 对于&符号的剩余位置,只有一个可以能存在,如果没有遇到,则在输入字符串中存在错误。
  • 当需要特定的令牌时,将执行匹配的正则表达式。 列名通常以字母开头,并且可以包含字母数字和下划线。 运算符必须是给定列表中的一个;这个正则表达式当前硬编码,使用一些已经知字符。 搜索值可以是除右括号之外的任何。
  • 当遇到适当的令牌时,将创建包含 ColumnOperatorValueTriplet 项列表的parsedExpressions array。
    • 当遇到 column_name 时,将创建一个新的ColumnOperatorValueTriplet 项。
    • 当遇到 OPERATOR 时,运算符将添加到添加的最后一个 ColumnOperatorValueTriplet
    • 当遇到 search_value 时,值将添加到添加的最后一个 ColumnOperatorValueTriplet
  • 当未遇到预期的令牌或者输入字符串为空时,将引发适当的FilterStringEvent 事件。
  • 当解析结束时没有错误时,将引发 PARSING_COMPLETEFilterStringEvent
  • 应用程序处理事件并执行它的认为适合的任何操作。 理想情况下,过滤需要在前端只在 PARSING_COMPLETE 上完成。 在它的他任何情况下,它都足以提供一些反馈,允许用户更正输入字符串。

FilterFunction实现

为了重用这个代码,我已经完成了两个过滤函数实现,为任何人提供了一个示例和一个就绪集。 这些函数可以作为 ColumnOperatorValueParser 中的static 函数。 这些可能被重用和/或者修改,因为你可能需要你的应用程序。

  • simpleFilterData: 在给定数据的任意列中检查输入字符串。 完成的检查是'包含'。
  • columnarFilterData: 使用解析过的表达式来根据一些已经定义的运算符进行比较。

用户关于输入表达式的事件的反馈

在当前实现中,事件被用来为用户提供适当的反馈。 这将允许用户更小的学习曲线,并提供关于期望的信息。

TODOs和未来方向

  • / 对日期比较。比如,(Name/> 10/5/2009)(Name> 10/5/2009) 之间的第一个日期比较,第二个进行文本比较。 还没有实现这里功能 !
  • 在搜索栏中输入时,可以通过自动完成提供建议,或者通过弹出组合框进行输入。
  • 为用户提供'按这里单元格筛选'- 用户将选择一个单元格(。右键单击并选择),然后将项自动放入筛选条中。 这也可以在一个单元格拖放到过滤条上完成。
  • 当在表达式中提供搜索值时,除右括号外的所有字符( ) ) 均可以接受。 但是,有一种方法可以在搜索值中进行验证,例如,如果列的数据类型是数字,则只允许数字。 对于日期,电子邮件地址,邮政编码,电话号码,等等,如果需要。

历史记录

  • 19th 2009年10月 - 当前版本是第一个。


文章标签:数据  INT  PAR  EXP  parse  FLEX  Datagrid  表达式  

Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语