在primefaces數據表中選擇無法正常工作

Question

我試過instant row selectionprimefaces<p:datatable>，但我發現當我點擊單元格文本時，行未被選中。如果我選擇一行，我必須點擊邊緣單元格。

任何想法來解決這個問題。

Answer 1

你必須爲此使用ajax。

<p:ajax event="rowSelect" listener="#{handler.onRowSelect}" update=":yourComponent" ... /> 

只需使用示例中的展示：http://www.primefaces.org/showcase/ui/datatableRowSelectionInstant.jsf

Answer 2

我可以驗證該問題處於有利位置，它正在發生。在Primefaces 3.5.7中，我使用作者站點中描述的數據表即時選擇，並且只有當您沒有擊中表格的部分時才能正確觸發選擇！我在Mozilla Firefox 24上測試。

讓我來提一下，在他的示例中，它的工作原理是因爲他沒有列中的組件，或者celleditor在選擇示例中導致某些故障。

 <p:column headerText="Model" style="width:30%"> 
      <p:cellEditor> 
       <f:facet name="output"> 
        <h:outputText value="#{car.model}" /> 
       </f:facet> 
       <f:facet name="input"> 
        <p:inputText value="#{car.model}" style="width:100%"/> 
       </f:facet> 
      </p:cellEditor> 
     </p:column> 

相反，他是用：

 <p:column headerText="Model"> 
      #{car.model} 
     </p:column> 

我做了什麼（！作爲PF的作者需要u到是PRO訂戶作罷液）在開頭添加一個空列或者數據表的結尾，只有當用戶點擊時用戶可以做你允許他做的事情。

例如爲：

<p:column headerText="Select" width="10"> 
</p:column> 

Answer 3

我發現，在我們至少PrimeFaces 5.3的情況下，使用一個單元格的內容一個<p:outputLabel>防止點擊選擇行。解決方法是不使用PrimeFaces標籤的，而是使用默認的JSF庫來簡單輸出沒有任何花哨的「gadgetry」的文本。

變化：

<p:outputLabel value="#{item.description}" /> 

到：

<h:outputText value="#{item.description}"/> 

Answer 4

多年以後，但究竟發生了什麼 - 認爲這可能是有人在那裏有用...

我跑進PF 5.3也有同樣的問題。看起來像點擊事件不會傳播到表格行 - 絕對是在PF腳本中的遺漏。 正如在前面的回答中所提到的，如果您想要「官方」修復，那麼您需要購買PRO支持...另一方面，編寫工作並不是不可能的。 在實施或設計中不對本樣本的效率提出任何要求。所有你需要的是以下功能 - 這適用於可滾動和不可滾動的表格。 沒有測試過了好幾個方案，但它應該給你一個開始 - 請發佈更新:)

$(document).ready(function() { 
    attachShowEvent(); 
}); 

/* 
* Seems that if the table is hidden then the ready functions 
* wont fire...so you have to manualy attach the thing. Has 
* to be an easier way - this would happen if the table is 
* in a tabView tab which is not visible on page load. In this case you have to 
* manualy attach the events when the tab gets selected 
*/ 
function attachShowEvent(){ 
    /* 
    * Fix hover pointer 
    */ 
    $('.ui-datatable-selectable label').hover(function() { 
    $(this).css('cursor','pointer'); 
    }); 
    /* 
    * attach click and double click events to p:outputLabel 
    */ 
    $('.ui-datatable-selectable label').click(function(event) { 
    tableLabelClicked(event);   
    }); 
    /* 
    * dblclick doesnt work - something is explicity blocking it 
    * dont have the energy to find it:) 
    */ 
    $('.ui-datatable-sekectable label').dblclick(function(event){ 
    tableLabelDblClicked(event); 
    }); 
} 

function tableLabelClicked(event){ 
    /* 
    * Trigger the "click" event on the parent td 
    */ 
    try{ 
    $(event.target).parent().trigger("click"); 
    }catch(e){ 
    console.log(e); 
    } 
} 

function tableLabelDblClicked(event){ 
    /* 
    * Trigger the "dblclick" event on the parent td 
    */ 
    try{ 
    $(event.target).parent().trigger("dblclick"); 
    }catch(e){ 
    console.log(e); 
    } 
} 

Answer 5

我遇到同樣的問題，在我的數據表。

<p:dataTable id="kpiHierarchyTable" 
      widgetVar="kpiHierarchyTable" 
      value="#{kpiHierarchies.hierarchies}" 
      var="hierarchy" 
      emptyMessage="#{msg['common.emptyMessage']}"> 
    <!-- Колонка с кодом--> 
    <p:column id="hierarchyCode" 
       headerText="#{msg['common.code']}" 
       filterBy="#{hierarchy.code}" 
       sortBy="#{hierarchy.code}"> 
     <div class="center"> 
      <h:outputText value="#{hierarchy.code}"/> 
     </div> 
    </p:column> 
    . 
    . 
    . 
</p:dataTable> 

解決我的問題是從單元格內容中刪除<div></div>。 希望它可以幫助別人:)