民意调查更新后无法关闭 columntoggler答案

【问题标题】：Can't close columntoggler after poll updates民意调查更新后无法关闭 columntoggler
【发布时间】：2016-04-25 10:30:08
【问题描述】：

首先，我要感谢 Stack overflow 如此出色并回答了我们需要的几乎所有内容。但我再次坚持了一些事情并需要帮助。我的问题是我的专栏切换器右上角没有关闭按钮（所以，当 p:poll 更新数据表时，切换不会关闭，并且每次我必须刷新整个页面时：（）。所以，我们需要 jquery 来添加它还是什么我做错了。请建议我。谢谢

<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>

【问题讨论】：

嗯，如果您单击切换器面板外的某个位置或单击与切换器关联的命令按钮，切换器通常会关闭。因此，只有在您打开切换器并且您正在等待轮询脚本执行时，才会出现问题。我不认为这是一个正常的用例。但是一个简单的方法是通过 PF('toggler').click(); 这样的 JavaScript 来单击命令按钮。如果民意调查事件发生。您可以使用 p:poll 属性 oncomplete 来执行此操作
尝试添加但不起作用:(
也许可以试试 document.getElementById('tab:toggler').click();
当我尝试添加投票停止工作.
正如我在here 上发现的那样，右上角有一个叉号。IDK 为什么但它没有显示在我的页面上。

标签： jquery jsf primefaces jsf-2.2

【解决方案1】：

你应该给你的 columnToggler 一个名字，这样你就可以像这样使用 PF('columnToggler') 来访问它：

<p:columnToggler widgetVar="columnToggler" datasource="tab" trigger="toggler"/>

您可以使用 PF() 和/或 jquery 隐藏 columnToggler。我发现当 Toggler 列打开时更新表时，它有多个副本，因此您也需要使用 jquery 将它们全部关闭。

<p:poll inteval="10" update="tab" 
        oncomplete="PF('columnToggler').hide();$('.ui-columntoggler').hide();" />

我没有用 poll 试过，但我用 p:ajax 用过。

【讨论】：

【解决方案2】：

案例1：您可以在触发“切换事件”时关闭columnToggler，使用PF('widgetVar').hide 使用onstart()/oncomplete() 等。

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

案例 2： 您可以使用 columnToggler，即使在使用 PF().hide 触发切换事件时更新表格，也只能使用 onstart() 事件！因为当您更新表格时，一组新元素会添加到具有相同签名的页面中，但仍然对您打开的 columnToggler 将是旧的，因此如果您尝试使用关闭按钮关闭 columnToggler，它会赢不关闭。由于对话框已经失去了当前状态的范围。

因此，除 onstart() 之外的任何其他事件都无法达到目的。

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

如果您希望保持对话框打开，即使在隐藏 columnToggler 之后，也可以使用 PF().show 和 onComplete() 组合再次显示 columnToggler

<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>

【讨论】：