有一个数据表，其中每个列标题都有Sort和Filter图标，分别对数据进行排序和过滤。两者都运行良好。这里，"columnHeader"是实现Composite的另一个文件。如果我点击过滤器图标，相应的富popupPanel弹出(包含输入文本的关键字和按钮的动作)，如果我点击另一个，前一个被隐藏(display:none)，另一个被弹出。"rich:popupPanel"保持未关闭状态，除非手动关闭或单击另一个过滤器图标。
问题:单击过滤器图标后，弹出富popupPanel。如果我让它打开并执行排序，一切都很好，但是，另一个重复的popupPanel已经在DOM中创建。两者的id相同。每次排序，新的popupPanel都会重复。因此为相应的过滤器图标呈现多个popupPanel。我认为这是由于AJAX请求或渲染问题?
例如:
<html ...
xmlns:cpd="http://java.sun.com/jsf/composite/cpd">
<rich:dataTable value="#{bean.tableData}" var="data" id="myTable">
<rich:column>
<f:facet name="header">
<cpd:columnHeader backingbean="${bean}" columnid="empid" />
</f:facet>
<h:ouputText value="#{data.eid}" />
</rich:column>
<rich:column>
<f:facet name="header">
<cpd:columnHeader backingbean="${bean}" columnid="empname" />
</f:facet>
<h:ouputText value="#{data.ename}" />
</rich:column>
...
</rich:dataTable>
columnHeader.xhtml
<html ...>
<composite:interface>
<composite:attribute name="backingbean" />
<composite:attribute name="columnid" />
</composite:interface>
<composite:implementation>
<c:set var="backingbean" value="#{cc.attrs.backingbean}" />
<c:set var="columnid" value="#{cc.attrs.columnid}" />
<c:set var="columnFilterLink" value="#{columnid}_filterLink" />
<c:set var="columnFilterPopupId" value="#{cc.attrs.columnid}_columnFilterPopup" />
<table id="columnHeader">
<tr>
<td>
<h:outputLabel value="#{backingbean.columns[columnid].label}" escape="false" />
</td>
<td>
<!-- Sort -->
<a4j:commandLink id="column_#{columnid}_sortCommandLink" actionListener="#{backingbean.doSort}"
rendered="${backingbean.columns[columnid].sortable}" render="myTable">
<i class="fa fa-sort"/>
<a4j:param name="orderField" value="#{backingbean.columns[columnid].name}" />
<a4j:param name="order" value="#{backingbean.columns[columnid].nextSortOrder}" />
</a4j:commandLink>
<!-- Filter -->
<h:outputLink value="#" id="#{columnFilterLink}" rendered="#{empty backingbean.columns[columnid].filter}" onclick="closeAllOtherFilters('#{rich:clientId(columnFilterPopupId)}')" disabled="#{(backingbean.recordCount le 0)">
<rich:componentControl event="click" operation="show" target="#{columnFilterPopupId}">
<a4j:param name="event" value="event" noEscape="true" />
<rich:hashParam>
<a4j:param noEscape="true" name="top"
value="jQuery(#{rich:element(columnFilterLink)}.parentNode).offset().top + jQuery(#{rich:element(columnFilterLink)}.parentNode).height()" />
<a4j:param noEscape="true" name="left" value="jQuery(#{rich:element(columnFilterLink)}.parentNode).offset().left" />
</rich:hashParam>
</rich:componentControl>
<i class="fa fa-filter"/>
</h:outputLink>
<!-- Popup panel -->
<rich:popupPanel id="#{columnFilterPopupId}" >
<table cellspacing="0">
<tr><td>
<h:outputLabel value="#{backingbean.columns[columnid].label}" escape="false" />
</td>
<td align="right">
<h:outputLink value="#" onclick="closeFilters('#{rich:clientId(columnFilterPopupId)}');#{rich:component(columnFilterPopupId)}.hide(); return false;">
X </h:outputLink>
</td>
</tr>
<tr><td colspan="2"><div class="d2-separator" /></td></tr>
<tr><td colspan="2">
<h:inputText styleClass="columnFilterInputText" id="#{columnFilterInputText}" style="width:98%" value="#{backingbean.columns[columnid].filter}"/>
<!-- <rich:inplaceInput id="#{columnFilterInputText}" defaultLabel="enter filter string" style="width:159px" value="#{backingbean.columns[columnid].filter}"/> -->
</td>
</tr>
<tr><td colspan="2">
<a4j:commandButton id="#{columnid}_filterButton" actionListener="#{backingbean.doFilter}"
value="Apply Filter" onclick="if(validateFilter('#{rich:clientId(columnFilterInputText)}','#{backingbean.columns[columnid].filterType}')){#{rich:component(columnFilterPopupId)}.hide(event); return true;} else return false;"
render="myTable">
</a4j:commandButton>
<a4j:commandButton id="#{columnid}_resetButton" actionListener="#{backingbean.doFilter}"
value="Reset Filter" onclick="resetFilterForTable('#{rich:clientId(columnFilterInputText)}');#{rich:component(columnFilterPopupId)}.hide(event); return true;"
render="myTable">
</a4j:commandButton>
</td></tr><tr><td colspan="2"></td></tr>
</table>
</rich:popupPanel>
</composite:implementation>
</html>
Bean代码:
...
public void doSort(ActionEvent evt) {
super.doSort(evt);
loadTable();
}
...
BaseController: (Bean extends BaseController)
public void doSort(ActionEvent evt) {
dataSetParameters.setPageNo(1);
String orderField = (String) resolveFromRequestParameterMap("orderField");
if (!orderField.equalsIgnoreCase(getOrderField())
&& getOrderField() != null
&& getColumns().get(getOrderField()) != null)
getColumns().get(getOrderField()).setSortOrder("");
setOrderField((String) resolveFromRequestParameterMap("orderField"));
setOrder((String) resolveFromRequestParameterMap("order"));
getColumns().get(getOrderField()).setSortOrder(getOrder());
}
function closeAllOtherFilters(filterid){
var nodes = document.querySelectorAll('.columnFilterPopup')
for (var i=0; i<nodes.length; i++){
var outerNodeId = nodes[i].id.replace(/_container/i, '');
var outerNodeElement = document.getElementById(outerNodeId);
if(outerNodeId != filterid){
if (outerNodeElement.style.display=="block"){
outerNodeElement.style.display="none";
}
if (nodes[i].style.display=="block"){
nodes[i].style.display="none";
}
}else{
nodes[i].style.display="block";
outerNodeElement.style.display="block";
}
}
}
这是一个bug，当弹出窗口被重新渲染时，它不会销毁自己(因为它通常被放置在它的父DOM之外)。要绕过它关闭弹出框之前，你触发请求或把它放在表外，但我认为这不是一个选项。
顺便说一句，为什么不在数据表中使用自定义排序/过滤?其次，为什么不隐藏与JS API的弹出框，而不是手动设置显示样式?