至尊技术网 - Layui https://www.zzwws.cn/tag/Layui/ zh-CN Fri, 23 Jul 2021 11:05:00 +0800 Fri, 23 Jul 2021 11:05:00 +0800 layui导出表格全部数据 https://www.zzwws.cn/archives/5395/ https://www.zzwws.cn/archives/5395/ Fri, 23 Jul 2021 11:05:00 +0800 悠悠楠杉 layui自带的导出表格，只能导出当前页面，如果当前页包含全部数据，那不就是导出全部数据了吗，所以我给导出事件单独定义了一个请求，当触发这个请求时，在后台查询数据时不要按接收的page 和 limit查询，而是查询全部，这样就实现了导出全部数据。

<!--导出表 不展示-->
<div style="display: none;">
    <table id="data_export">
    </table>
</div>

<!-- 工具栏 -->
<script type="text/html" id="toolbarDemo">
    <button class="layui-btn" lay-event="export">导出</button>
</script>

<script>
    layui.use(['table', 'layer'], function() {
        var table = layui.table,
            layer = layui.layer；
        
        // 监听工具栏事件
        table.on('toolbar(order-list)',function(obj){
            if(obj.event == 'export'){
                //导出表格
                var ins1 = table.render({
                    elem: '#data_export',
                    url: '{:url("order/orderlist")}', //数据接口
                    method: 'post',
                    title: 'orderlist',
                    where: {
                        status: $("input[name='status']").val()
                       ,start: $("input[name='start']").val()
                       ,end: $("input[name='end']").val()
                       ,order_number: $("input[name='order_number']").val()
                    },
                    limit: obj.config.page.count,
                    cols: [[
                        {type:'checkbox'}
                      ,{field:'id',title:'ID',width:60,sort:true}
                      ,{field:'order_number',title:'订单编号',sort: true,templet:function(d){
                        return d.order_number+"\t";
                      }}
                      ,{field:'commodity',title:'商品',sort:true}
                      ,{field:'consignee',title:'收货人',width:80,sort:true}
                      ,{field:'address',title:'收货地址',sort:true}
                      ,{field:'phone',title:'手机号',sort:true,templet:function(d){
                        return d.phone+"\t";
                      }}
                    ]],
                    done: function (res, curr, count) {
                        exportData=res.data;
                        table.exportFile(ins1.config.id,exportData, 'xls');
                    }
                });
            }
        })
    })
</script>
]]> 0 https://www.zzwws.cn/archives/5395/#comments https://www.zzwws.cn/feed/tag/Layui/ Layui导出长数字变科学计数解决方法 https://www.zzwws.cn/archives/5037/ https://www.zzwws.cn/archives/5037/ Wed, 24 Mar 2021 14:10:50 +0800 悠悠楠杉 在导出时遇到导出后的数据变科学计数，导致数据不准确，在field中返回数据时，使用templet进行处理下即可！

table.render({
                elem: '',
                url: '',
                method: 'post',
                cols: [[
                    {type:'checkbox'}
                  ,{field:'id',title:'ID',width:80,sort:true}
                  ,{field:'order_number',title:'订单编号',sort: true,templet:function(d){
                    return d.order_number+"\t";
                  }}
                ]]
            })
]]> 0 https://www.zzwws.cn/archives/5037/#comments https://www.zzwws.cn/feed/tag/Layui/ Layui 多图片上传 https://www.zzwws.cn/archives/4982/ https://www.zzwws.cn/archives/4982/ Wed, 23 Dec 2020 17:52:00 +0800 悠悠楠杉 1.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>多图片上传</title>
    <link rel="stylesheet" href="layui/dist/css/layui.css">
    <style>
        .layui-upload-img{width: 92px; height: 92px; margin: 0 10px 10px 0;}
</style>
</head>

<body>
    <form action="2.php" method="post" enctype="multipart/form-data">
        <div class="layui-upload">
        <button type="button" class="layui-btn" id="test2">多图片上传</button>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            预览图：
            <div class="layui-upload-list" id="emo2"></div>
        </blockquote>
        </div>
        <button type="button" id="file-btn">上传</button>
        <button type="submit" id="submit">提交</button>
    </form>
        <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
        <script src="layui/dist/layui.js"></script>
        <!--<script>
            //自动上传
            layui.use('upload', function() {
                var $ = layui.jquery,
                    upload = layui.upload;
                upload.render({
                    elem: '#test2',
                    url: '1.php', //改成您自己的上传接口
                    multiple: true,
                    before: function(obj) {
                        //预读本地文件示例，不支持ie8
                        obj.preview(function(index, file, result) {
                            files = obj.pushFile();
                            $(".layui-upload-list").append('<img src="' + result + '" id="remove_' + index + '" title="双击删除该图片" style="width:200px;height:auto;">')
                            $('#remove_' + index).bind('dblclick', function() { //双击删除指定预上传图片
                                delete files[index]; //删除指定图片
                                $(this).remove();
                            })

                            // console.log(1, index); //得到文件索引
                            // console.log(2, file.name); //得到文件对象
                            // console.log(3, result); //得到文件base64编码，比如图片

                            // $('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                        });
                    },
                    done: function(res) {
                        //上传完毕
                        console.log(res);
                    }
                });
            })
        </script>-->
        <script>
            //非自动上传，需要点上传按钮后才会上传
            layui.use('upload', function() {
                var $ = layui.jquery,
                    upload = layui.upload;
                upload.render({
                    elem: '#test2',
                    url: '1.php',
                    auto: false //选择文件后不自动上传
                        ,
                    bindAction: '#file-btn' //指向一个按钮触发上传
                        ,
                    choose: function(obj) {
                        //将每次选择的文件追加到文件队列
                        var files = obj.pushFile();

                        //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                        obj.preview(function(index, file, result) {
                            $(".layui-upload-list").append('<img src="' + result + '" id="remove_' + index + '" title="双击删除该图片" style="width:200px;height:auto;">')
                            $('#remove_' + index).bind('dblclick', function() { //双击删除指定预上传图片
                                delete files[index]; //删除指定图片
                                $(this).remove();
                            })

                            // console.log(index); //得到文件索引
                            // console.log(file); //得到文件对象
                            // console.log(result); //得到文件base64编码，比如图片

                            //obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增

                            //这里还可以做一些 append 文件列表 DOM 的操作

                            //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
                            //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
                        });
                    },
                    done: function(res) {
                        //上传完毕
                        console.log(res);
                    }
                });
            })
        </script>
</body>

</html>

1.php

<?php
header("Access-Control-Allow-Origin: *"); //解决跨域

//生成随机字符串
function randStr($num = 6)
{
    $str = str_shuffle('abcedfghjkmnpqrstuvwxyzABCEDFGHJKMNPQRSTUVWXYZ0123456789');
    return substr($str, 0, $num);
}

//获取文件后缀
function getExt($filename)
{
    return strrchr($filename, '.');
}

$date = date('Y/m/d'); //获取年月日
define('BASE_PATH', str_replace('\\', '/', realpath(dirname(__FILE__) . '/'))/);
$dir = "/upload/" . $date . "/"; //判断是否有对应的文件
$file = '/' . $dir . time() . randStr() . getExt($_FILES["file"]["name"]); //上传文件的名字
$arr = array(
    'code' => 0, //返回状态
    'msg' => '' //提示消息
);

$dir = BASE_PATH . $dir;
$file = BASE_PATH . $file;

$file_info = $_FILES['file']; //前端传过来的文件
$file_error = $file_info['error'];

if (!is_dir($dir)) { //判断目录是否存在
    mkdir($dir, 0777, true); //如果目录不存在则创建目录
}

//判断文件中是否有相同的文件
if (!file_exists($file)) {
    if ($file_error == 0) {
        if (move_uploaded_file($file_info["tmp_name"], $file)) {
            $arr = [
                'code' => 1,
                'msg' => '上传成功',
                'data' => [
                    'url' => $file
                ]
            ];
        } else {
            $arr['msg'] = "上传失败";
        }
    } else {
        switch ($file_error) {
            case 1:
                $arr['msg'] = '上传文件超过了PHP配置文件中upload_max_filesize选项的值';
                break;
            case 2:
                $arr['msg'] = '超过了表单max_file_size限制的大小';
                break;
            case 3:
                $arr['msg'] = '文件部分被上传';
                break;
            case 4:
                $arr['msg'] = '没有选择上传文件';
                break;
            case 6:
                $arr['msg'] = '没有找到临时文件';
                break;
            case 7:
            case 8:
                $arr['msg'] = '系统错误';
                break;
        }
    }
} else {
    $arr['msg'] = "当前目录中，文件" . $file . "已存在";
}
echo json_encode($arr); //将遍历好的数组反给前端
]]> 0 https://www.zzwws.cn/archives/4982/#comments https://www.zzwws.cn/feed/tag/Layui/ Layui - 经典模块化前端 UI 框架 https://www.zzwws.cn/archives/4981/ https://www.zzwws.cn/archives/4981/ Wed, 23 Dec 2020 11:57:00 +0800 悠悠楠杉

官网：https://www.layuion.com/
下载地址：https://zhizun.lanzoux.com/iflQOjml17a

]]> 0 https://www.zzwws.cn/archives/4981/#comments https://www.zzwws.cn/feed/tag/Layui/