在PrimeFaces数据表中强制选择行

Posted 2021-03-30

我得到了一个包含的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:dataTable的widgetWar对象上调用。 这里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'));
}