切换 Primefaces 面板时如何更新组件的属性答案

【问题标题】：How to update an attribute of a component when a Primefaces panel is toggled切换 Primefaces 面板时如何更新组件的属性
【发布时间】：2016-03-10 08:57:20
【问题描述】：

我想实现在特定 Primefaces 面板打开或关闭时更改数据表的 scrollHeight 的逻辑。

到目前为止，我发现我可能能够使用 javascript 和 PF(panelWidget)... 或使用 ajax 事件处理程序来了解面板何时切换并对其做出反应，但无法解决完全。

以下是我正在使用的组件：

<h:form id="form">
  <p:panel id="toggleable" header="Toggleable" toggleable="true" widgetVar="panel">

        <p:ajax event="toggle" update="list" />
  </p:panel>

  <p:datatable id="list" scrollable="true" scrollHeight="toggle?300:100">

  </p:datatable>
</h:form>

【问题讨论】：

所以基本上，当您切换面板打开时，您希望数据表的高度为 300，而当您切换面板关闭时，您希望数据表的高度为 100？
我想在面板切换时更改滚动高度
谢谢@BalusC，如果没有你，我们永远无法解决问题
@Balusc 我不需要同意，但我同意你在 JSF 问题上所做的事情:)

标签： jsf jsf-2 primefaces

【解决方案1】：

我想将此作为评论发布，但它太长了。这是我会尝试的：

<h:form id="form">

  <p:panel id="toggleable" header="Toggleable" toggleable="true" collapsed="true" widgetVar="panel">
    <p:ajax 
      event="toggle" 
      update="form:list" 
      oncomplete="$(document.getElementById('form:list')).find('.ui-datatable-scrollable-body').height(PF('panel').cfg.collapsed ? 100 : 300);" />
  </p:panel>

  <p:dataTable id="list" scrollable="true" scrollHeight="100">

  </p:dataTable>
</h:form>

如您所见，oncomplete 属性中的 JS 正在完成所有工作。 PF('panel').cfg.collapsed 检查面板是否折叠，我们相应地设置 .ui-datatable-scrollable-body 高度。

我用 PF 4.0 对其进行了测试，它似乎对我很有效。如果您不需要更新dataTable 的内容，您可以去掉update="form:list" 并使用onstart 而不是oncomplete。

【讨论】：