Question

我有RowExpansion dataTable

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

我需要做两件事：

展开行上的行
隐藏以前展开的行。

那怎么办呢？

Answer 1

您可以将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

Answer 2

我刚刚在Primefaces 5.1中实现了@Hatem Aliman的解决方案，到目前为止工作正常。

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

PrimeFaces在行单击时展开行

2 个答案: