JSF richfaces的dataTable组件是一个用于显示列表数据的控件,可以方便地支持数据分页,条件过滤等常用功能,其中的filter就是用于根据用户的输入过滤出符合条件的记录,但是filter在IE和firefox浏览器下不兼容。
问题的描述:
filter的使用如下:
<rich:dataTable> <rich:column filterBy="......" filterEvent="......" filterValue="......"/> </rich:dataTable>
如果filterEvent的值为oninput时,IE和Firefox浏览器都支持,但是有一个弊端是每次输入一个字符时都会触发filter自动过滤,如果数据量比较大时,频繁过滤不是很方便,效率也比较低下。另外很多时候人们习惯于输入完之后点击回车键才过滤,因此将filterEvent的值改为onchange,测试发现bug:
IE输入完成点击回车没有反应,必须手动点击鼠标使鼠标失去焦点才会触发filter起作用。
Firefox输入完成之后点击回车自动触发filter,功能正常。
网上查询得知IE和Firefox对onchange事件的支持不同,IE必须使用onpropertychange才可以实现firefox浏览器onchange同样功能的事件。
解决办法:
查询richfaces的参考文档发现,dataTable的filterEvent事件默认是鼠标失去焦点的onblur事件,因此解决思路如下:
为整个dataTable添加键盘按键事件,当捕获到按回车键事件时,让filter失去焦点即可,具体代码如下:
<mce:script type="text/javascript"><!-- function doFilter(event){ //捕获IE和Firefox的键盘事件 event = event || window.event; code = event.keyCode; //处理回车按键事件 if (code == 13) { if(event.srcElement.id == "filter输入框id"){ //让filter输入框失去焦点 event.srcElement.blur(); } } } // --></mce:script> <rich:dataTable onkeyup="doFilter(event)"> <rich:column filterBy="......" filterValue="......"/> </rich:dataTable>
经过测试发现,IE和Firefox浏览器在filter输入结束点击回车之后,均自动触发filter,达到预期要求,完美解决问题。