DataTable不会选择单击中的行,也不会识别分页

时间:2016-09-23 14:06:20

标签: jsf jsf-2 datatable

我正在使用没有Primefaces的Jsf 2,并希望了解如何解决以下问题:

我的DataTable正在正确加载数据,但它不允许我选择已加载到其中的行,看起来好像它会阻止我执行此操作。它也无法识别我添加的分页(当我的页面加载时,不显示上一页,下一页等...)按照下面的完整Xhtml进行操作:

<ui:composition template="/templates/default.xhtml">

    <ui:define name="title">
        <h:outputText value="VPRS-ControleFaixas - Consulta" />
    </ui:define>

    <ui:define name="content">
    <table id="tabela_interna" width="100%" cellpadding="0"
        cellspacing="1">
        <tr>
            <td width="100%" height="100%" colspan="3">
            <h:graphicImage library="imagens" width="70%" name="tit_controle_faixa.gif"/>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
        <td width ="100%" height="100%">
        <h:outputText value="Produto" />
        <h:selectOneMenu style="width : 388px; height : 16px;">
        <f:selectItems value="#{consultarFaixaProdutoBean.listaProduto}" var="produto"
        itemValue="#{produto.codProduto}" itemLabel="#{produto.nomeProduto}"></f:selectItems>
        </h:selectOneMenu>
        </td>
        </tr>

        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>

        <tr>
        <td width ="100%" height="100%" colspan="3">

        <h:dataTable value="#{consultarFaixaProdutoBean.listaFaixa}" var="faixaProduto" 
        paginator="true" rows="15" paginatorTemplate="{CurrentPageReport} >{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
        selectionMode="single" selection="# {consultarFaixaProdutoBean.faixaProdutoVO}" rowKey="#{faixaProduto.codProduto}">
        <h:column>
        <f:facet name="header">Produto</f:facet>
        #{faixaProduto.codProduto}-#{faixaProduto.nomeProduto}
        </h:column>
        <h:column>
        <f:facet name="header">Qtd. Propostas</f:facet>
        #{faixaProduto.qtdFaixaPpsta}
        </h:column>
        <h:column>
        <f:facet name="header">Validade (dias)</f:facet>
        #{faixaProduto.numDiasValPpsta}
        </h:column>
        <h:column>
        <f:facet name="header">Desativação (dias)</f:facet>
        #{faixaProduto.numDiasDesatPpsta}
        </h:column>
        <h:column>
        <f:facet name="header">Ultima Atual.</f:facet>
        #{faixaProduto.dtUltAtualizacao}
        </h:column>
        <h:column>
        <f:facet name="header">Responsável</f:facet>
        #{faixaProduto.cdRespUltimaAtualizacao}
        </h:column>
        </h:dataTable>
        </td>
        </tr>
        </table>

        <table id="tabela_botoes" cellspacing="0" cellpadding="0" >border="0" width="30%">
                <tr align="center">
                    <td>
                        <h:commandButton value="Consultar" action="# {consultarFaixaProdutoBean.consultar}" styleClass="margem_botoes button" />
                    </td>
                    <td>
                        <h:commandButton value="Nova Consulta" action="# {consultarFaixaProdutoBean.novaConsulta}" styleClass="margem_botoes button" />
                    </td>
                </tr>
            </table>
        </ui:define>
    </ui:composition>
    </html>

对于我正在做的项目,我不能以任何方式使用PrimeFaces和Richfaces。那些认识我的人回答我如何在没有他们的情况下做这些行为我很感激。

2 个答案:

答案 0 :(得分:0)

你的JSF组件,动作和事件是否包含在h:form标签中?请在页面中添加h:form标签,我觉得它应该适合你。

答案 1 :(得分:0)

这是我的解决方案分两部分:

1st - 通过鼠标点击未选择该行:

好吧,我发现了一种通过JavaScript选择的方法,以下链接显示了如何执行此任务,并且已经是示例:

https://datatables.net/examples/api/select_single_row.html

第二 - 如何制作分页:

由于以下链接,我设法找到问题的解决方案: http://www.roytuts.com/effective-pagination-example-in-jsf-2/

他们想检查一下它是怎么回事?然后我就在赫赫下面展示:

1创建一个名为Paginacao的类,以控制所有任务事件,观察Paginacao.java类:

package br.com.bradseg.vprs.controlefaixas.crud.model.util;

import java.util.ArrayList;
import java.util.List;

import javax.faces.component.UICommand;
import javax.faces.event.ActionEvent;

public class Paginacao {

    private int totalLinha;
    private int primeiraLinha;
    private int totalPaginas;
    private Integer[] paginas;
    private int paginaAtual;
    private List listaTotal;
    private List listaAux;

    public static final int LINHAS_POR_PAGINA = 15;
    public static final int INTERVALO_PAGINAS = 10; 

    public Paginacao(List listaTotal) {
        this.listaTotal = listaTotal;
        carregaPaginacao();
    }

    // Ações da Paginação -----------------------------------------------------------------------------

    public void carregaPaginacao() {

        totalLinha = listaTotal.size();

        // Set paginaAtual, totalPaginas e paginas.
        paginaAtual = (totalLinha / LINHAS_POR_PAGINA) - ((totalLinha - primeiraLinha) / LINHAS_POR_PAGINA) + 1;
        totalPaginas = (totalLinha / LINHAS_POR_PAGINA) + ((totalLinha % LINHAS_POR_PAGINA != 0) ? 1 : 0);
        int tamanhoPaginas = Math.min(INTERVALO_PAGINAS, totalPaginas);
        paginas = new Integer[tamanhoPaginas];

        int primeiraPagina = Math.min(Math.max(0, paginaAtual - (INTERVALO_PAGINAS / 2)), totalPaginas - tamanhoPaginas);

        // Cria as paginas.
        for (int i = 0; i < tamanhoPaginas; i++) {
            paginas[i] = ++ primeiraPagina;
        }
        carregaDataTable();
    }

    public void carregaDataTable(){

        listaAux = new ArrayList<FaixaProdutoVO>();

        int organizador = (paginaAtual * LINHAS_POR_PAGINA) -  LINHAS_POR_PAGINA;
        int limite =  (paginaAtual * LINHAS_POR_PAGINA);
        for(int i = organizador; i<limite; i++){
            if(totalLinha > i){
                Object o = new Object();
                o = listaTotal.get(i); 
                listaAux.add(o);
            } else{
                break;
            }

        }

    }

    public void primeiraPagina() {
        pagina(0);
    }

    public void proximaPagina() {
        pagina(primeiraLinha + LINHAS_POR_PAGINA);

    }

    public void paginaAnterior() {
        pagina(primeiraLinha - LINHAS_POR_PAGINA);
    }

    public void ultimaPagina() {
        pagina(totalLinha - ((totalLinha % LINHAS_POR_PAGINA != 0) ? totalLinha % LINHAS_POR_PAGINA : LINHAS_POR_PAGINA));

    }

    public void pagina(ActionEvent event) {        
        pagina(((Integer) ((UICommand) event.getComponent()).getValue() - 1) * LINHAS_POR_PAGINA);
    }

    private void pagina(int primeiraLinha) {
        this.primeiraLinha = primeiraLinha;
        carregaPaginacao();
    }

    /**
     * @return the totalLinha
     */
     public int getTotalLinha() {
        return totalLinha;
    }

    /**
     * @param totalLinha the totalLinha to set
     */
     public void setTotalLinha(int totalLinha) {
         this.totalLinha = totalLinha;
     }

     /**
      * @return the primeiraLinha
      */
     public int getPrimeiraLinha() {
         return primeiraLinha;
     }

     /**
      * @param primeiraLinha the primeiraLinha to set
      */
     public void setPrimeiraLinha(int primeiraLinha) {
         this.primeiraLinha = primeiraLinha;
     }

     /**
      * @return the totalPaginas
      */
     public int getTotalPaginas() {
         return totalPaginas;
     }

     /**
      * @param totalPaginas the totalPaginas to set
      */
     public void setTotalPaginas(int totalPaginas) {
         this.totalPaginas = totalPaginas;
     }

     /**
      * @return the paginas
      */
     public Integer[] getPaginas() {
         return paginas;
     }

     /**
      * @param paginas the paginas to set
      */
     public void setPaginas(Integer[] paginas) {
         this.paginas = paginas;
     }

     /**
      * @return the paginaAtual
      */
     public int getPaginaAtual() {
         return paginaAtual;
     }

     /**
      * @param paginaAtual the paginaAtual to set
      */
     public void setPaginaAtual(int paginaAtual) {
         this.paginaAtual = paginaAtual;
     }

     /**
      * @return the listaAux
      */
     public List getListaAux() {
         return listaAux;
     }

     /**
      * @param listaAux the listaAux to set
      */
     public void setListaAux(List listaAux) {
         this.listaAux = listaAux;
     }



}

2在我的ManagedBean中,创建了一个对象分页类,如下所示(ConsultarFaixaProdutoBean.java):

@Controller
@ManagedBean
@SessionScoped 
public class ConsultarFaixaProdutoBean extends BaseController implements Serializable {

private Paginacao paginacao;

    private FaixaProdutoVO faixaProdutoVO;

    private List<FaixaProdutoVO> listaTotal;
    private List<FaixaProdutoVO> listaFaixa;

@PostConstruct
    public void init(){
        faixaProdutoVO = new FaixaProdutoVO();
        listaTotal = faixaProdutoFacade.obterListaFaixaProduto(faixaProdutoVO);

        if (listaTotal != null && !listaTotal.isEmpty()){
            aplicarPaginacao();
        }
    }

    public void aplicarPaginacao(){
        if(listaFaixa == null){
            paginacao = new Paginacao(listaTotal);
        }else{
            paginacao.carregaPaginacao();
        }

        setListaFaixa((List<FaixaProdutoVO>)paginacao.getListaAux());
    }

//Setters e Getters
}

3 - 最后,按照我的Xhtml页面调用其属性:

<?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://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://java.sun.com/jsp/jstl/core">

    <h:form id="content">
    <ui:composition template="/templates/default.xhtml">

    <ui:define name="content">

    <h:outputScript library="js" name="util.js" />

        <table id="tabela_interna" width="100%" cellpadding="0"
            cellspacing="1">
    <tr>
            <td width ="100%" height="100%" colspan="3"> 
            <h:form>

            <h:dataTable  id="tableFaixa" value="#{consultarFaixaProdutoBean.listaFaixa}" var="faixaProduto" 
            selectionMode="single" selection="#{consultarFaixaProdutoBean.faixaProdutoVO}" rowKey="#{faixaProduto.codProduto}" width ="100%" height="100%">
        <h:column>
         <input type="radio" class="optionbutton" name="rdbOption" onclick="javascript:salvaProdutoCookie();"
                value="#{faixaProduto.codProduto}" />  
        </h:column>

            <h:column>
            <f:facet name="header">Produto</f:facet>
            #{faixaProduto.codProduto}-#{faixaProduto.nomeProduto}
            </h:column>
            <h:column>
            <f:facet name="header">Qtd. Propostas</f:facet>
            #{faixaProduto.qtdFaixaPpsta}
            </h:column>
            <h:column>
            <f:facet name="header">Validade (dias)</f:facet>
            #{faixaProduto.numDiasValPpsta}
            </h:column>
            <h:column>
            <f:facet name="header">Desativação (dias)</f:facet>
            #{faixaProduto.numDiasDesatPpsta}
            </h:column>
            <h:column>
            <f:facet name="header">Ultima Atual.</f:facet>
            #{faixaProduto.dtUltAtualizacao}
            </h:column>
            <h:column>
            <f:facet name="header">Responsável</f:facet>
            #{faixaProduto.cdRespUltimaAtualizacao}
            </h:column>
            </h:dataTable>  
            </h:form>
            <br />
            </td>
            </tr>
            </table>
 <table>
             <tr>
             <td>
             <h:form>
            <!--Botoes de Paginacao-->
            <h:commandLink value="Primeiro" action="#{consultarFaixaProdutoBean.paginacao.primeiraPagina}"
                             disabled="#{consultarFaixaProdutoBean.paginacao.primeiraLinha == 0}" />  <span></span>
            <h:commandLink value="Anterior" action="#{consultarFaixaProdutoBean.paginacao.paginaAnterior}"
                             disabled="#{consultarFaixaProdutoBean.paginacao.primeiraLinha == 0}" /> <span></span>
                  <ui:repeat value="#{consultarFaixaProdutoBean.paginacao.paginas}" var="pagina">
                <h:commandLink value="#{pagina}" actionListener="#{consultarFaixaProdutoBean.paginacao.pagina}"
                               rendered="#{pagina != consultarFaixaProdutoBean.paginacao.paginaAtual}" />
                <h:outputText value="&lt;b&gt;#{pagina}&lt;/b&gt;" escape="false"
                              rendered="#{pagina == consultarFaixaProdutoBean.paginacao.paginaAtual}" />
            </ui:repeat> <span></span>
            <h:commandLink value="Próximo" action="#{consultarFaixaProdutoBean.paginacao.proximaPagina}"
                             disabled="#{consultarFaixaProdutoBean.paginacao.primeiraLinha + 15 >= consultarFaixaProdutoBean.paginacao.totalLinha}" /> <span></span>
            <h:commandLink value="Último" action="#{consultarFaixaProdutoBean.paginacao.ultimaPagina}" 
                             disabled="#{consultarFaixaProdutoBean.paginacao.primeiraLinha + 15 >= consultarFaixaProdutoBean.paginacao.totalLinha}" /> <span></span>
            <h:outputText value="Pagina #{consultarFaixaProdutoBean.paginacao.paginaAtual} / #{consultarFaixaProdutoBean.paginacao.totalPaginas}" /> 
            <br />


            </h:form>
            </td>
            </tr>
             </table>

            </ui:define>

    </ui:composition>
    </h:form>
    </html>