Question

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

任何解决问题的想法。

Answer 1

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

变化：

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

为：

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

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

例如：

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

Answer 3

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

我在PF 5.3上遇到了同样的问题。似乎click事件没有传播到表行 - 这绝对是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：列中）。它正在应用style =＆＃34; display：block;＆＃34;对于所有outputText。例如：

<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

我在dataTable中遇到同样的问题。

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

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

6 个答案: