Como Receber e Processar Dados entre Páginas no Layui com Paginação no Servidor

Enviando Dados para uma Nova Página via URL

Ao abrir uma nova janela ou aba no Layui usando layer.open, é possível transmitir parâmetros diretamente na URL. O exemplo abaixo ilustra como passar o tipo de operação e identificadores:

layer.open({  
    type: 2,  
    title: 'Gerenciar Projeto',  
    shadeClose: false,  
    shade: [0.3],  
    maxmin: true,  
    area: ['900px', '90%'],  
    scrollbar: false,  
    content: 'operacao.html?tipo=incluir&predioId=' + predioId + '&negocioId=' + negocioId  
});  

Capturando Parâmetros na Nova Página

Na página recém-aberta, utilize uma função utilitária para extrair os valores da query string. Em seguida, implemente uma lógica condicional com base no parâmetro recebido:

var tipoOperacao = QueryUtils.ObterParametro("tipo");  

switch (tipoOperacao) {  
    case "incluir":  
        // Lógica para inclusão  
        break;  
    case "editar":  
        // Lógica para edição  
        break;  
    case "visualizar":  
        // Lógica para visualização  
        break;  
    default:  
        break;  
}  

Configuração da Tabela com Paginação no Servdior

Para renderizar uma tabela com paginação a partir do back end, utilize table.render do Layui. Defina a URL da API, habilite a paginação e informe os campos das colunas:

table.render({  
    elem: '#tabelaSalas',  
    url: '/sala/json/',  
    page: true,  
    limit: 20,  
    height: 'full-150',  
    where: filtros,  
    cols: [[  
        {field: 'ROWNUM', fixed: true},  
        {field: 'SALA_NUM', title: 'Número', width: 100},  
        {field: 'NOME', title: 'Tipo Projeto', width: 100},  
        {field: 'AREA_SALA', title: 'Área (m²)', width: 100},  
        {field: 'UNIDADE_NOME', title: 'Unidade', width: 80},  
        {field: 'ANDAR_NOME', title: 'Andar', width: 80},  
        {field: 'TIPO_DIREITO', title: 'Direito Propriedade', templet: '#templateDireito', width: 120},  
        {field: 'INFO_SALA', title: 'Observações', width: 100},  
        {field: 'CRIADOR_NOME', title: 'Criado por', width: 120},  
        {field: 'DATA_CRIACAO', title: 'Data Criação', width: 180, align: 'center'},  
        {field: 'ATIVO', title: 'Ativo', templet: '#templateStatus', width: 100, align: 'center'},  
        {fixed: 'right', title: 'Ações', width: 360, align: 'center', toolbar: '#barraAcoes'}  
    ]]  
});  

Endpoint do Servidor com Paginação

No controlador (Spring MVC), crie um método que retorna os dados formatados para o Layui. O exemplo abaixo utiliza uma classe auxiliar para montar a resposta JSON:

@RequestMapping(value = "/json")  
@ResponseBody  
public Object json(Page pagina) {  
    PageData dadosPagina = new PageData();  
    Map<String, Object> mapa = new HashMap<>();  
    List<PageData> listaResultados;  
    String resultadoJson = null;  

    Subject usuarioAtual = SecurityUtils.getSubject();  
    Session sessao = usuarioAtual.getSession();  
    User usuario = (User) sessao.getAttribute(Const.SESSION_USER);  

    try {  
        dadosPagina = this.getPageData();  
        dadosPagina.put("USUARIO_ID", usuario.getUSER_ID());  
        GetDatalayui.prepararPagina(pagina, dadosPagina);  
        listaResultados = salaService.listar(pagina);  
        resultadoJson = GetDatalayui.gerarJson(pagina, listaResultados);  
    } catch (Exception e) {  
        logger.error(e.toString(), e);  
    } finally {  
        logApos(logger);  
    }  
    return resultadoJson;  
}  

Classe Auxiliar para Paginação no Layui

A classe GetDatalayui centraliza a lógica de paginação e formatação da resposta. Ela extrai os parâmetros de página e limite enviados pelo Layui e constrói o JSON esperado:

public class GetDatalayui {  
    protected static Logger logger = Logger.getLogger(GetDatalayui.class);  

    public static void prepararPagina(Page pagina, PageData dados) {  
        pagina.setShowCount(Integer.parseInt(dados.get("limit").toString()));  
        pagina.setCurrentPage(Integer.parseInt(dados.get("page").toString()));  
        pagina.setPd(dados);  
    }  

    public static String gerarJson(Page pagina, List<PageData> lista) {  
        String inicio = "{\"code\":0,\"msg\":\"\",\"count\":" + pagina.getTotalResult() + ",\"data\":";  
        String fim = "}";  
        String jsonResultado = null;  

        if (lista != null && !lista.isEmpty()) {  
            for (int i = 0; i < lista.size(); i++) {  
                lista.get(i).put("ROWNUM", (pagina.getCurrentPage() - 1) * 10 + i + 1);  
            }  
        }  
        jsonResultado = JSONHelper.array2json(lista);  
        jsonResultado = inicio + jsonResultado + fim;  
        return jsonResultado;  
    }  

    public static String obterNomeUsuario() {  
        Subject usuarioAtual = SecurityUtils.getSubject();  
        Session sessao = usuarioAtual.getSession();  
        User usuario = (User) sessao.getAttribute(Const.SESSION_USER);  
        return usuario.getUSERNAME();  
    }  

    public static int calcularTotal(int totalAtual, int incremento, Page pagina) {  
        pagina.setTotalResult(totalAtual + incremento);  
        return totalAtual + incremento;  
    }  
}  

Classe de Paginação Perosnalizada

A classe Page gerencia os parâmetros de paginação, como página atual, total de registros e itens por página. Ela também gera a string HTML da navegação de páginas (opcional, caso não se use o componente nativo do Layui):

public class Page {  
    private int itensPorPagina;  
    private int totalPaginas;  
    private int totalRegistros;  
    private int paginaAtual;  
    private int indiceAtual;  
    private boolean usarEntidade;  
    private String navegacaoHtml;  
    private PageData dados = new PageData();  

    public Page() {  
        try {  
            this.itensPorPagina = Integer.parseInt(Tools.lerArquivoTexto(Const.PAGE));  
        } catch (Exception e) {  
            this.itensPorPagina = 15;  
        }  
    }  

    // Getters e setters omitidos para brevidade  
}  

Classe PageData (Wrapper de Dados)

PageData é uma extensão de HashMap que facilita a manipulação de parâmetros de requisição e dados adicionais:

public class PageData extends HashMap implements Map {  
    private static final long serialVersionUID = 1L;  
    Map map = null;  
    HttpServletRequest request;  

    public PageData(HttpServletRequest request) {  
        this.request = request;  
        Map propriedades = request.getParameterMap();  
        Map mapaRetorno = new HashMap();  
        Iterator entradas = propriedades.entrySet().iterator();  
        Entry entrada;  
        String nome = "";  
        String valor = "";  
        while (entradas.hasNext()) {  
            entrada = (Entry) entradas.next();  
            nome = (String) entrada.getKey();  
            Object valorObj = entrada.getValue();  
            if (null == valorObj) {  
                valor = "";  
            } else if (valorObj instanceof String[]) {  
                String[] valores = (String[]) valorObj;  
                for (int i = 0; i < valores.length; i++) {  
                    valor = valores[i] + ",";  
                }  
                valor = valor.substring(0, valor.length() - 1);  
            } else {  
                valor = valorObj.toString();  
            }  
            mapaRetorno.put(nome, valor);  
        }  
        map = mapaRetorno;  
    }  

    // Demais métodos sobrescritos omitidos  
}  

Tags: layui javascript Paginação Servidor Spring MVC java

Publicado em 7-13 07:27