在PrimeFaces数据表中强制选择行

时间:2014-02-19 13:42:19

标签: jsf primefaces datatable selection

我得到了一个包含

的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控件(在本例中是自动完成),则不会选择任何行。

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

1 个答案:

答案 0 :(得分:4)

您可以通过两种方式执行此操作,包括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>

第一种方式:

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

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

第二种方式

使用Primefaces客户端API函数selectRow(r,flag),这将在p:dataTable的{​​{1}}对象上调用。
这里widgetWar将采用2个参数:

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

所以现在我的Javascript函数是:

flag