<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>会员管理</title>
<link href="layui/css/layui.css" rel="stylesheet">
<script src="layui/layui.js"></script>
</head>
<body>
<div class="layui-container">
<!-- 添加表单 -->
<form class="layui-form" id="addMember" lay-filter="addMember" action="" style="display: none; padding-right:20px;">
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="name" lay-verify="required" lay-reqtext="姓名不能为空" placeholder="请输入姓名"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">电话</label>
<div class="layui-input-block">
<input type="text" name="phone" lay-verify="required" lay-reqtext="电话不能为空" placeholder="请输入电话"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">注册日期</label>
<div class="layui-input-block">
<input type="text" name="regDate" class="layui-input" id="mydate_add">
</div>
</div>
<!-- 单选按钮 -->
<div class="layui-form-item">
<label class="layui-form-label">会员类型</label>
<div class="layui-input-block">
<input type="radio" name="type" value="vip" title="VIP" checked>
<input type="radio" name="type" value="normal" title="普通">
</div>
</div>
</form>
<!-- 详情表单 -->
<form class="layui-form" id="detailMember" lay-filter="detailMember" action="" style="display: none; padding-right:20px;">
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="name" class="layui-input" disabled>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">电话</label>
<div class="layui-input-block">
<input type="text" name="phone" class="layui-input" disabled>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">注册日期</label>
<div class="layui-input-block">
<input type="text" name="regDate" class="layui-input" id="mydate_detail" disabled>
</div>
</div>
<!-- 单选按钮 -->
<div class="layui-form-item">
<label class="layui-form-label">会员类型</label>
<div class="layui-input-block">
<input type="radio" name="type" value="vip" title="VIP" checked disabled>
<input type="radio" name="type" value="normal" title="普通" disabled>
</div>
</div>
</form>
<!-- 编辑表单 -->
<form class="layui-form" id="editMember" lay-filter="editMember" action="" style="display: none; padding-right:20px;">
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="name" lay-verify="required" lay-reqtext="姓名不能为空" placeholder="请输入姓名"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">电话</label>
<div class="layui-input-block">
<input type="text" name="phone" lay-verify="required" lay-reqtext="电话不能为空" placeholder="请输入电话"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">注册日期</label>
<div class="layui-input-block">
<input type="text" name="regDate" class="layui-input" id="mydate_edit">
</div>
</div>
<!-- 单选按钮 -->
<div class="layui-form-item">
<label class="layui-form-label">会员类型</label>
<div class="layui-input-block">
<input type="radio" name="type" value="vip" title="VIP" checked>
<input type="radio" name="type" value="normal" title="普通">
</div>
</div>
</form>
<div class="layui-row layui-col-space16">
<div class="layui-col-md12">
<button class="layui-btn layui-btn-info" style="margin-top: 20px;" id="btnAdd">
<i class="layui-icon layui-icon-addition"></i>
添加新会员
</button>
<table lay-filter="member_list" class="layui-table" id="mytable"></table>
</div>
</div>
</div>
<script>
layui.use(["table","form","layer","laydate"],function(){
var $ = layui.$;
var table = layui.table;
var form = layui.form;
var layer = layui.layer;
var laydate = layui.laydate;
//加载日期
laydate.render({
elem:"#mydate_add",
value:new Date(),
type:"date",
format:"yyyy-MM-dd"
});
laydate.render({
elem:"#mydate_detail",
value:new Date(),
type:"date",
format:"yyyy-MM-dd"
});
laydate.render({
elem:"#mydate_edit",
value:new Date(),
type:"date",
format:"yyyy-MM-dd"
});
//渲染表格数据
var inst = table.render({
elem:"#mytable",
url:'Member?method=findByPage',//此处需要指定后台数据接口地址
cols:[[
{field: 'id', title: 'ID', sort: true},
{field: 'name', title: '姓名'},
{field: 'phone', title: '电话'},
{field: 'type', title: '会员类型'},
{field: 'regDate', title: '注册时间'},
{field: 'right', title: '操作',toolbar:"#template",align:"center",width:180}
]],
page:{
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
limit:3,
limits:[3,6]
},
request:{
pageName:'currentPage',
limitName: 'pageSize'
},
});
//刷新表格
function refreshTb() {
table.reload("mytable", {
cols: [[
{ field: 'id', title: 'ID', sort: true },
{ field: 'name', title: '姓名' },
{ field: 'phone', title: '电话' },
{ field: 'type', title: '会员类型' },
{ field: 'regDate', title: '注册时间' },
{ field: 'right', title: '操作', toolbar: "#template", align: "center", width: 180 }
]],
page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
limit: 3,
limits: [3, 6]
}
})
}
//添加按钮单击事件
$("#btnAdd").click(function(){
//打开弹出层完成添加操作
$("#addMember")[0].reset();
form.render();
layer.open({
type: 1,
title: ['添加新会员','font-size:18px;font-weight:bold;'],
area:["700px","300px"],
content:$("#addMember"),
btn:["确定","取消"],
closeBtn:0,
scrollbar: true,
btnAlign:"c",
//将普通按钮设置为提交按钮
success:function (layero,index){
layero.addClass('layui-form');
layero.find('.layui-layer-btn0').attr({
'lay-filter':"addbtn",
'lay-submit':''
});
},
//确定按钮提交表单
yes:function(index){
form.on("submit(addbtn)",function (){
//获取表单数据，参数是lay-filter，请求服务器完成添加
var data=form.val("addMember");
$.post("Member?method=add",data,function (obj){
if (obj.code>0){
layer.msg(obj.msg,{icon:1});
}else{
layer.msg(obj.msg,{icon:2});
}
layer.close(index);
refreshTb();
},"json");
})
},
cancle:function(){
layer.close();
}
});
});
//工具条事件
//注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
table.on('tool(member_list)', function (obj) {
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
if (layEvent === 'details') { //查看
//回显会员数据
form.val("detailMember",data);
layer.open({
type: 1,
title: ['会员详情','font-size:18px;font-weight:bold;'],
area:["700px","300px"],
content:$("#detailMember"),
btn:["取消"],
closeBtn:0,
btnAlign:"c",
cancle:function(){
layer.close();
}
});
} else if (layEvent === 'del') { //删除
layer.confirm('确定要删除吗', function (index) {
//向服务端发送删除指令
$.get("Member?method=delete&id="+data.id,function (obj){
if (obj.code>0){
layer.msg(obj.msg,{icon:1});
}else{
layer.msg(obj.msg,{icon:2});
}
refreshTb();
},"json")
});
} else if (layEvent === 'edit') { //编辑
//回显示数据
form.val("editMember",data);
layer.open({
type: 1,
title: ['修改会员信息', 'font-size:18px;font-weight:bold;'],
area: ["700px", "300px"],
content: $("#editMember"),
btn: ["确定", "取消"],
closeBtn: 0,
scrollbar: true,
btnAlign: "c",
//将普通按钮设置为提交按钮
success:function (layero,index){
layero.addClass('layui-form');
layero.find('.layui-layer-btn0').attr({
'lay-filter':"editbtn",
'lay-submit':''
});
},
yes: function (index) {
form.on("submit(editbtn)",function (){
//获取表单数据，参数是lay-filter，请求服务器完成修改
let update= form.val("editMember");
update.id=data.id;
console.log(update);
$.post("Member?method=update",update,function (obj){
if (obj.code>0){
layer.msg(obj.msg,{icon:1});
}else{
layer.msg(obj.msg,{icon:2});
}
layer.close(index);
refreshTb();
},"json")
});
},
cancle: function () {
layer.close();
}
});
}
});
})
</script>
<script type="text/html" id="template">
<button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
<button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
<button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="details">详情>></button>
</script>
</body>
</html>
文章来源地址https://www.toymoban.com/news/detail-619978.html
文章来源：https://www.toymoban.com/news/detail-619978.html
到了这里，关于Layui网页模板的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
