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
}