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

Question

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

到目前为止，我发现我可以使用 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>

Answer 1

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

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

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

How to update an attribute of a component when a Primefaces panel is toggled

jsf

primefaces

jsf-2