Introducción a Layui
Layui es un marco de UI adecuado para programadores de fondo, con bajos costos de aprendizaje. JSON Data Format Interaction Front y Backend, y también es bastante adecuado para el desarrollo de una sola página. Los amigos interesados pueden visitar el sitio web oficial de Layui.
Interacción de datos frontales y de fondo de Layui
Layui tiene su propio conjunto de interacciones de formato de datos específicas (esto es muy importante) y debe parámetros del código: 0, msg: "", recuento: tamaño de datos (int), datos: "lista de datos". En general, elegimos encapsular y devolver la clase de recepción.
Datos de solicitud JS de recepción de Layui
Entre ellos, código HTML
<link rel = "stylesheet" href = "static/layui/css/layui.css" rel = "externo nofollow" medios = "all"/> <script type = "text/javascript" src = "static/layui/layui.js"> </script> <tabla id = "test" lay-filter = "table"> <table> <table> <table> <table> <table> </table>
código JS
layui.use(['form','layer','table'], function(){ var table = layui.table ,form = layui.form,$=layui.$; table.render({ elem: '#test' //Binding table id ,url:'sys/menu/list' //Data request path,cellMinWidth: 80 ,cols: [[ {type:'numbers'} ,{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'} , {campo: 'OrderNum', Title: 'Sorting'}, {fijo: 'derecho', título: 'operación', ancho: 180, align: 'centro', barra de herramientas: '#toolbar'} // Para más detalles, verifique el sitio web oficial de Layui]], página true // Paging, límite, 10 // diez Data Data One Page, Limits: [10,20,20,30,30,30,30,30,30,30,30,50] 'testReload'});});Código de fondo de Java
@RequestMapping ("/List") @ResponseBody @RquiresPermissions ("Sys: Menu: List") Public Layui List (@RequestParam Map <String, Object> Params) {// Consulta Lista de datos Datos Query = New Query (Params); Lista <Smenuentity> menulist = sysmenuservice.queryList (consulta); int total = sysmenuservice.querytotal (consulta); PageUtils PageUtil = new PageUtils (Menulist, Total, Query.getLimit (), query.getPage ()); return layui.data (pageutil.gettotalcount (), pageUtil.getList ()); }Código de herramientas de Layui
La clase pública Layui extiende hashmap <string, object> {public static layui data (recuento de enteros, list <?> data) {Layui r = new Layui (); R.put ("Código", 0); r.put ("msg", ""); R.put ("cuenta", recuento); R.put ("datos", datos); regresar r; }}PageUtils es opcional aquí, puede encapsularlo usted mismo
@Datapublic PageUtils implementa serializable {private static final long serialversionUid = -1202716581589799959l; // Total Records Private Int TotalCount; // Número de registros por página Private int PageSize; // Páginas totales privadas int totalPage; // Número de página actual private int CurrPage; // Lista de datos de datos de datos <?> Lista; / *** Página* @param datos de la lista de la lista* @param TotalCount Total Records* @param Número de registros de páginas por página* @param CurrPage Página actual*/ public PageUtils (List <?> List, int TotalCount, int Pagesize, int CurrPage) {this.list = list; this.totalCount = TotalCount; this.pagesize = PageSize; this.currPage = CurrPage; this.totalPage = (int) Math.ceil (((doble) TotalCount/Pagesize); }}En resumen, el formato de datos que Layui recibe al final debería ser.
El ejemplo anterior de la adquisición de datos de interacción frontal y detrás del escenario de Layui es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.