Primefaces-用于在DataTable中进行实时过滤的自定义组件 [英] Primefaces - custom component for live filtering in dataTable

问题描述

PrimeFaces对p:dataTable的过滤器做得很好.在UX站点上很棒，因为filter字段位于列标题中，所以毫无疑问，您正在过滤什么，并且它正在实时运行-数据随键入而变化(嗯，只有稍作停顿，但它在我的意见正是用户所期望的).

PrimeFaces has very well done filter for p:dataTable. It is great from UX site, because the filter field is in column header, so there's no doubt what you are filtering, and it's working live - the data changes as you type (well, only if you make a short pause, but it's in my opinion exactly what user expects).

现在，我想在标题中放置一些自定义内容，以用作过滤器.因此，我的想法是将组件放置在标头中:

Now I'd like to place something custom in the header that would act as filter. So, my idea was to place a component in header facet:

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

问题在于filterAction不能更新整个dataTable组件(因为将重新创建用户键入的组件)，但是必须更新表主体.

The problem is that filterAction must not update the whole dataTable component (because the component the user is typing in would be re-created), but it must update the table body.

我认为我可以使用 PrimeFaces Selectors (基于jQuery选择器)来做到这一点，但是要根据主题

I've thought I can do it with PrimeFaces Selectors (based on jQuery selectors), but according to the topic How to update data rows only using a selector for dataTable? it is not possible. And the datatable.js contains specialized Ajax call to achieve that (line: 839 in PrimeFaces 3.5, release):

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

我的问题是，是否有可能使用这样的单个过滤器组件，使其完全像标准过滤器那样仅刷新表主体，而无需深入PF内部和编写类似的AJAX处理程序?

My question is, is it possible to use such individual filter component, that would refresh only table body, exactly like the standard filter it does, without going deep into PF internals and writing specialized AJAX handler like that?

当然，可以在dataTable之外进行过滤，但是要减少UX(现在使用我的应用程序的人非常喜欢当前的设计).

Of course, it's possible to make filter outside the dataTable, but than the UX would be reduced (the people who are now using my application like the current design very much).

推荐答案

可以使用facet将任何组件放在列标题中.但是，不可能仅请求dataTable主体刷新.因此，解决方案是发送常规请求，但接管响应并在自定义代码部分中处理它.

It is possible to put any component in column header using facet. However, it is not possible to request only dataTable body refresh. So the solution is, to send normal request, but to take over the response and handle it in custom code part.

如果您这样创建remoteCommand:

If you create remoteCommand like that:

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

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

the ID of that command is sent to the Server. Knowing that, we can prepare the custom AJAX request:

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

customHandler代码如下所示:

where customHandler code looks like that:

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:

We need to set in the variable totalRecords in Java code:

    RequestContext context = RequestContext.getCurrentInstance();  
    context.addCallbackParam("totalRecords", filteredCars.size());  

这篇关于Primefaces-用于在DataTable中进行实时过滤的自定义组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！