PrimeFaces擴大排在行點擊

我RowExpansion的dataTablePrimeFaces擴大排在行點擊

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

，我需要做兩件事情：

展開上鱗次櫛比點擊
隱藏以前擴大了行。

那該怎麼做？

來源

2014-07-16 user2950593

至於primefaces 5.1這裏的解決方案：http://stackoverflow.com/questions/15972990/how-at-a-time-one-row-can-expand-in-pdatatable/ 29730152＃29730152 – Anton

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

來源

2014-07-17 07:51:46

你好，我得到這個小部件var'dataTableWV'不可用！ –

我只是實現@Hatem Aliman的解決方案Primefaces 5.1和它迄今爲止工作得很好。

如果啓用了rowExpandMode="single"，則不需要自行關閉打開的行。剛剛註釋掉該行：$this.collapseAllRows();

來源

2016-05-12 09:20:56 danny

cool 2年後總想要一個答案=） – user2950593

PrimeFaces擴大排在行點擊

回答

相關問題