1

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

任何解决问题的想法。

4

6 回答 6

6

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

改变：

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

至：

<h:outputText value="#{item.description}"/>
于 2015-12-03T16:07:10.273 回答
1

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

让我提一下，在他的示例中它可以工作，因为他只是在列中的 facet 内没有组件，或者 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>
于 2013-09-29T15:45:00.150 回答
1

我也一直面临这个问题。在谷歌搜索后，我找到了我的案例的解决方案（在 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 -单选

于 2018-05-01T00:11:00.070 回答
1

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

我在 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);
  }
}
于 2016-03-19T10:30:39.730 回答
0

为此，您必须使用 ajax。

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

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

于 2013-08-27T16:28:50.897 回答
0

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

<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>从单元格内容中删除。希望它可以帮助某人:)

于 2017-09-27T09:00:20.790 回答