在PrimeFaces数据表中强制选择行

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在PrimeFaces数据表中强制选择行相关的知识,希望对你有一定的参考价值。

我得到了一个包含的p:dataTable

<p:dataTable id="dataTable" widgetVar="dataTableCar" var="category"
value="#{CategoryBean.categories}" selection="#{CategoryBean.selectedCategory}"
selectionMode="single" rowKey="#{category}"                 
    <p:column headerText="name">
       <h:outputText value="#{category.name}" />
    </p:column>
    <p:column headerText="parent">
       <p:autoComplete id="parentCategory" completeMethod="#{CategoryBean.categories}" maxResults="20" value="#{category.parent}" var="p" itemLabel="#{p.name}"
  itemValue="#{p}" converter="#{categoryStringConverter}"
  forceSelection="true">
        <p:ajax event="itemSelect"
     listener="#{CategoryBean.oncategorySelect}" />
        </p:autoComplete>
    </p:column>

我需要强制选择行,以防用户点击自动完成。也许我应该提一下,如果用户点击了由p:列托管的ui控件(在本例中是自动完成),则不会选择任何行。

有没有办法实现这个?如果我没有得到选定的行,我无法处理父类别。

答案

您可以通过两种方式执行此操作,包括Jquery。

我将使用以下p:dataTable代码来显示两种方式。 我正在使用h:inputText而不是p:autoComplete

<p:dataTable value="#{userManagedBean.userList}" var="user" 
                    selection="#{userManagedBean.selectedUser}" selectionMode="single"
                    rowKey="#{user.email}" widgetVar="dataTableWidget">
            <p:ajax event="rowSelect"/>

            <p:column headerText="Email">
                #{user.email}
            </p:column>

            <p:column headerText="Name">
                <h:inputText value="#{user.name}" onclick="myFunction(this);"/>
            </p:column>
        </p:dataTable>

第一种方式:

当用户点击自动完成时模拟其父级的click事件,在这种情况下是<td>,因此选择其父级<tr>,最后你的Row将被选中。

<script type="text/javascript">
   function myFunction(ele){
    var tdEle = $(ele).parent();
    $(tdEle).click();
   }
</script>

第二种方式

这是通过使用Primefaces客户端API函数selectRow(r,flag),它将在p:dataTablewidgetWar对象上调用。 这里selectRow(r,flag)将采用2个参数:

  • r是需要选择的行的Jquery Row元素()。
  • flag是布尔值,它指定ajax选择与否。

所以现在我的Javascript函数将是:

<script type="text/javascript">
    function myFunction(ele){
        var tdEle = $(ele).parent();
        var trEle = $(tdEle).parent();
        dataTableWidget.selectRow($(trEle),true); 
    }
</script>
另一答案

你可以这样做

例如:在带有primefaces的数据表中,其中一列中有“onChange”

value =“#{r.visualizaUnicoTodo}”styleClass =“chk-nty pd”onchange =“check_edit(this)”>

选择单击的当前项目

 var check_edit = function (id) {
            console.info("Id Elemento Checkeado :" + id);
            console.info("Verificar si esta seleccionado : : " + $(id).is(':checked'));
}

以上是关于在PrimeFaces数据表中强制选择行的主要内容,如果未能解决你的问题,请参考以下文章

Primefaces数据表行选择和多个复选框选择不起作用

PrimeFaces 可扩展和可选行

PrimeFaces Datatable单击分页链接取消选中所有复选框

Primefaces Accordion + Datatable过滤器/多项选择无法按预期工作

从对话框更新PrimeFaces数据表行

在特定行启用或禁用 primefaces 数据表按钮