该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

layui(谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

这里展示layui table表格，使用lay-data，进行table表格自动渲染：

编号姓名电话手机部门职位地址备注

table表格自动渲染重点是layui-table类的使用，所以一定要引用laui.css文件，还有使用lay-data配置基础参数。然后就是后台准备数据：

publicvoidtabStaff(HttpServletRequest request,

HttpServletResponseresponse) throws ServletException, IOException {

Stringpage = request.getParameter("page");//当前是第几页数

Stringlimit = request.getParameter("limit");//每页显示数据条数

ListstaffInfos = staffService.findAll(Integer.parseInt(page),

Integer.parseInt(limit));

long totalRow = staffService.getTotalRow();

LayuiJSONlayuiJSON =new LayuiJSON();

layuiJSON.setCount(totalRow);

layuiJSON.setData(staffInfos);

JSONObjectjsonObject = JSONObject.fromObject(layuiJSON);

PrintWriterout = response.getWriter();

out.write(jsonObject.toString());

out.flush();

out.close();

}

Layui请求数据会带有两个参数，分别是page和limit，page是当前是页数，limit是每页显示数据条数，而后台返回数据到页面需要四个参数：code,msg,count,data，这里封装了一个类LayuiJSON来返回页面

package com.web.vo;

import java.util.List;

publicclass LayuiJSON{

privateintcode = 0;

private String msg;

privatelongcount;

private List data;

//set/get方法

}

然后用JsonObect以Json数据格式返回到页面，最后页面后面记得引用layui.js加载table：

layui.use('table', function(){

var table = layui.table;

});

整体运行效果如下：