简体   繁体   English

Primefaces数据表在单击时取消选择多选行

[英]Primefaces datatable unselect row on click with multiple selection

How to unselected a selected row on a dataTable primefaces using only a click, the same way that it work to select the row. 如何仅通过单击即可取消选择dataTable素数上的选定行,与选择行的方法相同。

This is the code I am using to select and unselect at the moment, but the unselect needs to press the Ctrl or CMD (on mac) key. 这是我目前用来选择和取消选择的代码,但是取消选择需要按CtrlCMD (在Mac上)键。

<p:dataTable
    value="#{adminiClubReconManager.bankMovementsFound}" var="movs"
    style="width:90%;border: 0px;"
    selection="#{adminiClubReconManager.selectedBankMovement}"
    rowKey="#{movs.id}" editable="true" styleClass="rowStyle"
    paginator="true" rowsPerPageTemplate="5,10,15" rows="10"
    selectionMode="mutiple"
    paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">
    <p:ajax event="rowSelect"
        listener="#{adminiClubReconManager.onBankRowSelect()}"
        update="@form:reconMessages" />
    <p:ajax event="rowUnselect"
        listener="#{adminiClubReconManager.onBankRowUnselect()}"
        update="@form:reconMessages" />
    <p:column
        style="background:transparent;border:0px;text-align:left">
        <c:facet name="header">
            <h:outputText
                value="#{msg['admini.common.movement.recon.number']}" />
        </c:facet>
        <h:outputText value="#{movs.id}"
            style="background:transparent;border:0px" />
    </p:column>
    ...
</p:dataTable>

We've 2 possibilities for solve this issue. 我们有两种解决此问题的可能性。

First 第一

Create commandButton and call primefaces method unselectAllRows(); 创建commandButton并调用primefaces方法unselectAllRows();

<p:dataTable id="dataTableId" var="p" value="#{myBean.dataModel}" paginator="true" rows="50" paginatorPosition="bottom" emptyMessage="Empty results" rowKey="#{p.attribute}" selection="#{myBean.atributeList}" widgetVar="dataTableWidgetVar">`
   <p:commandButton widgetVar="buttonClear" value="Clear selection" onclick="dataTableWidgetVar.unselectAllRows();"/>
</p:dataTable>

After the click you have the rows deselected 单击后,您取消选择了行

Second 第二

Via ajaxEvent call primefaces method unselectAllRows(); 通过ajaxEvent调用primefaces方法unselectAllRows();

<p:dataTable id="dataTableId" var="p" value="#{myBean.dataModel}"                                                                                                                     paginator="true" rows="50" paginatorPosition="bottom" emptyMessage="Empty results" rowKey="#{p.attribute}" selection="#{myBean.atributeList}" widgetVar="dataTableWidgetVar">`
    <p:ajax event="page" update="dataTableId" oncomplete="dataTableWidgetVar.unselectAllRows();"/>
 ...
</p:dataTable>

In this case you selected the data of the first page when you click another page for example page 3, the ajax execute the method UnselectAllRows (); 在这种情况下,当您单击另一页(例如第3页)时,选择了第一页的数据,ajax执行方法UnselectAllRows(); And you clear you have selected. 而且您清除已选择。

For solve this i finded this material at primefaces forum in: https://forum.primefaces.org/viewtopic.php?f=3&t=24144 为了解决这个问题,我在以下网站的primefaces论坛中找到了该材料: https ://forum.primefaces.org/viewtopic.php?f =3& t = 24144

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM