<b:datatable> con dialogs

Bootfaces ofrece el componente b:datatable , difiere un poco del de primefaces.

Contamos con un <b:datatable>, tiene el inconveniente con el select item diferente al de primefaces.

En este ejemplo usamos un <b:dropMenu donde mostramos otros botones y un boton para comentarios que al presionarlo muestra el dialogo.

Se muestra el dialogo para agregar la observación.

Creamos un componente

<?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:p="http://primefaces.org/ui"
      xmlns:composite="http://java.sun.com/jsf/composite"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:e="http://xmlns.jcp.org/jsf/composite/extensions"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <composite:interface >


        <composite:attribute name="rendered" />

    </composite:interface>
    <composite:implementation>


        <p:panelGrid columns="2" styleClass="form-group ui-panelgrid-blank" layout="grid"
                     rendered="#{cc.attrs.rendered}">


            <p:row>
                <p:column>
                    <b:dropMenu styleClass="danger"  value="" tooltip="#{msg['button.clasificacion']}" iconAwesome="fa-address-card">
                        <!--<b:panel  >-->
                        <p:panelGrid columns="4" styleClass="form-group ui-panelgrid-blank" layout="grid">



                            <p:repeat value="#{clienteController.clasificacionclienteServices.clasificacionclienteList}" var="itemclasificacion">
                                <b:commandButton value="#{clienteController.primerCaracter(itemclasificacion.descripcion)}"
                                                 look="#{clienteController.look(itemclasificacion.descripcion)}"
                                                 title="#{itemclasificacion.descripcion}" 
                                                 process=":form:dataTable" 
                                                 action="#{clienteController.updateClasificacion(item,itemclasificacion)}"
                                                 oncomplete="remoteshowall();"
                                                 />
                            </p:repeat>   

                            <b:commandButton 
                                iconAwesome="fa-comment-o"
                                action="#{clienteController.forEdit(item)}"
                                oncomplete="PF('dlg').show();"
                                update=":form:content"  />

                        </p:panelGrid>




                        <!--</b:panel>-->
                    </b:dropMenu>



                </p:column>






            </p:row>

            <p:dialog header="#{msg['field.observacion']}" widgetVar="dlg" id="amodal2" dynamic="true" styleClass="customDialog">
                <p:outputPanel autoUpdate="true" id="paneldialogo" >


                    <p><b:inputTextarea  value="#{clienteController.observacion}"/></p>

                    <b:commandButton  value="#{app['button.save']}"
                                      iconAwesome="fa-floppy-o"
                                      title="#{app['button.save']}"
                                      action="#{clienteController.editObservacion(clienteController.observacion)}" />

                </p:outputPanel>

            </p:dialog>



        </p:panelGrid>

    </composite:implementation>

</html>

En el datatable

 <b:dataTable value="#{clienteController.clienteDataModel}"
                             var="item"
                             id="dataTable2"
                             paginated="false"

                        select="true"
                             row-style-class="#{item.clasificacioncliente.idclasificacioncliente > 1?'red':'light'}"
                             onpage="console.log('page');">

                    <b:dataTableColumn value="#{item.idcliente}" label="#{msg['field.idcliente']}" style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}"/>
                    <b:dataTableColumn value="#{item.cedula}" label="#{msg['field.cedula']}" style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}"/>
                    <b:dataTableColumn value="#{item.nombre}" label="#{msg['field.nombre']}" style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}" />
                    <b:dataTableColumn value="#{item.telefono}" label="#{msg['field.telefono']}" style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}" />
                    <b:dataTableColumn value="#{item.celular}" label="#{msg['field.celular']}" style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}"  />



                    <b:dataTableColumn value="#{item.tipocliente.idtipocliente}" label="#{msg['field.idtipocliente']}" style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}" />


                    <b:dataTableColumn value="#{item.clasificacioncliente.descripcion}" style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}"
                                       label="#{msg['field.clasificacioncliente']}" />

                    <b:dataTableColumn value="#{item.observacion}" label="#{msg['field.observacion']}"
                                       style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}" />

                    <b:dataTableColumn value="#{item.activo}" label="#{msg['field.activo']}" />                  
                    <b:dataTableColumn label="">

                        <a:column

                            edit="#{clienteController.prepare('view',item)}"
                            delete="#{clienteController.delete(item,false)}"
                            rendered="#{applicationMenu.cliente.delete}"
                            />




                    </b:dataTableColumn>
                    <b:dataTableColumn label="">
                        <e:columncategoriacliente
                            rendered="#{applicationMenu.cliente.edit}"
                            />
                    </b:dataTableColumn>



                </b:dataTable>

Controller

public String forEdit(Cliente cliente){

        clienteSelected = cliente;
        this.cliente = cliente;
        this.observacion = cliente.getObservacion();
        return "";
    }


     public String columnColor(String descripcion ){
        String color="";
        try {
            switch(JsfUtil.primerCaracter(descripcion)){
                case "M":
                    color="red";
                    break;
                default:
                    color="black";
            }
        } catch (Exception e) {
             JsfUtil.errorMessage("color() " + e.getLocalizedMessage());
        }
        return color;
    }

Previouscolor columna NextBusquedas

Last updated 6 years ago

Was this helpful?

<?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:p="http://primefaces.org/ui" xmlns:composite="http://java.sun.com/jsf/composite" xmlns:b="http://bootsfaces.net/ui" xmlns:e="http://xmlns.jcp.org/jsf/composite/extensions" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://xmlns.jcp.org/jsf/html"> <composite:interface > <composite:attribute name="rendered" /> </composite:interface> <composite:implementation> <p:panelGrid columns="2" styleClass="form-group ui-panelgrid-blank" layout="grid" rendered="#{cc.attrs.rendered}"> <p:row> <p:column> <b:dropMenu styleClass="danger" value="" tooltip="#{msg['button.clasificacion']}" iconAwesome="fa-address-card">  <p:panelGrid columns="4" styleClass="form-group ui-panelgrid-blank" layout="grid"> <p:repeat value="#{clienteController.clasificacionclienteServices.clasificacionclienteList}" var="itemclasificacion"> <b:commandButton value="#{clienteController.primerCaracter(itemclasificacion.descripcion)}" look="#{clienteController.look(itemclasificacion.descripcion)}" title="#{itemclasificacion.descripcion}" process=":form:dataTable" action="#{clienteController.updateClasificacion(item,itemclasificacion)}" oncomplete="remoteshowall();" /> </p:repeat> <b:commandButton iconAwesome="fa-comment-o" action="#{clienteController.forEdit(item)}" oncomplete="PF('dlg').show();" update=":form:content" /> </p:panelGrid>  </b:dropMenu> </p:column> </p:row> <p:dialog header="#{msg['field.observacion']}" widgetVar="dlg" id="amodal2" dynamic="true" styleClass="customDialog"> <p:outputPanel autoUpdate="true" id="paneldialogo" > <p><b:inputTextarea value="#{clienteController.observacion}"/></p> <b:commandButton value="#{app['button.save']}" iconAwesome="fa-floppy-o" title="#{app['button.save']}" action="#{clienteController.editObservacion(clienteController.observacion)}" /> </p:outputPanel> </p:dialog> </p:panelGrid> </composite:implementation> </html>

<b:dataTable value="#{clienteController.clienteDataModel}" var="item" id="dataTable2" paginated="false" select="true" row-style-class="#{item.clasificacioncliente.idclasificacioncliente > 1?'red':'light'}" onpage="console.log('page');"> <b:dataTableColumn value="#{item.idcliente}" label="#{msg['field.idcliente']}" style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}"/> <b:dataTableColumn value="#{item.cedula}" label="#{msg['field.cedula']}" style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}"/> <b:dataTableColumn value="#{item.nombre}" label="#{msg['field.nombre']}" style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}" /> <b:dataTableColumn value="#{item.telefono}" label="#{msg['field.telefono']}" style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}" /> <b:dataTableColumn value="#{item.celular}" label="#{msg['field.celular']}" style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}" /> <b:dataTableColumn value="#{item.tipocliente.idtipocliente}" label="#{msg['field.idtipocliente']}" style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}" /> <b:dataTableColumn value="#{item.clasificacioncliente.descripcion}" style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}" label="#{msg['field.clasificacioncliente']}" /> <b:dataTableColumn value="#{item.observacion}" label="#{msg['field.observacion']}" style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}" /> <b:dataTableColumn value="#{item.activo}" label="#{msg['field.activo']}" /> <b:dataTableColumn label=""> <a:column edit="#{clienteController.prepare('view',item)}" delete="#{clienteController.delete(item,false)}" rendered="#{applicationMenu.cliente.delete}" /> </b:dataTableColumn> <b:dataTableColumn label=""> <e:columncategoriacliente rendered="#{applicationMenu.cliente.edit}" /> </b:dataTableColumn> </b:dataTable>