jsf - PrimeFaces 单击逐行展开

Question

我有RowExpansion数据表

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

我需要做两件事:

1. 点击行展开行
2. 隐藏之前展开的行。

那么如何做到这一点呢？

Answer 1

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

您可以在 bindExpansionEvents 中清楚地看到这一点函数，当前的 togglerSelector 是 > tr > td > div.ui-row-toggler 您所要做的就是将相同的事件绑定(bind)到 >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