在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>。 希望它可以帮助别人:)