Primefaces - 用于数据表中实时过滤的自定义组件

2024-03-27

PrimeFaces 对 p:dataTable 的过滤器做得非常好。 UX 网站很棒,因为过滤器字段位于列标题中,因此毫无疑问您正在过滤什么,并且它正在实时工作 - 数据会随着您的输入而变化(好吧,只有当您短暂停顿时,但它在我的意见正是用户所期望的)。

现在我想在标题中放置一些自定义的内容来充当过滤器。所以,我的想法是在 header 方面放置一个组件:

<p:column ...>
  <f:facet name="header">
     <some:myComponent onkeydown="filterAction()"/>
  </f:facet>
</p:column>

问题是filterAction不得更新整个 dataTable 组件(因为用户正在输入的组件将被重新创建),但它必须更新表主体。

我想我可以做到PrimeFaces 选择器(基于 jQuery 选择器),但根据主题这不可能。 datatable.js 包含专门的 Ajax 调用来实现这一点(PrimeFaces 3.5 版本中的第 839 行):

    options.onsuccess = function(responseXML) {
        var xmlDoc = $(responseXML.documentElement),
        updates = xmlDoc.find("update");
        ....
        $this.tbody.html(content);

我的问题是,是否可以使用这种单独的过滤器组件,它只刷新表体,就像标准过滤器一样,而无需深入 PF 内部并编写专门的 AJAX 处理程序?

当然,可以在数据表之外进行过滤,但用户体验会降低(现在使用我的应用程序的人非常喜欢当前的设计)。


可以使用以下方式将任何组件放入列标题中facet。但是,不可能仅请求数据表主体刷新。所以解决方案是,发送正常请求,但接管响应并在自定义代码部分处理它。

如果你像这样创建remoteCommand:

<p:remoteCommand id="refreshDataTable" name="refreshDataTable"
               actionListener="#{carTable.doFilter}" 
               update="dataTable" />

该命令的 ID 被发送到服务器。知道了这一点,我们就可以准备自定义 AJAX 请求了:

 var options = {
        source: 'main:tabView:refreshDataTable',
        update: carsTable.id,
        formId: carsTable.cfg.formId
}
options.onsuccess = customHandler
PrimeFaces.ajax.AjaxRequest(options);

其中 customHandler 代码如下所示:

var xml = $(resp.documentElement)
updates = xml.find('update')
for(var i=0; i < updates.length; i++) {
var update = updates.eq(i),
id = update.attr('id'),
content = update.text();
if(id == carsTable.id){
   var tbody = $(content).find('tbody')
   carsTable.tbody.html(tbody.html());
}
else {
   PrimeFaces.ajax.AjaxUtils.updateElement.call(this, id, content);
}
PrimeFaces.ajax.AjaxUtils.handleResponse.call(this, xml);
var paginator = carsTable.getPaginator();
if(paginator) {
    paginator.setTotalRecords(this.args.totalRecords);
}
if(carsTables.cfg.scrollable) {
    carsTable.alignScrollBody();
}
return true;

我们需要在Java代码中设置变量totalRecords:

    RequestContext context = RequestContext.getCurrentInstance();  
    context.addCallbackParam("totalRecords", filteredCars.size());  
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Primefaces - 用于数据表中实时过滤的自定义组件 的相关文章

随机推荐