轮询更新后无法关闭columntoggler

问题描述

首先，我要感谢Stack溢出是如此棒，回答几乎所有我们需要的东西。但是我又坚持了一些东西需要帮助。我的问题是我的columntoggler在右上方没有关闭按钮（所以，当p：poll更新数据表时，切换不会关闭，每次我都要刷新整个页面:(）。那么，我们需要jquery来添加那个或者什么我做错了。请建议我。谢谢你

First of all I'd like to thank Stack overflow for being such awesome and answering almost everything we need.But again I've stuck to something and need Help.My problem is that my columntoggler does not have a close button on the top right(So, when p:poll updates the datatable,toggle does not close and everytime I've to refresh the whole page :( ).So,Do we need jquery to add that or something that I'm doing wrong.Please suggest me.Thank you

<h:form rendered="#{bean.value!=null}"  >

    <p:dataTable id="tab" var="var" value="#{bean.value}" >

                 <f:facet name="header">
                    Header for dataTable
                    <p:commandButton style="float:right" id="toggler" type="button" value="Columns"  icon="ui-icon-calculator" />
                    <p:columnToggler datasource="tab" trigger="toggler">
                     <p:ajax event="toggle" listener="#{bean.onToggle}" />

                        </p:columnToggler>


                 </f:facet>
    <p:column visible="#{bean.list[0]}">
            <f:facet name="header"><h:outputText value="Start"/>
            </f:facet>
            <h:outputText value="#{var.startTime}">
                <f:convertDateTime pattern="dd.MM.yyyy" />
            </h:outputText>
        </p:column>

        <p:column visible="#{bean.list[1]}">
            <f:facet name="header"><h:outputText value="End"/>
            </f:facet>
            <h:outputText value="#{var.endTime}" >
                <f:convertDateTime pattern="dd.MM.yyyy"  />
            </h:outputText>
        </p:column>

        <p:column visible="#{bean.list[2]}">
            <f:facet name="header"><h:outputText value="Name"/>
            </f:facet>
            <h:outputText value="#{var.name}" >

            </h:outputText>
        </p:column>

        </p:dataTable>

        <p:poll interval="10"  update="tab" />
   </h:form>

推荐答案

案例1：你当触发切换事件时，可以使用 PF（'widgetVar'）关闭columnToggler。使用 onstart（）/ oncomplete（）隐藏 等。

Case 1: You can close the columnToggler, when the 'toggle event' is triggered, using PF('widgetVar').hide using onstart()/oncomplete() etc.

<p:columnToggler datasource="tab" trigger="toggler" widgetVar="colTogglerWidgetVar">
                 <p:ajax event="toggle" listener="#{bean.onToggle}"  
                  onstart="PF('colTogglerWidgetVar').hide();" />
</p:columnToggler>

案例2：即使表格更新，您也可以使用columnToggler使用 PF（）触发切换事件。使用 onstart（）事件仅隐藏 !!因为当你更新表时，一组新的元素被添加到具有相同签名的页面，但仍然对你开放的columnToggler将是旧的，因此如果你尝试使用关闭按钮关闭columnTogller，它赢了不要。由于对话框已经失去了当前状态的范围。

Case 2: You can the columnToggler, even when the table is updated while the toggle event is triggered using PF().hide by using onstart() event only!! Because when you update the table, a new set of elements are add to page with the same signatures but the columnToggler which is still open to you will be the older one and hence if you try to close the columnTogller using the close button, it won't close. Since the dialog has lost its scope with the current state.

因此除了onstart（）之外的任何其他事件都不会达到目的。

Therefore any other event other than onstart() wont serve the purpose.

<p:columnToggler datasource="tab" trigger="toggler" widgetVar="colTogglerWidgetVar">
                 <p:ajax event="toggle" listener="#{bean.onToggle}"   
                 onstart="PF('colTogglerWidgetVar').hide();" update="datatable"/>
</p:columnToggler>

如果你希望保持对话框打开，即使你隐藏了columnToggler，然后去显示columnToggler再次使用 PF（）。show with onComplete（） combination

If you wish to keep the dialog open,even after you hide the columnToggler, then go for showing the columnToggler again using PF().show with onComplete() combination

<p:columnToggler datasource="tab" trigger="toggler" widgetVar="colTogglerWidgetVar">
                 <p:ajax event="toggle" listener="#{bean.onToggle}"   
                 onstart="PF('colTogglerWidgetVar').hide();" 
                 oncomplete="PF('colTogglerWidgetVar').show();" update="datatable"  />
</p:columnToggler>

这篇关于轮询更新后无法关闭columntoggler的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！