2010-12-29 250 views
5

Estoy usando PrimeFaces DataTable para visualizar registros (generados aleatoriamente en una aplicación de recinto de seguridad). Estoy usando la versión de selección de casilla de verificación. El DataTable básico funciona perfectamente, incluidos los botones Eliminar y Cancelar (cuya funcionalidad solo está disponible en el diálogo de confirmación). Estoy intentando agregar funcionalidad al DataTable para que cuando se selecciona una casilla de verificación, otros controles en la página se habiliten o deshabiliten en función de la selección.PrimeFaces DataTable - necesito habilitar/deshabilitar componentes según la selección de fila

En otras palabras, si no se seleccionan filas (no hay casillas de verificación marcadas) ciertos botones y/o elementos del menú están deshabilitados o no se representan. Seleccionar una o más filas haciendo clic en la casilla de verificación debería habilitar o representar los controles. He intentado utilizar los controladores de eventos JavaScript incorporados, pero no puedo hacer que esto funcione.

Ahora mi página muestra una columna de DataTable 5: una columna de selección de casilla de verificación, Nombre, Apellido, Edad. Hice algo así en otro cajón de arena utilizando casillas booleanas simples y actualizando un booleano con el evento onclick. Desafortunadamente, no parece haber nada similar en este DataTable, o si no sé cómo implementarlo.

Mi página de índice:

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:f="http://java.sun.com/jsf/core" 
     xmlns:h="http://java.sun.com/jsf/html" 
     xmlns:p="http://primefaces.prime.com.tr/ui" 
     xmlns:c="http://java.sun.com/jsp/jstl/core" 
     xmlns:ui="http://java.sun.com/jsf/facelets"> 

    <body> 

     <ui:composition template="./newTemplate.xhtml"> 


      <ui:define name="content"> 
      <h:form> 

       <p:dataTable rowSelectListener="#{tableBean.onRowSelect}" var="data" value="#{tableBean.data}" paginator="true" rows="10" 
        selection="#{tableBean.selectedNames}"> 

       <f:facet name="header"> 
        Customer List 
       </f:facet> 


       <p:column selectionMode="multiple" /> 

       <p:column headerText="Cust ID"> 
        <h:outputText value="#{data.id}" /> 
       </p:column> 

       <p:column headerText="First Name"> 
        <h:outputText value="#{data.firstName}" /> 
       </p:column> 

       <p:column headerText="Last Name"> 
        <h:outputText value="#{data.lastName}" /> 
       </p:column> 

       <p:column headerText="Age"> 
        <h:outputText value="#{data.age}" /> 
       </p:column> 

       <f:facet name="footer">       
        <p:commandButton update="deleteList" value="Delete" oncomplete="deleteDlg.show()" /> 
       </f:facet> 

      </p:dataTable> 

      <p:dialog header="Delete Selected Records" modal="true" widgetVar="deleteDlg" 
         > 

       <h:outputText value="You are about to permanently delete records." /><br /><br /> 
       <h:outputText value="Are you sure you want to continue?" /><br /><br/> 

       <h:commandButton value="CANCEL" action="#{tableBean.cancelDelete()}" /> <h:commandButton value="Delete" action="#{tableBean.deleteNames()}" /> 
      </p:dialog> 

     </h:form> 
      </ui:define> 

     </ui:composition> 

    </body> 
</html> 

Código de mi bean de respaldo que puede ser relevante:

public void deleteNames() 
    { 
     for(Data person : selectedNames) 
     { 
      data.remove(person); 
     } 
    } 

    public void cancelDelete() 
    { 
     for(Data name : selectedNames) 
      selectedNames = null; 
    } 

    public void onRowSelect(SelectEvent event) 
    { 
     if(selectedNames == null || selectedNames.length < 1) 
      setDisable(true); 
     else 
      setDisable(false); 
    } 

public boolean isDisable() { 
     if(selectedNames == null || selectedNames.length < 1) 
      disable = true; 
     else 
      disable = false; 
     return disable; 
    } 

    public void setDisable(boolean disable) { 
     this.disable = disable; 
    } 
+0

Bueno, lo único que he podido encontrar es abandonar las casillas de verificación. PrimeFaces tiene una opción de "selección instantánea" en la que hace clic en cualquier lugar de la fila de tabla de datos para seleccionarla. Usando esa opción, con selectionMode = "multiple", y cambiando mis CommandButtons de JSF estándar a PrimeFaces commandButtons, puedo activarlos y desactivarlos cuando las filas son seleccionadas o no seleccionadas. Todavía preferiría usar las casillas de verificación para la selección, pero eso no parece posible con una tabla de datos PrimeFaces. – Sean

Respuesta

1

Hay una solución de hecho, al menos trabajo para mí.

  • extraer los datatable.js de primefacess
  • modificar las datatable.js selectRowWithRadio, funciones selectRowWithRadio como abajo
     
        PrimeFaces.widget.DataTable.prototype.selectRowWithCheckbox = function(element) { 
         ... 
         ... 
         //save state 
         this.writeSelections(); 
    
         // added to add instant row selection 
         this.fireRowSelectEvent(rowId); 
         // end 
        } 
    
  • añadir el javascript abajo para final de su componente de tabla de datos
     
    <p:datatable widgetVar="wv1" id='mydatatable' ....> 
    ... 
    <p:datatable/> 
    <script type="text/javascript"> 
        if(!wv1_main.cfg.onRowSelectUpdate){ 
         wv1.cfg.onRowSelectUpdate=""; 
        }else{ 
         wv1.cfg.onRowSelectUpdate+=" "; 
        } 
        wv1.cfg.onRowSelectUpdate+="UPDATE_IDS"; 
    </script> 
    
    Reemplazar 'UPDATE_IDS' con los identificadores de su panel separados por espacio, como "panel1 panel2";
    Reemplazar 'WV1' con el valor de la tabla de datos propiedad widgetVar
  • importar el js modificados en su página JSF en las que desee utilizar ajax selección casilla/Radia instantánea.
     
    <h:header/> 
    ... 
    <script type="text/javascript" src="#{CONTEXT_PATH}/resources/js/datatable.js"/> 
    <h:header/> 
    

es posible que más importan las filas seleccionadas con alguna modificación más

+0

Gracias por el trabajo. – Sean

1

simplemente buscaba solución al mismo problema y desde JSF 2/Primefaces están evolucionando muy rápido en estos días, que se encuentra más arriba hasta la fecha solución para Primefaces de la versión 3.0 o superior.

Según siguiente respuesta en PrimeFaces hilo del foro: http://forum.primefaces.org/viewtopic.php?f=3&t=1373&sid=bbfcd6a343edf586f927cd7ecd7d01b9&start=10#p48388

se puede añadir JavaScript del lado cliente manejador de <p:datatable> componente haciendo siguientes pasos:

1.Agregue primefaces-extension JAR al classpath de su webapp (esta biblioteca también está disponible en el repositorio central de Maven con el mismo nombre). Probé la versión 0.6.3 que fue la última en el momento de la escritura, y funcionó para mí

2.Add pe espacio de nombres correspondiente a xhtml archivo:

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:f="http://java.sun.com/jsf/core" 
     xmlns:h="http://java.sun.com/jsf/html" 
     xmlns:p="http://primefaces.prime.com.tr/ui" 
     xmlns:c="http://java.sun.com/jsp/jstl/core" 
     xmlns:ui="http://java.sun.com/jsf/facelets" 
     xmlns:pe="http://primefaces.org/ui/extensions"> 

     ... 

</html> 

3.Add <pe:javascript> como un elemento secundario a su <p:datatable> componente (puede ser en realidad se agrega a cualquier componente que implementa la interfaz ClientBehaviorHolder) como el siguiente:

<html> 
    ... 
    <p:dataTable rowSelectListener="#{tableBean.onRowSelect}" var="data" value="#{tableBean.data}" paginator="true" rows="10" selection="#{tableBean.selectedNames}"> 
     <pe:javascript event="rowSelect" execute="onRowSelectedHandler();"/> 
     ... 
    </p:dataTable> 
    ... 
</html> 

Y eso shoul d be it, espero que esto ayude ...

0

Puede detectar los eventos ajax que se activan cuando se selecciona la fila.

En su caso,

<p:dataTable rowSelectListener="#{tableBean.onRowSelect}" 
    var="data" value="#{tableBean.data}" paginator="true" rows="10" 
    selection="#{tableBean.selectedNames}"> 

    <p:ajax event="rowSelectCheckbox" listener="#{tableBean.handleEvent}" 
     update="buttonThatNeedsToBeRendered"/> 

    <p:column selectionMode="multiple" /> 

    ... 

</p:dataTable> 

Otros eventos útiles que son despedidos en función del modo de selección de la dataTable son:

  1. rowSelect y rowUnselect
  2. rowSelectCheckbox y rowUnselectCheckbox
  3. rowSelectRadio
  4. toggleSelect
+0

Gracias por los 'eventos' útiles –

Cuestiones relacionadas