layui数据表格与后台交互进行渲染

准备工作

1.下载

先去官网把下载好的软件包放入到项目中 https://www.layui.com/

2.引入样式和js

这里路径需要改成你自己的路径

<link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/layui/css/layui.css" media="all">
<script src="${pageContext.request.contextPath }/static/js/layui/layui.js" charset="utf-8"></script>

3.引入控件

去官方文档找到table数据表格的控件 https://www.layui.com/doc/modules/table.html

放置标签

<table id="demo" lay-filter="test"></table>

加载控件

这里我们使用只需要改一下数据接口和指定表头就好了。

<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 312
    ,url: '/demo/table/user/' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width:80} 
      ,{field: 'sign', title: '签名', width: 177}
      ,{field: 'experience', title: '积分', width: 80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true}
      ,{field: 'classify', title: '职业', width: 80}
      ,{field: 'wealth', title: '财富', width: 135, sort: true}
    ]]
  });
  
});
</script>

4.数据格式

这部分很重要，我们使用layui框架必须要去遵循它的数据格式。

1. code:结果码
2. msg:消息
3. count:总记录数
4. data:行数据对象

{
	"code": 0,
	"msg": "ok",
	"count": 17,
	"data": [{
		"id": 3,
		"name": "测试",
		"pinyin": "2",
		"cid": 1,
		"author": "2",
		"price": 2.0,
		"image": "/uploadImages/20200426090548.jpg",
		"publishing": "2",
		"description": "描述",
		"state": 3,
		"deployTime": 1587781624000,
		"sales": 0
	}, {
		"id": 4,
		"name": "测试",
		"pinyin": "1",
		"cid": 3,
		"author": "3",
		"price": 3.0,
		"image": "/uploadImages/20200426085857.png",
		"publishing": "1",
		"description": "1",
		"state": 0,
		"deployTime": 1587783053000,
		"sales": 0
	}, {
		"id": 5,
		"name": "斗破苍穹",
		"pinyin": "doupocangqiong",
		"cid": 2,
		"author": "天蚕土豆",
		"price": 9.6,
		"image": "/uploadImages/20200426092131.jpg",
		"publishing": "纵横文学",
		"description": "三天跟新一章，一章拆三章",
		"state": 2,
		"deployTime": 1587796008000,
		"sales": 0
	}, {
		"id": 6,
		"name": "爱的种子",
		"pinyin": "aidezhongzi",
		"cid": 1,
		"author": "作者1",
		"price": 12.0,
		"image": "/uploadImages/20200426110858.png",
		"publishing": "出版社1",
		"description": "xxx",
		"state": 2,
		"deployTime": 1587869659000,
		"sales": 0
	}.........................]
}

代码实现

1.思路

我们只需要在后台把查询到的数据转为layui需要的格式就行了，这里我用的是自定义mvc框架配合一些工具类完成的。

前端控件修改后

<script src="${pageContext.request.contextPath }/static/js/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> 
<script>
layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#test'
     ,url:'Layui_01/book.action?methodName=datagrid'
    ,cols: [[
      {field:'id', width:80, title: 'ID', sort: true}
      ,{field:'name', width:80, title: '用户名'}
      ,{field:'pinyin', width:80, title: '拼音', sort: true}
      ,{field:'cid', width:80, title: '副id'}
      ,{field:'author', title: '作者', minWidth: 150}
      ,{field:'image', width:80, title: '路径', sort: true}
      ,{field:'publishing', width:80, title: '出版社', sort: true}
      ,{field:'state', width:80, title: '更新', sort: true}
      ,{field:'deployTime', width:80, title: '时间', sort: true}
      ,{field:'sales', width:80, title: '数量', sort: true}
    ]]
  ,page: true
  });
  
});
</script>

2.BookAction业务处理类

这一步就是把数据库查询到的值转换为需要的数据格式返回到浏览器中进行交互渲染。

package com.liyingdong.web;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.liyingdong.dao.BookDao;
import com.liyingdong.entity.Book;
import com.liyingdong.framework.ActionSupport;
import com.liyingdong.framework.ModelDriver;
import com.liyingdong.util.LayuiResult;
import com.liyingdong.util.PageBean;
import com.liyingdong.util.ResponseUtil;

public class BookAction extends ActionSupport implements ModelDriver<Book> {

	private Book book = new Book();
	private BookDao bookdao = new BookDao();
	@Override
	public Book getModel() {
		return book;
	}
	public String datagrid(HttpServletRequest req,HttpServletResponse resp) {
		PageBean pageBean = new PageBean();
		pageBean.setRequest(req);
		try {
			List<Book> list = this.bookdao.list(book, pageBean);
			ResponseUtil.writeJson(resp,LayuiResult.ok(list, pageBean.getTotal()));
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
	
}

3.LayuiResult类

之前我们用的一般是map来转换，但是现在我们可以自己创建一个工具类出来封装成前端需要返回的json数据格式！

package com.liyingdong.util;

public class LayuiResult<T> {
	private int code=0;
	private String msg="ok";
	private int count;
	private T data;
	public T getData() {
		return data;
	}
	public void setData(T data) {
		this.data = data;
	}
	public int getCode() {
		return code;
	}
	public void setCode(int code) {
		this.code = code;
	}
	public int getCount() {
		return count;
	}
	public void setCount(int count) {
		this.count = count;
	}
	public String getMsg() {
		return msg;
	}
	public void setMsg(String msg) {
		this.msg = msg;
	}
	private LayuiResult() {
		super();
	}
	public LayuiResult(T data, int count) {
		super();
		this.data = data;
		this.count = count;
	}
	public static <T> LayuiResult ok(T data,int count){
		return new LayuiResult<>(data,count);
	}
	
	
}

实现效果

前端

数据库