在 primefaces 数据表中排序
Posted
技术标签:
【中文标题】在 primefaces 数据表中排序【英文标题】:Sorting in primefaces datatable 【发布时间】:2013-02-16 23:15:20 【问题描述】:我正在使用 primefaces 数据表在 UI 中显示我的数据。众所周知,我们可以在数据表本身中进行排序和过滤。但是当我在数据表排序字段中键入单个字符时它开始搜索数据,我不想要它。只有当用户在字段中输入至少 3 个字符时,我才需要搜索数据。有没有可能这样做..?如果真是这样,那么是以哪种方式?请提供您的 cmets。
提前致谢。
【问题讨论】:
据我所见,您的选择是验证整个表或对 PF 数据表源进行小幅更改并重新编译。您愿意实施哪个? @kolossus :没关系,如果我为我的问题覆盖数据表源代码中的一些方法。但如果 PF 推进数据表版本,它不应该成为我的开销。 @kolossus 你能提供一个对 PF 数据表源进行小改动的解决方案吗? 【参考方案1】:我对 Primefaces 的数据表做了一个小调查,这是我的发现。
其实不需要重新编译,源javascript替换也是如此。
您需要为过滤事件注册一个新的处理程序,而不是 Primefaces 提供的处理程序。
在这种情况下,将像这样使用数据表:
<h:outputScript name="js/customprimefacestable.js" target="body"/>
<p:dataTable var="data" value="#filterBean.data" filteredValue="#filterBean.filteredData" widgetVar="tableWidget">
<p:column filterBy="#data.name" headerText="Name" filterMatchMode="contains">
<h:outputText value="#data.name" />
</p:column>
<p:column filterBy="#data.value" headerText="Value" filterMatchMode="contains">
<h:outputText value="#data.value" />
</p:column>
...
</p:dataTable>
而 javascript 将是这样的:
$(document).ready(function()
tableWidget.thead.find('> tr > th.ui-filter-column > .ui-column-filter').each(function()
var filter = $(this);
if(filter.is('input:text'))
if(tableWidget.cfg.filterEvent!="enter")
//unbind current handler
filter.unbind(tableWidget.cfg.filterEvent);
//bind new handler that accounts for conditional filtering
filter.bind(tableWidget.cfg.filterEvent, function(c)
if(filter.val().length > 3)
//Primefaces 3.5 implementation
if(tableWidget.filterTimeout)
clearTimeout(tableWidget.filterTimeout);
tableWidget.filterTimeout=setTimeout(function()
tableWidget.filter();
tableWidget.filterTimeout=null,
tableWidget.cfg.filterDelay);
);
);
);
注意事项:
target="body"
:不能在<head>
中执行javascript,因为Primefaces 在$(document).ready()
中初始化了它的小部件变量,因此不能保证您的函数将在Primefaces 初始化之后执行地点;
由于过滤从在列的搜索框中输入的至少 4 个字符开始(完成),当用户自行删除文本到 4 个字符以下时,您应该恢复未过滤的视图(未完成);
上述解决方案针对 Primefaces 3.5 <p:dataTable>
。 Primefaces 实现因版本而异,因此请务必查看您正在使用的版本的实现,或升级到 3.5 版;
未涵盖使用呈现为下拉框的输入字段来实现过滤事件;
该表将侦听默认 (keyup
) 事件。
【讨论】:
以上是关于在 primefaces 数据表中排序的主要内容,如果未能解决你的问题,请参考以下文章
Primefaces数据表排序和过滤直到rowSelect才起作用
使用o:form进行排序时删除了PrimeFaces数据表过滤includeRequestParams =“true”[重复]