简体   繁体   中英

How to remove/unbind rowSelect event from primefaces datatable

My main problem is I want to remove/unbind rowSelect, rowUnselect and rowDblselect events
from datatable.

<p:dataTable id="myTable" value="#{myBean.myLazyModel}" var="var" 
        selection="#{myBean.selectedBean}" styleClass="uta-table lightgrey-table">

        <p:column selectionMode="multiple" id="select"
            style="width:2%;text-align:center" />

        <p:column id="namecol" headerText="Name" style="text-align:center">
            <p:inputText id="name" value="#{var.name}"
                styleClass="uta-textbox" style="text-align:center">
            </p:inputText>
        </p:column>
</p:dataTable>

Assume the datatable has only 5 rows. Now I have selected first 4 rows by selecting checkbox (not by clicking on row). If I select 5th row by clicking on the row(not selecting the checkbox) then the previous 4 rows are deselected resulting in only 5th row being selected. This is something concerns my client.

To avoid this problem I thought of unbinding/removing rowSelect event means I should be able to select a row only by selecting checkbox. This same problem persists in the primeface showcase also.

http://www.primefaces.org/showcase/ui/datatableRowSelectionRadioCheckbox.jsf

I tried to unbind/remove rowSelect event in the following two ways using jQuery css selectors

<script type="text/javascript">
            jQuery(function() {                        
                $('.lightgrey-table').off("rowSelect");
                $('.lightgrey-table').off("rowUnselect");
                $('.lightgrey-table').off("rowDblselect");

            });
</script>  

second way

<script type="text/javascript">
            jQuery(function() {                        
                $('.lightgrey-table').unbind("rowSelect");
                $('.lightgrey-table').unbind("rowUnselect");
                $('.lightgrey-table').unbind("rowDblselect");

            });
</script>  

both didn't work for me. Could any one help me to resolve this.

thanks in advance guys

It's not obvious, but pressing the CTRL key will allow multiple rows to be selected without affecting already selected rows.

If the CTRL key option won't work for your client, you will need to turn the jQuery '$' shortcut back on to use it on a PrimeFaces app. Include the following JSF outputScript tags:

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />

<h:outputScript target="head">
   $ = jQuery; // Put $ back so we can use jQuery in the default mode.
   $(document).ready(function() {
          // put your jQuery code here....
   });  </h:outputScript>

You can design your columns this way

<p:datatable ...
   <p:column selectRow="false" ... />
</p:datatable>

In this way you can only select and unselect your rows by clicking on the checkbox.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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