layui导出EXCEL

最新推荐文章于 2024-06-22 13:55:08 发布

你倒是敲代码啊.

最新推荐文章于 2024-06-22 13:55:08 发布

阅读量1.4k

点赞数 3

分类专栏： web前端文章标签： layui

本文链接：https://blog.csdn.net/qq_43446165/article/details/107324071

版权

web前端专栏收录该内容

12 篇文章 8 订阅

订阅专栏

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" %>
<!DOCTYPE html>
<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;
    }
}

运行结果

在这里插入图片描述

你倒是敲代码啊.

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
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="
复制链接

扫一扫

专栏目录