基于DHTML和JavaScript的动态 table 过滤/

分享于 

26分钟阅读

Web开发

  繁體 雙語

最新版本为 v1.0

Background

一段时间前,我研究一个典型的web应用程序,允许用户浏览和管理存储在数据库中的客户数据。 通常要做的事情是在服务器端实现这样的逻辑。 然而,一个特定的要求是用户必须能够使用一个或者多个搜索条件快速搜索和查找来自 table的一个或者多个记录。 对服务器进行往返访问被认为太贵了。 因此需要客户端解决方案。

这个解决方案使用了JavaScript和DHTML的组合。 这个脚本是以灵活性。重用性和简单性为。 换句话说,开发人员( 意味着你) 只需要包含脚本。设置几个参数,并在适当的事件处理程序中调用JavaScript调用。

功能

这里脚本提供了以下功能集:

  • 搜索条件可以是文本框,单个或者多个选择列表框
  • 允许搜索条件的组合( 作为一个和操作)
  • 有4 种匹配策略可用:
  • substring1 - 子字符串搜索( 从 1st 字符) ( 默认)
    他是一个人,而不是"超人"和"is了"他是一个人。"
  • substring - 子字符串搜索( 内部任意位置)
    e.g。"。"。MATCH"manhood"和"超人"是个人"
  • full - 完整字符串搜索
    e.g。MATCH。"人"不是"manhood","超人","is了"和"他是一个人"
  • item - 在逗号分隔字符串中搜索单词/短语
    e.g 男人会 MATCH"女孩,女孩"而不是"超人,superwoman,孩子"和 dog"
  • 如果搜索字符串中的最后一个字符为空白,则执行完整字符串 MATCH ( 在 substring1 模式)。
  • 允许关闭搜索/打开。
  • * 新收费 * 允许在表中按复选框状态过滤。 搜索条件可以表示为复选框或者单个选择下拉列表。

用法

要使用这里脚本,首先必须将它的包含在你的HTML中,如下所示:

<SCRIPTLANGUAGE="JavaScript"SRC="tablefilter.js"TYPE='text/javascript'></SCRIPT>

建议包含这里代码的地方是HTML的head 部分。

设置 table

首先,给 table 元素一个使用属性 id 或者 name的句柄。 这样,脚本就可以使用这里引用访问 table 中的行。 在单元元素中,包含一个称为 TF_colKey的自定义属性,并给它一个标签来标识列。 注意,只有在那些要搜索的列中才需要这个属性。 确保特定列中的所有单元格都使用相同的标签。 另外请注意标签名称是"不区分大小写"。

这里显示了如何在HTML中查找它的示例:

<tableid="dataTable"><tbody> 
 <tr> 
 <tdTF_colKey="ckbox"><INPUTtype="checkbox"></td> 
 <tdTF_colKey="name">Joe</td><tdTF_colKey="group">Alpha</td><tdTF_colKey="salary">400</td><tdTF_colKey="zone">North,South</td><tdTF_colKey="status">Off-Site</td></tr><tr> 
 <tdTF_colKey="name">Celest</td><tdTF_colKey="group">Beta</td><tdTF_colKey="salary">5000</td><tdTF_colKey="zone">North</td><tdTF_colKey="status">OK</td></tr></tbody></table>

这是件容易的事情 !

设置搜索表单

搜索条件输入机制是使用 HTML form 实现的。 为了识别搜索输入组,有必要使用 id 或者 name 属性为 form 元素提供一个句柄。

<formname="filter"onsubmit="TF_filterTable(dataTable, filter);return false"onreset="_TF_showAll(dataTable)">

重写 onsubmit 调用主脚本函数 TF_filterTable(table, form),传递到 tableform 元素的句柄。 这样,当用户点击输入键时,搜索将被激活。 由于 form 实际上并不提交到服务器,因此附加一个 return false 来取消提交。

如果你想让用户轻松地重置搜索表单,并通过 onreset 调用脚本函数 _TF_showAll(table) 传递到 table 元素的句柄,那么可以显示所有行。

使用文本输入框

使用下面的代码实现文本输入搜索字段:

<inputtype="text"TF_colKey="name"TF_searchType="full"onkeyup="TF_filterTable(dataTable, filter)">

属性 TF_colKey 应反映适用于该搜索参数的列的NAME。 所以在案例 上面 中,文本框中的项与它的( 单元格's TF_colKey 属性中具有值" name"的任何单元格匹配。 同样,这个属性只对搜索过程中使用的那些输入字段是必需的。 这对于构建复杂查询输入( 在后面的部分中解释) 特别有用。

属性 TF_searchType 是可选的,它定义将执行的匹配类型。 available substring1 - 子字符串搜索从第一个字符( 默认值) 搜索,substring - 只匹配完整字符串和- 匹配所有逗号分隔单词/相位。 在示例 上面 中,我们使用 full 字符串搜索。

要在用户按键时激活搜索,请重写 onkeyup 以调用传入 tableform 元素句柄的主搜索函数 TF_filterTable(table, form)

使用选择列表输入框

使用以下代码来实现选择列表输入搜索字段:

<selectTF_colKey="status"onChange="TF_filterTable(dataTable, filter)"><optionTF_not_usedvalue="">-</option><optionvalue="OK">OK</option><optionvalue="Off-Site">Off-Site</option><optionvalue="On Leave">On Leave</option></select>

属性 TF_colKey 再次应反映这里搜索参数适用的列的NAME。 所以在 上面 中,列表框中的项与它的( 单元格's TF_colKey 属性中的值" status"的任何单元格匹配。

所有其他搜索输入一样,可以在选择元素中指定可选属性 TF_searchType 来定义替代匹配策略。

注意,选项元素的value 属性将用作搜索字符串,而不是封闭文本。 如果不希望搜索某个特定选项( 比如。 单选下拉列表框中的默认值,如示例 上面 中的第一个选项,使用自定义属性 TF_not_used 排除搜索。

若要在进行选择时激活搜索,请重写 onChange 以调用传入 tableform 元素句柄的主搜索函数 TF_filterTable(table, form)

如果使用了多个选择列表( 通过在选择元素中指定 size 属性),那么选择将以或者方式进行匹配。 查看演示以了解这是如何工作的。

根据复选框状态过滤 table的内容

根据流行的需求,我添加了一个新特性,允许基于复选框的状态过滤行。 使用这里功能,可以通过以下两种方式之一指定搜索框:复选框或者下拉列表。 在 上面 演示中,我选择使用下拉列表来简化实现。

请注意,要表达搜索条件需要三种状态( 例如。 已经选中。未选中和关闭,并且在三状态模式中不能使用HTML复选框,你需要实现另一控件( 比如 )。 复选框,用于启用或者禁用搜索复选框,以完全表达搜索条件,这些搜索条件非常笨糙。 在任何情况下,代码都完全支持这个用例,我已经做了一些初步的测试,它应该。

显示下拉列表搜索条件的代码如下所示:

<SELECTonchange="TF_filterTable(dataTable, filter)"TF_colKey="ckbox"TF_searchType="checkbox"><OPTIONvalue=""selectedTF_not_used>-</OPTION> 
 <OPTIONvalue="true">checked</OPTION> 
 <OPTIONvalue="false">unchecked</OPTION></SELECT>

属性 TF_colKey 再次应反映这里搜索参数适用的列的NAME。 所以在 上面 中,列表框中的项与它的( 单元格's TF_colKey 属性中的值" ckbox"的任何单元格匹配。

注意,TF_searchType="checkbox"的使用是用于这里代码的'强制'。 另外,checked'必须必须'的选项值是一个值" true",类似的,unchecked'必须必须'的选项值是值" false"的字符串。

对于那些感兴趣的人,显示复选框搜索条件的代码如下所示:

<INPUTtype="checkbox"TF_colKey="ckbox"onclick="TF_filterTable(dataTable, filter)">
生成复杂查询输入

在项目中遇到的一个挑战是使用多个输入字段构建一个单一的搜索标准。 值为 比如 表值,并使用数字部分的一个文本框构造输入,并为单元部分使用一个选择列表。

最初,我想在脚本中直接加入这个特性。 但是我还没有找到一种优雅的方法来完成它;实现不够健壮,无法处理所有组合,而且使用起来非常复杂。 也许在未来版本中。 但是,在这期间,你可以使用以下方法:

定义从视图( 使用隐藏的输入字段或者将显示样式设置为无) 中隐藏的中间输入字段。 编写自定义函数以执行必要的格式化( 比如。 从构成复杂查询的输入中连接值,并将结果放置在隐藏字段中。 然后在搜索输入的事件处理程序中,在调用 table 筛选函数之前对格式化函数进行调用。 就是这样 !

下面是演示 上面 中复杂查询的代码 Fragment:

<input type="text" name="salText" 
 onblur="TF_concat_and_set(salText, salSelect, salHidden);
 TF_filterTable(dataTable, filter);">
<select name="salSelect" 
 onChange="TF_concat_and_set(salText, salSelect, salHidden);
 TF_filterTable(dataTable, filter);">
 <option value="" TF_not_used>-</option> <option value=" USD">USD</option> <option value=" SGD">SGD</option> <option value=" YEN">YEN</option></select><input type="hidden" name="salHidden" TF_colKey="salary" 
 TF_searchType="substring">

请注意,不要为文本定义自定义属性 TF_colKey,并且选择元素,而不是在搜索中定义该属性。 函数 TF_concat_and_set 将执行两个输入值的串联,并将结果放置在隐藏的输入中。 这里实用程序函数包含在 table 过滤器脚本中,作为其他用户的方便。

打开/关闭搜索表单

实用工具函数 TF_enableFilter(table, form, checkbox) 提供了打开或者关闭搜索功能的功能。 在关闭状态下,table 将显示所有行,并且搜索表单将被隐藏。 若要启用这里功能,请使用下面的代码段:

<input type="checkbox" checked 
 onclick="TF_enableFilter(dataTable, filter, this)">

演示代码

<scripttype="text/javascript"src="tablefilter/tablefilter.js"language="JavaScript"></script><table><trvalign="top"align="left"><td><tablecellspacing="0"cellpadding="0"border="1"><trvalign="middle"><tdcolspan="6"><divalign="center"><strong>Sales Employee Table </strong></div></td></tr><tr><td><divstyle="width: 585px;"><tablecellspacing="0"cellpadding="2"border="1"id="header"><tr><thwidth="20"><inputtype="checkbox"onclick="TF_check_uncheck_all_rows(dataTable,this.checked,0,0);"/></th><thwidth="80">Name</th><thwidth="100">Group</th><thwidth="100">Salary</th><thwidth="180">Zone</th><thwidth="95">Status</th></tr></table></div><divstyle="border: 1px solid gray; padding: 0px; margin: 0px; overflow: auto; width: 585px;height: 132px;"><tablecellspacing="0"cellpadding="2"border="1"id="dataTable"><trid="dataRow"><tdwidth="20"valign="top"tf_colkey="ckbox"><inputtype="checkbox"/></td><tdwidth="80"valign="top"tf_colkey="name">Joe</td><tdwidth="100"valign="top"tf_colkey="group">Alpha</td><tdwidth="100"valign="top"tf_colkey="salary">400 
 USD</td><tdwidth="180"valign="top"tf_colkey="zone"> North,South</td><tdwidth="80"valign="top"tf_colkey="status"> Off-Site</td></tr><trid="dataRow"><tdwidth="20"valign="top"tf_colkey="ckbox"><inputtype="checkbox"/></td><tdwidth="80"valign="top"tf_colkey="name">Celest</td><tdwidth="100"valign="top"tf_colkey="group">Beta</td><tdwidth="100"valign="top"tf_colkey="salary"> 50000 YEN</td><tdwidth="180"valign="top"tf_colkey="zone">North</td><tdwidth="80"valign="top"tf_colkey="status">OK</td></tr><trid="dataRow"><tdwidth="20"valign="top"tf_colkey="ckbox"><inputtype="checkbox"/></td><tdwidth="80"valign="top"tf_colkey="name">Brian</td><tdwidth="100"valign="top"tf_colkey="group">Alpha</td><tdwidth="100"valign="top"tf_colkey="salary">4000 
 SGD</td><tdwidth="180"valign="top"tf_colkey="zone"> North,East,South</td><tdwidth="80"valign="top"tf_colkey="status"> Off-Site</td></tr><trid="dataRow"><tdwidth="20"valign="top"tf_colkey="ckbox"><inputtype="checkbox"/></td><tdwidth="80"valign="top"tf_colkey="name">David</td><tdwidth="100"valign="top"tf_colkey="group">Alpha</td><tdwidth="100"valign="top"tf_colkey="salary">7000 
 SGD</td><tdwidth="180"valign="top"tf_colkey="zone"> West,South</td><tdwidth="80"valign="top"tf_colkey="status">On 
 Leave</td></tr><trid="dataRow"><tdwidth="20"valign="top"tf_colkey="ckbox"><inputtype="checkbox"/></td><tdwidth="80"valign="top"tf_colkey="name">Pauline</td><tdwidth="100"valign="top"tf_colkey="group">Gamma</td><tdwidth="100"valign="top"tf_colkey="salary">450 
 USD</td><tdwidth="180"valign="top"tf_colkey="zone">West</td><tdwidth="80"valign="top"tf_colkey="status">On 
 Leave</td></tr><trid="dataRow"><tdwidth="20"valign="top"tf_colkey="ckbox"><inputtype="checkbox"/></td><tdwidth="80"valign="top"tf_colkey="name">April</td><tdwidth="100"valign="top"tf_colkey="group">Gamma</td><tdwidth="100"valign="top"tf_colkey="salary">2400 
 SGD</td><tdwidth="180"valign="top"tf_colkey="zone">North, 
 West</td><tdwidth="80"valign="top"tf_colkey="status">OK</td></tr><trid="dataRow"><tdwidth="20"valign="top"tf_colkey="ckbox"><inputtype="checkbox"/></td><tdwidth="80"valign="top"tf_colkey="name">Sharon</td><tdwidth="100"valign="top"tf_colkey="group">Beta</td><tdwidth="100"valign="top"tf_colkey="salary">2000 
 SGD</td><tdwidth="180"valign="top"tf_colkey="zone"> East,South</td><tdwidth="80"valign="top"tf_colkey="status"> Off-Site</td></tr><trid="dataRow"><tdwidth="20"valign="top"tf_colkey="ckbox"><inputtype="checkbox"/></td><tdwidth="80"valign="top"tf_colkey="name">Paul</td><tdwidth="100"valign="top"tf_colkey="group">Beta</td><tdwidth="100"valign="top"tf_colkey="salary">2500 
 SGD</td><tdwidth="180"valign="top"tf_colkey="zone"> North,South,East,West</td><tdwidth="80"valign="top"tf_colkey="status">On 
 Leave</td></tr></table></div></td></tr></table></td></tr><trvalign="top"align="center"><tdheight="209"><tablewidth="601"height="40"cellspacing="0"cellpadding="0"border="0"><trvalign="bottom"><tdheight="40"><inputtype="checkbox"checked="true"onclick="TF_enableFilter(dataTable, filter, this)"/> 
 Enable Filter </td></tr><tr><td><formonsubmit="TF_filterTable(dataTable, filter);return false"onreset="_TF_showAll(dataTable)"name="filter"><tablewidth="604"height="40"cellspacing="0"cellpadding="0"border="0"><tr><tdheight="40"><inputtype="button"value="Reset filters"onclick="filter.reset()"/></td></tr><trvalign="bottom"><tdwidth="325"height="40">Name:(substring1 search)</td><tdwidth="250"height="20">Group:(full string 
 search, Multi-select)</td><tdwidth="133"height="20">Status:(full string 
 search)</td></tr><tr><tdwidth="325"height="34"><inputtf_colkey="name"size="40"onkeyup="TF_filterTable(dataTable, filter)"/></td><tdwidth="250"height="24"><selecttf_searchtype="full"tf_colkey="group"size="3"multiple="true"onchange="TF_filterTable(dataTable, filter)"><optionvalue="Alpha">Alpha</option><optionvalue="Beta">Beta</option><optionvalue="Gamma">Gamma</option></select></td><tdwidth="133"height="34"><selecttf_searchtype="full"tf_colkey="status"onchange="TF_filterTable(dataTable, filter)"><option>-</option><optionvalue="OK">OK</option><optionvalue="Off-Site">Off-Site</option><optionvalue="On Leave">On Leave</option></select></td></tr><trvalign="bottom"><tdwidth="325"height="40">Salary:(complex query)</td><tdwidth="250"height="20">Zone:(Item search, 
 Multi-select)</td><tdwidth="250"height="20">Checkbox: (Filter by 
 status of checkbox)</td></tr><tr><tdwidth="325"height="34"><inputname="salText"size="30"onblur="TF_concat_and_set(salText, salSelect, salHidden);TF_filterTable(dataTable, filter);"/><selectname="salSelect"onchange="TF_concat_and_set(salText, salSelect, salHidden);TF_filterTable(dataTable, filter);"><optionselected="true">-</option><optionvalue=" USD">USD</option><optionvalue=" SGD">SGD</option><optionvalue=" YEN">YEN</option></select><inputtype="hidden"tf_searchtype="substring"tf_colkey="salary"name="salHidden"/></td><tdwidth="250"height="34"><selecttf_searchtype="item"tf_colkey="zone"size="4"multiple="true"onchange="TF_filterTable(dataTable, filter)"><optionvalue="East">East</option><optionvalue="West">West</option><optionvalue="North">North</option><optionvalue="South">South</option></select></td><td><selecttf_searchtype="checkbox"tf_colkey="ckbox"name="salSelect2"onchange="TF_filterTable(dataTable, filter)"><optionselected="true">-</option><optionvalue="true">checked</option><optionvalue="false">unchecked</option></select></td></tr></table></form></td></tr><tr><td></td></tr></table></td></tr></table>

浏览器兼容性

这个脚本和演示仅在 IE 平台上开发和测试,因为该项目不需要Netscape兼容性。 这不应该太难让它工作在 Netscape,我可能会在我有时间的时候到达它。 我也希望在这方面有任何帮助。

结束语

好了,就是这样了。开发这个脚本并编写本文已经很有趣了。 希望你也会喜欢它 ! 哦,我很欢迎任何反馈,Bug 报告或者建议。

版本记录

  • 19/6/2007 - 版本 1.0 e 版本

    • 添加了方便的函数 TF_check_uncheck_all_rows 来帮助检查/取消选中 table 中的所有行
    • 添加了允许通过复选框 OR 单个选择下拉列表filtering过滤的功能
    • 添加了允许按复选框状态过滤的功能
  • 24/8/2001 - 版本 1.0版本

    • 添加了函数 _TF_get_valueTF_concat_and_set
    • 隐藏输入现在可以用作搜索字段
    • 实现的" substring"搜索模式
    • 改进的健壮性/灵活性:如果在搜索表单中的table 或者输入 <input>/<select> 不参与搜索( 因此没有属性" TF_colKey"),则脚本将正常忽略它。 以前,它将生成脚本错误
    • 将" TF_not_used"自定义属性重新引入选项元素。 我显然已经在v1.0版本的*DUH* 中释放了它!
  • 16/8/2001 - 版本 1.0 c 版本

    • 修改 _TF_trimWhitespace 以修剪前面和前面
    • 固定 Bug 在 _TF_filterTable 中导致 AND 搜索组合不能正常工作
  • 9/8/2001 - 版本 1.0版本

    • 添加了 _TF_showAll 函数
    • 修改 _TF_filterTable 以使用 _TF_shouldShow 函数。
    • 添加了 TF_searchType 属性以定义搜索类型
    • 实现" item"搜索
    • 添加了 _TF_shouldShow 函数
  • 26/7/2001 - 版本 1.0

    • 添加了 _TF_trimWhitespace 函数
    • 如果搜索字符串的最后一个字符是空白,则修改 _TF_filterTable 单条件搜索以包括完整的Pattern 搜索
  • 14/6/2001 - 版本 1.0初始版本


JAVA  Javascript  tab    动态  DHT  
相关文章