如何从primefaces数据表中删除/取消绑定rowSelect事件

时间:2014-01-03 11:09:49

标签: jquery jsf jsf-2 primefaces

我的主要问题是我要删除/取消绑定rowSelect,rowUnselect和rowDblselect事件
  来自数据表。

<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>

假设数据表只有5行。现在我通过选择复选框(而不是通过单击行)选择前4行。如果我选择第5行 通过单击该行(不选中该复选框),将取消选择前4行,从而仅选择第5行。这是我的客户关注的问题。

为了避免这个问题我想到解除绑定/删除rowSelect事件意味着我应该只能通过选择复选框来选择一行。同样的问题也存在于主要展示中。

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

我尝试使用jQuery css选择器以下两种方式取消绑定/删除rowSelect事件

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

            });
</script>  

第二种方式

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

            });
</script>  

两者都不适合我。任何人都可以帮我解决这个问题。

先谢谢你们

2 个答案:

答案 0 :(得分:1)

这并不明显,但按 CTRL 键将允许选择多行而不影响已选择的行。

如果 CTRL 键选项不适用于您的客户端,则需要重新启用jQuery'$'快捷方式以在PrimeFaces应用上使用它。包括以下JSF outputScript标记:

<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>

答案 1 :(得分:1)

您可以这样设计专栏

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

通过这种方式,您只能通过单击复选框来选择和取消选择行。