至尊技术网 - Layui
https://www.zzwws.cn/tag/Layui/
-
layui导出表格全部数据
https://www.zzwws.cn/archives/5395/
2021-07-23T11:05:00+08:00
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>
-
Layui导出长数字变科学计数解决方法
https://www.zzwws.cn/archives/5037/
2021-03-24T14:10:50+08:00
在导出时遇到导出后的数据变科学计数，导致数据不准确，在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";
}}
]]
})
-
Layui 多图片上传
https://www.zzwws.cn/archives/4982/
2020-12-23T17:52:00+08:00
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); //将遍历好的数组反给前端
-
Layui - 经典模块化前端 UI 框架
https://www.zzwws.cn/archives/4981/
2020-12-23T11:57:00+08:00
官网：https://www.layuion.com/下载地址：https://zhizun.lanzoux.com/iflQOjml17a