<!--css-->
<style>
* {
-webkit-overflow-scrolling: touch;
}
.wx_add_widthBox {
width: 150px;
margin-left: 4px;
display: inline-block;
}
@media screen and (max-width: 1750px) {
.wx_add_widthBox {
width: 130px;
}
}
@media screen and (max-width: 1580px) {
.wx_add_widthBox {
width: 110px;
}
}
/*000*/
@media screen and (max-width: 1200px) {
.wx_add_widthBox {
width: 100%;
}
.wx_seach {
margin-left: 0.3em;
}
}
@media screen and (max-width: 1000px) and (min-width: 300px) {
.addleft {
margin-left: 0.3rem;
}
.searchBtn {
margin-left: 0.3rem;
padding: 0;
width: 1rem;
height: 0.5rem;
line-height: 0.5rem;
margin-top: 0.1rem;
border-radius: 1rem;
}
.layui-table-cell {
min-width: 3rem;
padding: 0 5px;
height: auto;
overflow: visible;
text-overflow: inherit;
white-space: normal;
word-break: break-all;
}
.layui-table-cell,
.layui-table-tool-panel li {
white-space: pre-wrap;
}
.layui-btn-container .layui-btn {
margin-left: 0.1rem;
margin-bottom: 0;
}
.layui-table-view {
height: 11rem;
}
.layui-table-page {
height: 1.1rem;
overflow: auto;
padding: 0.3rem 0 0;
}
.wx_add_widthBox {
margin-left: 0.1rem;
}
}
.allDel {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(.5, .5, .5, .5);
display: none;
}
.allDel .promo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
border-radius: 6px;
overflow: hidden;
}
.allDel .promo h3 {
background: #c80000;
text-align: center;
font-size: 20px;
font-weight: bold;
color: white;
padding: 5px 0;
letter-spacing: 2px;
position: relative;
}
.allDel .promo h3 i {
font-size: 15px;
/*float: right;*/
position: absolute;
top: 50%;
right: 2%;
transform: translateY(-50%);
cursor: pointer;
}
.allDel .promo .fww {
padding: 30px;
}
.allDel .promo .fww .layui-form-item label {
font-size: 18px;
}
.allDel .promo .fww .layui-form-item textarea {
width: 100%;
height: 200px;
margin-top: 10px;
font-size: 16px;
}
.allDel .promo .fww .layui-input-block {
margin-left: 0;
width: 420px;
}
.allDel .promo .fww .btn button {
width: 100%;
border: none;
text-decoration: none;
outline: none;
background: #c80000;
font-size: 22px;
font-weight: bold;
text-align: center;
height: 40px;
line-height: 40px;
color: white;
border-radius: 5px;
cursor: pointer;
}
.allDel .promo .fww p {
font-size: 18px;
color: red;
text-align: center;
margin-top: 10px;
}
.demoTable {
margin: 20px 0 5px 0;
}
.layui-btn-container {
margin: 10px 0 0 4px;
}
.layui-form-select dl {
max-height: 157px;
}
.excle{
border-collapse: collapse;
}
.excle th{
width: 120px;
background-color: #f2f2f2;
height: 36px;
text-align: center;
font-size: 12px;
}
.excle tbody tr{
border-top: #f2f2f2 solid 1px;
}
.excle td{
width: 90px;
height: 36px;
text-align: center;
font-size: 12px;
}
.content {
width: 250px;
}
</style>
<!--HTML-->
<div class="z wx_content">
<!--第一行内容-->
<div class="demoTable">
<div class="layui-inline">
<form class="layui-form">
<!--校区选择-PHP渲染-->
<div class="layui-input-block wx_add_widthBox">
<select name="school" lay-filter="aihao">
<option value="all">校区选择</option>
{volist name='$school' id='v'}
<option value="{$v.id}">{$v.title}</option>
{/volist}
</select>
</div>
</form>
</div>
<div class="layui-inline wx_add_widthBox content">
<input class="layui-input" name="title" id="demoReload" autocomplete="off" placeholder="输入客户姓名|客户电话|邀约人|邀约电话">
</div>
<div class="layui-inline wx_add_widthBox">
<input type="text" name="starttime" id="date1" lay-verify="date" placeholder="开始时间" autocomplete="off" class="layui-input" lay-key="1">
</div>
<div class="layui-inline wx_add_widthBox">
<input type="text" name="endtime" id="date2" lay-verify="date" placeholder="结束时间" autocomplete="off" class="layui-input" lay-key="2">
</div>
<button class="layui-btn wx_seach addleft searchBtn" id="reload" data-type="reload">搜索</button>
</div>
<!--表格-->
<table id="demo" lay-filter="test"></table>
</div>
<!--引入jquery-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!--引入layui-->
{include file="system@block/layui" /}
<!--头工具栏内容-->
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchdel" data-type="getCheckData"><i class="layui-icon layui-icon-delete" style="font-size:20px;"></i> 批量删除</button>
<button class="layui-btn layui-btn-sm downExcel"><a href="https://swt-app.oss-cn-chengdu.aliyuncs.com/excle/daofang.xlsx" target="_blank" style="color: #fff">下载模板</a></button>
<button type="button" class="layui-btn layui-btn-sm layui-btn" id="test1">
<i class="layui-icon"></i>导入表格
</button>
</div>
</script>
<!--操作里的内容-->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
let table, test, arr = []
layui.use(['form', 'laydate'], function() {
var laydate = layui.laydate;
var form = layui.form
laydate.render({
elem: '#date1' // 对应开始时间的id
});
laydate.render({
elem: '#date2' // 对应结束时间的id
});
form.on("select", function(data) {
if (data.elem.name == 'school') { // 对应前面校区选择-select-name
console.log(data)
}
});
})
layui.use('table',function() {
table = layui.table;
table.render({
elem: '#demo', // 对应前面table的id
id: 'testReload',
limit:20, // 每页显示的条数(默认:10)
page:true, // 开启分页
toolbar:"#toolbarDemo",
url: "{:url('')}", // 数据接口
cols: [[ //表头
{
type: 'checkbox' // 复选框列
}, {
field: 'id',
title: 'ID',
align: 'center',
}, {
field: 'schoolname',
title: '校区',
align: 'center',
}, {
field: 'create_time',
title: '时间',
align: 'center',
// layui-时间戳转换成日期
// templet: function (d) {
// return util.toDateString(d.time * 1000, "yyyy-MM-dd")
// }
}, {
field: 'name',
title: '客户姓名',
align: 'center',
}, {
field: 'children',
title: '学员名称',
align: 'center',
}, {
field: 'phone',
title: '客户电话',
align: 'center',
}, {
field: 'type',
title: '邀约类型',
align: 'center',
}, {
field: 'real_name',
title: '邀约人',
align: 'center',
}, {
field: 'code',
title: '邀约人编号',
align: 'center',
}, {
field: 'admin',
title: '导入人',
align: 'center',
}, {
field: 'input_time',
title: '导入时间',
align: 'center',
}, {
field: 'active',
title: '操作',
align: 'center',
templet: '#barDemo',
}
]],
})
// 全选复选框:获取选中的信息
table.on('checkbox(test)', function() { // test是table对应的lay-filter
arr = table.checkStatus('testReload').data
});
// 头工具栏事件
// 批量删除
table.on('toolbar(test)', function(obj){ //注:toolbar 是头工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'batchdel':
checkData = checkStatus.data;
delList=[];
for (var i = 0; i < checkData.length; i++) {
delList.push(checkData[i].id);
}
if(delList == ''){
layer.alert('请选择删除项');return;
}
layer.confirm('确定批量删除吗?', function(index){
layer.close(index);
$.ajax({
type:'post',
dataType:'json',
url:"{:url('getAarrivevisitDel')}",
data:{id:delList.join(',')}, // delList.join(',') 表示将delList这个数组转换成字符串,中间以逗号分隔
success:function (res) {
if (res.sta === 2000) {
layer.msg(res.msg,{icon:1})
} else {
layer.msg(res.msg,{icon:2});
}
}
});
});
break;
}
});
//工具条事件
// 删除
table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
var tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)
if(layEvent === 'del'){ //删除
layer.confirm('真的删除行么', function(index){
$.ajax ({
type: 'post'
,url: "{:url('getAarrivevisitDel')}"
,data: {id:data.id}
,success:function (res) {
var res = JSON.parse(res);
if(res.sta === 2000) {
layer.msg(res.msg,{icon:1},function() {
// 向服务端发送删除指令
$(tr).remove();
}); // 弹出框
// obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
} else {
layer.msg(res.msg,{icon:2});
}
}
,error:function (err) {
layer.msg('网络超时');
}
})
});
}
});
// 导入表格【注意该段代码所放的位置,不然会没有效果哟】
function importTable() {
layui.use('upload', function(){
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#test1' //绑定元素
,url: "{:url('ImportExcel')}" //上传接口
,accept:'file'
,auto:false
,acceptMime:'xlsx/*'
,choose:function (obj) {
obj.preview(function(index, file, result){
if (file.name.substring(file.name.length-4) != 'xlsx' && file.name.substring(file.name.length-3) != 'xls'){
layer.msg('请选择正确的xls或xlsx文件格式')
}else{
obj.upload(index, file)
}
});
}
,done: function(res){
if(res) {
if(res.sta === 2000 && res.data.length !== 0){
let str =''
let s = '<table class="excle"><thead><tr><th>校区</th><th>时间</th><th>客户姓名</th><th>学员名称</th><th>客户电话</th><th>邀约类型</th><th>邀约人</th><th>邀约人编号</th></tr></thead><tbody>'
let e = '</tbody></table>'
res.data.forEach(function(value){
str += `<tr><td>${value.school}</td><td>${value.time}</td><td>${value.name}</td><td>${value.children}</td><td>${value.phone}</td><td>${value.type}</td><td>${value.real_name}</td><td>${value.code}</td></tr>`
})
let tb = s + str + e
//页面层
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['960px', '300px'], //宽高
content: tb
});
} else {
layer.msg(res.msg)
}
} else {
layer.msg('表格异常,请重新加载');
}
}
,error: function(res){
//请求异常回调
layer.msg('表格异常,请重新加载');
}
});
});
}
importTable();
})
// 搜索重载1
let $ = layui.$,
active = {
reload: function(obj) {
//执行重载
table.reload('testReload', {
page: {
curr: 1 //重新从第 1 页开始
},
where: obj
}, 'data');
}
}
// 搜索重载2
$('#reload').on('click', function() { // reload对应上面搜索的id
var school_id = $('select[name=school]').val(); // 校区选择
var title = $('input[name=title]').val() // 输入姓名|电话|考核标题
var starttime = $('input[name=starttime]').val() // 开始时间
var endtime = $('input[name=endtime]').val() // 结束时间
let obj = {
school_id,title,starttime,endtime
}
active.reload(obj)
});
</script>
2021-4-14 工作记录--LayUI-全代码(批量删除+下载模板+导入表格+删除 等)
于 2021-04-14 17:23:01 首次发布