Introdução a Layui
O Layui é uma estrutura de interface do usuário adequada para programadores de fundo, com baixos custos de aprendizado. JSON Data Formato de interação frontal e back-end e também é bastante adequado para o desenvolvimento de uma página única. Amigos interessados podem conferir o site oficial da Layui.
Interação dos dados da frente e back -end de Layui
O Layui possui seu próprio conjunto de interações específicas de formato de dados (isso é muito importante) e deve parâmetros Código: 0, MSG: "", Conte: Tamanho dos dados (int), dados: "Lista de dados". Geralmente, optamos por encapsular e devolver a classe de recebimento.
Dados de solicitação da recepção da recepção Layui
Entre eles, o código HTML
<link rel="stylesheet" href="static/layui/css/layui.css" rel="external nofollow" media="all" /><script type="text/javascript" src="static/layui/layui.js"></script><table id="test" lay-filter="table"></table>
Código JS
Layui.use (['formulário', 'camada', 'tabela'], function () {var table = Layui.Table, form = Layui.form, $ = Layui. $; Table.render ({elem: '#Test' // Binding Table Id, Url: 'Sys/Menu/List' // [#Test CellMinwid, ,{field:'name', title:'men name'} ,{field:'parentName', title:'parent menu name',width:150} ,{field:'url', title:'menu path'} ,{field:'perms', title: 'menu permission'} ,{field:'type', title:'type'} ,{field:'icon', title:'icon'} ,{field:'orderNum', title:'sorting'} ,{fixed: 'right', title: 'operation', width:180, align:'center', toolbar: '#toolBar'}//For details, please check the layui official website]] ,page: true //Open paging, limit:10 //Default ten data one page, limits:[10,20,30,50] //Data paging bar, id: 'testReload'});});Código de fundo java
@RequestMapping ("/list") @ResponseBody @ReQuiresPerMissions ("SYS: MENU: LISTA") LISTA LAYUI Public (@RequestParam Map <String, Object> Params) {// Lista de consulta Query Query Query = New Query (Parames); Lista <SysMenuentity> Menulist = SysmenUservice.QueryList (consulta); int total = sysmenUservice.Querytotal (consulta); PageUtils PageUtil = novo PageUtils (menulista, total, query.getLimit (), query.getPage ()); Retornar Layui.data (PageUtil.getTotalCount (), PageUtil.getList ()); }Código da ferramenta Layui
classe pública Layui estende o hashmap <string, object> {public static layui dados (contagem inteira, list <?> data) {Layui r = new Layui (); r.put ("código", 0); r.put ("msg", ""); r.put ("contagem", contagem); r.put ("dados", dados); retornar r; }}PageUtils é opcional aqui, você pode encapsulá -lo você mesmo
@Datapublic Classe PageUtils implementa serializável {private estático final serialversionuid = -12027165815899999959l; // Total Records Private int TotalCount; // Número de registros por página private int PageSize; // Total de páginas privado int totalpage; // número de página atual private int currPage; // Lista de dados Lista privada <?> Lista; / *** Página* @param Lista de dados* @param TotalCount Total Registros* @param Pagesize Número de registros por página* @param currPage página atual*/ public PageUtils (lista <?> List, int TotalCount, int PageSize, int curRPage) {this.list = list; this.TotalCount = TotalCount; this.Pagesize = PageSize; this.CurrPage = currPage; this.TotalPage = (int) math.ceil ((duplo) totalCount/pagageSize); }}Em suma, o formato de dados que Layui recebe no final deve ser.
O exemplo acima do Java de Aquisição de Dados de Interação Front e nos bastidores de Layui é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.