primefaces 数据表中的选择无法正常工作

Question

我在primefaces<p:datatable>中尝试了instant row selection，但是我发现当我点击单元格文本时，该行没有被选中。如果我要选择一行，我必须点击边缘单元格。

解决问题的任何想法。

Answer 1

我发现在我们的情况下，至少在 PrimeFaces 5.3 中，在单元格内容中使用 <p:outputLabel> 会阻止单击以选择行。一种解决方法是不使用 PrimeFaces 标签，而是使用默认的 JSF 库来简单地输出文本，而不需要任何花哨的“小工具”。

变化：

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

到：

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

Answer 2

我可以验证问题是否正确并且正在发生。在 Primefaces 3.5.7，我正在使用作者网站中描述的数据表即时选择，只有当您没有点击表格的构面部分时，才会正确触发选择！我正在 Mozilla Firefox 24 上进行测试。

让我提一下，在他的示例中它可以工作，因为他只是在列中的 facet 内没有组件，或者单元编辑器在选择示例中导致了一些故障。

       <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 的作者要求您成为 PRO 订阅者才能为您提供解决方案！）是在数据表的开头或结尾添加一个空列，并且只有当点击那里时，用户才能执行什么操作你让他做。

例如：

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

Answer 3

几年后，但到底是什么 - 认为这可能对那里的人有用......

我在 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 4

我也遇到过这个问题。在谷歌搜索后，我找到了我的案例的解决方案（在 p:cellEditor 中的 p:column 中有文本）。它正在应用 style="display:block;"对于所有的输出文本。例如：

<p:column id="name" headerText="NAME" style="text-align:center">
    <p:cellEditor>
        <f:facet name="output"><h:outputText value="#{community.name}" style="display:block;"/></f:facet>
        <f:facet name="input"><h:inputText value="#{community.name}"/></f:facet>
    </p:cellEditor>                     
</p:column>

解决办法是这篇博文的第二条评论：http://geek-and-poke.com/geekpoke-gets-serious/2014/2/23/primefaces-datatables-with-in-table-editing-row-mode-and-single-selection

Answer 5

您必须为此使用 ajax。

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

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

Answer 6

我在我的数据表中遇到了同样的问题。

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