PrimeFaces 在行单击时展开行答案

【问题标题】：PrimeFaces expand row on row clickPrimeFaces 在行单击时展开行
【发布时间】：2014-09-07 09:41:11
【问题描述】：

<p:dataTable value="#{clients.clients}" var="client">
   <p:column>
      <p:rowToggler  />
   </p:column>

   <p:column headerText="name" sortBy="#{client.name}">
      <h:outputText value="#{client.name}"/>
   </p:column>
   <p:column headerText="email" sortBy="#{client.email}">
      <h:outputText value="#{client.email}" />
   </p:column>

   <p:rowExpansion>
      <p:panelGrid  columns="2">
         <h:outputText value="Id:" />
         <h:outputText value="#{client.id}" />
      </p:panelGrid>
   </p:rowExpansion>
</p:dataTable>

我需要做两件事：

逐行展开点击
隐藏以前展开的行。

那该怎么做呢？

【问题讨论】：

至于 primefaces 5.1，解决方案如下：stackoverflow.com/questions/15972990/…

标签： jsf primefaces

【解决方案1】：

我刚刚在 Primefaces 5.1 中实现了@Hatem Aliman 的解决方案，到目前为止它运行良好。

如果您启用了rowExpandMode="single"，则无需自行关闭打开的行。只需注释掉该行：$this.collapseAllRows();

【讨论】：

【解决方案2】：

您可以将togglerSelector 事件扩展到tr 而不是图标。

在bindExpansionEvents函数中可以清楚的看到这一点，当前的togglerSelector是> tr > td > div.ui-row-toggler，你只需要将同一个事件绑定到>tr，当然在展开点击的行之前，你折叠通过调用 collapseAllRows() 来扩展所有行。

这是一个完整的例子：

function rowExpansion(dataTable) {
   //dataTable should be the widgetVar object
   var $this = dataTable;
   //add the 'hand' when hovering on row
   $this.tbody.children('tr').css('cursor', 'pointer')
   $this.tbody.off('click.datatable-expansion', '> tr')
      .on('click.datatable-expansion', '> tr', null, function() {
         //before expanding collapse all rows
         $this.collapseAllRows();
         //toggle the current row the old toggler
         $this.toggleExpansion($(this).find('div.ui-row-toggler'));
       });
 }

然后只需在$(document).ready中调用它

$(document).ready(function() {
   rowExpansion(PF('dataTableWV'));// if you are using PF 3.5 or lower pass the the object without PF() shortcut
});

见：online demo

【讨论】：

您好，我得到了这个 var 'dataTableWV' 的小部件不可用！