Layui网页模板

<!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>

Layui网页模板

相关文章

JAVA IO 的 Windows、Linux文件路径差异

ComPDFKit 转档SDK OCR表格识别功能

css 四角边框移动效果

誉天程序员-SpringMVC回顾：五种接参方式

从互联网到云时代，Apache RocketMQ 是如何演进的？

用python需要下载软件吗,python需要安装哪些软件

Windows 实例如何开放端口

React的UmiJS搭建的项目集成海康威视h5player播放插件H5视频播放器开发包 V2.1.2

使用 docker-compose 一键部署多个 redis 实例

简单的python有趣小程序,有趣的代码大全python

网络防御技术：防火墙与入侵检测系统

安装 mysql8.0-docker版安装

Hadoop学习日记-YARN组件

ICML 2023 | 拓展机器学习的边界

HarmonyOS/OpenHarmony元服务开发-配置卡片的配置文件

CentOS 7安装Docker

赛车游戏——【极品飞车】（内含源码inscode在线运行）

【Lua学习笔记】Lua进阶——Table（3）元表

掌握三个基础平面构成法则优漫动游

时间复杂度为O(n2)的三种简单排序算法