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

文章目录

准备工作
- 1.下载
- 2.引入样式和js
- 3.引入控件
- 4.数据格式
代码实现
- 1.思路
- 2.BookAction业务处理类
- 3.LayuiResult类
实现效果

准备工作

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框架必须要去遵循它的数据格式。

code:结果码
msg:消息
count:总记录数
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();@Overridepublic 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);}}

实现效果

前端

数据库

layui数据表格与后台交互进行渲染相关推荐

layui 读取本地excel内容_layui之数据表格--与后台交互获取数据的方法
jsp或html js //用户列表 var tableIns = table.render({ elem: '#userList', url : 'userAction_findAll.action ...
Layui数据表格(table)前后台交互
layui有自己的一套特定的数据格式交互,必须参数code:0,msg:"",count:数据size(int),data:"数据List" <link ...
php分页显示数据表格显示,php+layui数据表格实现数据分页渲染代码
一.html 二.js 说明:需要引入layui中的table和laytpl模板引擎,laytpl可以自定义事件及自定义数据字段等查看详情 {{# if (d.hotcake === '超级爆款') ...
layui数据表格解析html,layui框架table 数据表格的方法级渲染详解
layui框架table 数据表格的方法级渲染详解如下所示: //js 规范书写 var tst=table.render({ elem: '#test11' ,cols: [[ //标题栏 {ch ...
Layui 数据表格多条件查询与后端交互
这里记录下layui数据表格多个查询条件数据提交查询,数据库返回对应数据,数据库使用第三方模块flask_sqlalchemy, 需要对flask及flask_sqlalchemy有一定的了解一.h ...
在layui中使用ajax传值给后台,浅谈layui 数据表格前后台传值的问题
1.1查询 layui.use('table', function() { var table = layui.table; table.render({ elem : '#demo', url : ...
layui数据表格（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）
表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...
layui 数据表格下拉框_LayUi数据表格中嵌套下拉框
layui嵌套下拉框实用方法(附效果图) 在做项目时遇到一个问题,在layui 的数据表格table里面如何做一个下拉框呢?效果图如下: 这样的效果想必是最理想的了思路分析: 我们可以通过layui ...
layui静态表格设置滚动条_解决layui数据表格table的横向滚动条显示问题
解决layui数据表格table的横向滚动条显示问题加上这段样式代码就可以解决了: body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ ps:这个问题fly社区 ...