layui导出EXCEL
layui的table框架
<%--
Created by IntelliJ IDEA.
User: JiadeChen
Date: 2020/7/12/0012
Time: 15:06
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
<meta charset="utf-8">
<title>table模块快速使用title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">
head>
<body>
<table id="demo" lay-filter="test">table>
<script src="${pageContext.request.contextPath}/layui/layui.js">script>
<script>
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
,height: 312
,url: 'demo/table/user' //数据接口
,toolbar: true
,title: "用户数据表"
,totalRow: true
,page: true //开启分页
,parseData: function (res) {
return {
"code":0,
"msg":"",
"count":2,
"data": res
}
}
,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>
body>
html>
- 一定要注意url的格式，如果不正确在请求时浏览器控制台会显示404错误。
- 其中toolbar、title、totalRow开启才会显示导出Excel。
实体类
package com.decisionanalysis.domain;
/**
* @author ChenJiaDe
*/
public class Person {
private Integer id;
private String username;
private String sex;
private String city;
private String sign;
private Integer experience;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getCity() {
return city;
}
public void setCity(String city) {
this.city = city;
}
public String getSign() {
return sign;
}
public void setSign(String sign) {
this.sign = sign;
}
public Integer getExperience() {
return experience;
}
public void setExperience(Integer experience) {
this.experience = experience;
}
public Integer getScore() {
return score;
}
public void setScore(Integer score) {
this.score = score;
}
public String getClassify() {
return classify;
}
public void setClassify(String classify) {
this.classify = classify;
}
public Integer getWealth() {
return wealth;
}
public void setWealth(Integer wealth) {
this.wealth = wealth;
}
private Integer score;
private String classify;
private Integer wealth;
}
SpringMVC整合JSON
- springmvc整合JSON其实很简单，只要在maven项目当中添加用到的JSON相关的坐标，并且在返回值当中写明
@ResponseBody注解，就会自动的将map或者是list类型转化为JSON。 - 其实不管是map还是list类型都能转化为JSON，但是只有list类型转化成的JSON才符合layui能解析的JSON数据格式。
package com.decisionanalysis.controller;
import com.decisionanalysis.domain.Person;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* @author ChenJiaDe
*/
@Controller
@RequestMapping(value = {"/demo/table"})
public class ExcelController {
@RequestMapping(value = {"/user"})
public @ResponseBody List<Person> getUser() {
List<Person> list = new ArrayList<>();
Person personOne = new Person();
personOne.setId(10000);
personOne.setUsername("user-01");
personOne.setSex("男");
personOne.setCity("山东");
personOne.setSign("正道的光");
personOne.setExperience(800);
personOne.setScore(70);
personOne.setClassify("程序员");
personOne.setWealth(346789789);
Person personTwo = new Person();
personTwo.setId(10000);
personTwo.setUsername("user-02");
personTwo.setSex("女");
personTwo.setCity("北京");
personTwo.setSign("正道的光");
personTwo.setExperience(900);
personTwo.setScore(85);
personTwo.setClassify("程序员");
personTwo.setWealth(789789);
list.add(personOne);
list.add(personTwo);
return list;
}
}
运行结果
