Change color of a row in the datatable when marking a checkbox

Question

Change color of a row in the datatable when marking a checkbox

Navigation

#1 by (2 votes)

1

I'm developing an application using the bootsfaces framework in JavaWeb.

On one of my screens I have a datafile of bootsfaces with the values coming from my Bean and a checkbox of the primefaces that assists in deleting or changing a particular record.

I need to make clicking on any of the fields of a certain record in the datatable the checkbox of the firstfaces fired and its row has its color changed.

The xhtml code so far:

<?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:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:b="http://bootsfaces.net/ui">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:form id="frm">
            <b:dataTable value="#{beanUsuario.usuarios}" style="width: 100%; " id="tabelaUsuario"
                         page-length="5" page-length-menu="5,10,20,50,100" var="usuario"
                         widgetVar="usuario" customLangUrl="json/Portuguese-Brasil.json">
                <b:dataTableColumn header-style="text-align:center;
                                   border-right:none;" content-style="border:none; text-align:center;" label="Nome" >
                    <label for="check#{usuario.nome}">
                        #{usuario.nome}
                    </label>
                </b:dataTableColumn>
                <b:dataTableColumn header-style="text-align:center;" content-style="border:none; text-align:center;" label="Email">
                    <label for="check#{usuario.nome}">
                        #{usuario.email}
                    </label>
                </b:dataTableColumn>
                <b:dataTableColumn header-style="text-align:center;" content-style="border:none; text-align:center;" label="Endereço">
                    <label for="check#{usuario.nome}">
                        #{usuario.endereco}
                    </label>
                </b:dataTableColumn>
                <b:dataTableColumn header-style="text-align:center;" content-style="border:none; text-align:center;" label="Telefone">
                    <label for="check#{usuario.nome}">
                        #{usuario.telefone}
                    </label>
                </b:dataTableColumn>

                <b:dataTableColumn label="Check box Prime" header-style="text-align:center;" content-style="border:none; text-align:center;" >
                    <p:selectBooleanCheckbox id="check#{usuario.nome}">
                        <p:ajax listener="#{beanUsuario.selecionaUsuario(usuario.nome)}" /> 
                    </p:selectBooleanCheckbox>
                </b:dataTableColumn>
            </b:dataTable>
        </h:form>
    </h:body>
</html>

Here's my Bean:

package com.controller.usuario;

import com.model.usuario.Usuario;
import javax.inject.Named;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.enterprise.context.RequestScoped;
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;

import org.primefaces.context.RequestContext;

@Named(value = "beanUsuario")
@RequestScoped
public class BeanUsuario implements Serializable {

    private Usuario usuario;
    private Usuario usuarioSelecionado;
    private List<Usuario> usuarios;



    public BeanUsuario() {
        usuarios = new ArrayList<Usuario>();
        usuario = new Usuario();

        teste = 0;

        for (int i = 0; i < 20; i++) {
            Usuario u = new Usuario();

            u.setDescricao("ALGO" + i);
            u.setEmail("[email protected]");
            u.setEndereco("estrada" + 1);
            u.setTelefone(i);
            u.setNome("user" + i);
            u.setTelefone(1232 + i);

            usuarios.add(u);
        }

    }


    public Usuario getUsuario() {
        return usuario;
    }

    public void setUsuario(Usuario usuario) {
        this.usuario = usuario;
    }



    public List<Usuario> getUsuarios() {
        return usuarios;
    }

    public void setUsuarios(List<Usuario> usuarios) {
        this.usuarios = usuarios;
    }



}

jsf primefaces bootsfaces

asked by anonymous 09.08.2017 / 14:49

1 answer

Back to the page with the modal open Using require, where to use this tag?

score 2 · Accepted Answer

(English version below - please apologize my bad Portuguese).

It appears that you have discovered a feature missing from BootsFaces. However, if you can do without the PrimeFaces checkbox, use the select="true" and selectionMode="multiple" attributes. They allow you to select a single line. You can also call a method using AJAX when the line is selected.

It seems you've discovered the missing feature of BootsFaces. However, if you can do without the PrimeFaces checkbox, use the attributes select="true" and selectionMode="multiple" . They allow you to select a single row. You can also call a method using AJAX when the row is selected.