How to export excel table with layui framework

Foreword:

Due to work needs, I need to use the function of exporting excel tables. The background management uses the layui framework.

(Learning video sharing: Introduction to Programming)

Looking at layui’s official website community forum, many people say that layui’s own export function, Only the data of the current page can be exported. Moreover, part of the data is queried through the association table between data, and the exported data provided by layui will be displayed (Object), which is very troublesome.

So to use the plug-in, it is very simple. Download the file from the URL below.

This is a file that must be used by the plug-in. Pay attention to the path of the imported file.

Here is a URL for everyone to download. There are also tutorials in it: https://github.com/wangerzi/layui-excel

Let me show you the project background: For example, the order number is queried from the associated order table

Directly enter the code:

jsp:

This is an exported operation button:

<button type="button" lay-submit="" class="layui-btn layui-btn-warm" lay-filter="uploadImg">
    <i class="layui-icon"></i>导出Excel</button>


layui.use([&#39;layer&#39;, &#39;form&#39;, &#39;table&#39;, &#39;laydate&#39;,&#39;jquery&#39;], function () {
    var $ = layui.jquery,
        layer = layui.layer,
        form = layui.form,
        laydate = layui.laydate,
        table = layui.table;

 
    // 加载框
    var loading;

    loading = layer.load(1, {shade: [0.3, &#39;#fff&#39;]});

    var tableIns = table.render({
        elem: &#39;#tableList&#39;,
        // cellMinWidth: 100,
        cols: [[
            {field: &#39;sdId&#39;, width: 60, title: &#39;ID&#39;, sort: true}
            , {field: &#39;sdMoney&#39;, width: 87,title: &#39;交易金额&#39;,templet:&#39;#cashDepositTpl&#39;}
            , {field: &#39;sdTime&#39;, minWidth: 87, title: &#39;交易时间&#39;}
            , {field: &#39;sdType&#39;, width: 300,title: &#39;交易类型&#39;, templet: &#39;#sdTypeTpl&#39;}
            , {field: &#39;sdWater&#39;, minWidth: 120, title: &#39;交易流水编号&#39;}
            , {field: &#39;orderFormEntity&#39;, minWidth: 68,title: &#39;订单号&#39;, templet: &#39;#orderFormTpl&#39;}
        ]],
        url:&#39;${WEB_URL}terraceZL/getList&#39;,
        page: true,
        even: false,
        height: &#39;full-90&#39;,
        request: {
            pageName: &#39;page&#39; //页码的参数名称，默认：page
            , limitName: &#39;limit&#39; //每页数据量的参数名，默认：limit
        },
        limit: 50,
        done: function (res, curr, count) {
            layer.close(loading);
        }
    });

   
  

    form.on(&#39;submit(uploadImg)&#39;, function(data){
        loading = layer.load(1, {shade: [0.3, &#39;#fff&#39;]});
        var $ = layui.jquery;
        var excel = layui.excel;
        $.ajax({
            url: &#39;${WEB_URL}sellDeal/getTreeList&#39;,
            dataType: &#39;json&#39;,
            data: {
                datas:JSON.stringify(data.field)
            },
            success: function(res) {
                layer.close(loading);
                layer.msg(res.msg);
                // 假如返回的 res.data 是需要导出的列表数据
                console.log(res.data);//
                // 1. 数组头部新增表头
                res.data.unshift({sdId: &#39;ID&#39;,sdMoney: &#39;交易金额&#39;,sdTime:&#39;交易时间&#39;,type:&#39;交易类型&#39;,sdWater:&#39;交易流水编号&#39;,order:&#39;订单号&#39;});
                // 3. 执行导出函数，系统会弹出弹框
                excel.exportExcel({
                    sheet1: res.data
                }, &#39;平台流水.xlsx&#39;, &#39;xlsx&#39;);
            },
            error:function(res){
                layer.close(loading);
                layer.msg(res.msg);
            }
        });
    });
});

Controller:
@RequestMapping("/getList")
    @ResponseBody
    public Object getList(HttpServletRequest request, Model model) {

        model.addAttribute("WEB_URL", ServiceUrl.WEB_URL);
        model.addAttribute("WEB_NAME", ServiceUrl.WEB_NAME);

        Map<String, Object> paramsMap = JSONObject.parseObject(request.getParameter("datas"), Map.class);
        if (paramsMap == null) {
            paramsMap = new HashMap<String, Object>();
        }

        Map<String, Object> map = new HashMap<String, Object>();

        try {
            List<SellDealEntity> mList = new ArrayList<SellDealEntity>();
            Integer count = sellDealService.getCountZL(paramsMap);

            List<SellDealExcelEntity> list = new ArrayList<>();
            if (count > 0) {
                //查询所有数据
                mList = sellDealService.getListExcel(paramsMap);
                for (SellDealEntity sellDealEntity : mList) {
                    //自定义一个新实体类，定义好要导出来的字段，把遍历出来的数据存放到一个新的list，因为会出现关联表的数据
                    SellDealExcelEntity sellDeal = new SellDealExcelEntity();
                    sellDeal.setSdId(sellDealEntity.getSdId());
                    sellDeal.setShopName(sellDealEntity.getSellEntity().getShopName());
                    sellDeal.setSdTime(sellDealEntity.getSdTime());
                    //时间格式可能不对，备用
//                DateFormat format=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
//                String time = format.format(sellDealEntity.getSdTime());
                    //根据类型 set 对应的值
                    switchType(sellDealEntity,sellDeal);
                    sellDeal.setSdWater(sellDealEntity.getSdWater());
                    //判断如果订单是null，就set " - "
                    if (sellDealEntity.getOrderFormEntity()==null){
                        sellDeal.setOrder("-");
                    }else {
                        sellDeal.setOrder(sellDealEntity.getOrderFormEntity().getOfOrder());
                    }
                    list.add(sellDeal);
                }
            }

            map.put("code", 0);
            map.put("msg", "导出成功");
            map.put("count", count);
            map.put("data", list);
        }catch (Exception e){
            map.put("code", 1);
            map.put("msg", "导出失败，请稍后重试！");
        }


        return JSON.toJSON(map);
    }

    private void switchType(SellDealEntity sellDealEntity,SellDealExcelEntity sellDeal) {
        switch (sellDealEntity.getSdType()) {
            case 0:
                sellDeal.setType("订单收益");
                sellDeal.setSdMoney("+"+sellDealEntity.getSdMoney().toString());
                break;
            case 1:
                sellDeal.setType("售后退款");
                sellDeal.setSdMoney("-"+sellDealEntity.getSdMoney().toString());
                break;
            case 2:
                sellDeal.setType("缴纳保证金");
                sellDeal.setSdMoney("+"+sellDealEntity.getSdMoney().toString());
                break;
            case 3:
                sellDeal.setType("保证金充值");
                sellDeal.setSdMoney("+"+sellDealEntity.getSdMoney().toString());
                break;
            case 4:
                sellDeal.setType("保证金扣除");
                sellDeal.setSdMoney("-"+sellDealEntity.getSdMoney().toString());
                break;
            case 5:
                sellDeal.setType("余额提现");
                sellDeal.setSdMoney("-"+sellDealEntity.getSdMoney().toString());
                break;
            case 6:
                sellDeal.setType("保证金提现");
                sellDeal.setSdMoney("-"+sellDealEntity.getSdMoney().toString());
                break;
            case 7:
                sellDeal.setType("保证金提现手续费");
                sellDeal.setSdMoney("+"+sellDealEntity.getSdMoney().toString());
                break;
            case 8:
                sellDeal.setType("余额提现手续费");
                sellDeal.setSdMoney("+"+sellDealEntity.getSdMoney().toString());
                break;
            case 9:
                sellDeal.setType("订单服务费");
                sellDeal.setSdMoney("+"+sellDealEntity.getSdMoney().toString());
                break;
            default:
                sellDeal.setType("暂无类型");
                sellDeal.setSdMoney("0");
        }
    }

Finally, if you mind, when defining a new entity, it is best to define it as a string type, which is easier to handle.

Related recommendations: layui framework

The above is the detailed content of How to export excel table with layui framework. For more information, please follow other related articles on the PHP Chinese website!