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扩大排在行点击

回答

相关问题