弹出层layer

因为layui的特性，每次不管使用哪个组件，都要先把它的模块加载出来
比如我要用layer和form
那么就需要先这样定义,你的操作都是在这个里面进行，当然页可以一次性加载所有模块，详情去看api文档https://www.layui.com/doc/

layui.use(['layer','form'], function(){})

先看一下我们在一个点击事件下定义一个弹出层吧，

	  $("#add").click(function(){layer.open({type: 1, title:"新增",area:['50%','50%'],btn: ['确定', '取消'], content: $("#window"),yes:function(index,layero){}}); })

我们用到的比较重要的几个参数
type:layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）,你用哪种，那么你想对应的内容的路径也要符合那种的格式，比如如果你用页面层你就不能用id去取你的弹出层，而必须定义一个页面

content也就是我们弹出层的内容路径了，根据你弹出层的类型来获取

area宽高：不定义虽然它默认是auto自动适应，但是可能不一定符合自己的样式

btn按钮：信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。定义的第一个按钮回调的是yes函数，后面定义的都是调用的no
我们要利用弹出层来实现增加和修改的页面，我在这里说一下比较重要的几个参数

form表单

给表单绑定修改要回显的值
表单初始赋值：form.val(‘lay-filter的值’, object);

table.on('tool(test)', function(obj){
var data = obj.data; layer.open({type: 1 ,title: ['修改信息'],btn: ['确定', '取消'] ,shadeClose: true,shade: 0 ,maxmin: true ,content:$("#window")  ,success:function(layero,index){$('#bid').val(data.bid);$('#bname').val(data.bname); $('#price').val(data.price);  }});});

利用$.getJSON来把值传递到后台
$.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )

url是必选参数，表示json数据的地址；
data是可选参数，用于请求数据时发送数据参数；
success是可参数，这是一个回调函数，用于处理请求到的数据。

表单的事件监听：
form.on(‘event(过滤器值)’, callback);
例如提交事件：form.on(‘submit(*)’{ )}
下拉事件：form.on(‘select(filter)’, function(data){ } )}

增删改查所有代码

图方便，没有把js和jsp分开了

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui/css/layui.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script type="text/javascript">//下拉列表layui.use('element', function(){var element = layui.element;  });
//数据表格
layui.use(['table','layer','form'], function(){var table = layui.table;var layer=layui.layer;var form=layui.form;var $=layui.$;var url=$("#ctx").val();table.render({elem: '#demo',url:'${pageContext.request.contextPath}/BookAction.action?methodName=list',method:'post',page:true,cols: [[{type:'checkbox',fixed:'left'},{field:'bid', title: 'ID'},{field:'bname', title: '书名'},{field:'price', title: '价格'},{field:'right', title: '操作', width:250,toolbar:"#barDemo"}]]});$("#add").click(function(){layer.open({type: 1, title:"新增",area:['50%','50%'],btn: ['确定', '取消'], content: $("#window"),yes:function(index,layero){$.getJSON(url+'/BookAction.action?methodName=addBook',{bid: $('#bid').val(),bname: $('#bname').val(),price: $('#price').val()},function(data){//根据后台返回的参数，来进行判断if(data>0){layer.alert('增加成功',{icon:1,title:'提示'},function(i){layer.close(i);layer.close(index);//关闭弹出层$("#book")[0].reset()//重置form})table.reload('demo',{//重载表格page:{curr:1}})}});}}); })//获取按钮table.on('tool(test)', function(obj){var data = obj.data; //获得当前行数据var tr=obj.tr//活动当前行tr 的  DOM对象if(obj.event === 'del'){ //删除layer.confirm('确定删除吗？',{title:'删除'}, function(index){//向服务端发送删除指令og$.getJSON(url+'/BookAction.action?methodName=del',{bid:data.bid}, function(ret){layer.close(index);//关闭弹窗table.reload('demo', {//重载表格page: {curr: 1// 重新从第 1 页开始}})});layer.close(index);});} else if(obj.event === 'edit'){ //编辑layer.open({type: 1 //Page层类型,skin: 'layui-layer-molv',area: ['380px', '270px'],title: ['编辑书本信息','font-size:18px'],btn: ['确定', '取消'] ,shadeClose: true,shade: 0 //遮罩透明度,maxmin: true //允许全屏最小化,content:$("#window")  //弹窗路径,success:function(layero,index){$('#bid').val(data.bid);$('#bname').val(data.bname); $('#price').val(data.price);  },yes:function(index,layero){$.getJSON(url+'/BookAction.action?methodName=edit',{bid: data.bid,bid: $('#bid').val(),bname: $('#bname').val(),price: $('#price').val()},function(data){//根据后台返回的参数，来进行判断if(data>0){layer.alert('编辑成功',{icon:1,title:'提示'},function(i){layer.close(i);layer.close(index);//关闭弹出层$("#book")[0].reset()//重置form})table.reload('demo',{//重载表格page:{curr:1}})}});}});}});  })</script><title>layui</title>
</head><body class="layui-layout-body"><div class="site-text" style="margin: 5%; display: none" id="window"  target="test123">	<form class="layui-form" id="book" method="post" lay-filter="example"><div class="layui-form-item"><label class="layui-form-label">书本编号</label><div class="layui-input-block"><input type="text" id="bid" name="bid" lay-verify="title" autocomplete="off" placeholder="请输入编号" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">书本名称</label><div class="layui-input-block"><input type="text" id="bname" name="bname" lay-verify="title" autocomplete="off" placeholder="请输入名称" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">书本价格</label><div class="layui-input-block"><input type="text" id="price" name="price" lay-verify="title" autocomplete="off" placeholder="请输入价格" class="layui-input"></div></div><!--  <div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button></div></div> --></form>
</div><input type="hidden" id="ctx" value="${pageContext.request.contextPath }" />
<div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo">阳某的后台</div><!-- 头部区域（可配合layui已有的水平导航） --><ul class="layui-nav layui-layout-left"><li class="layui-nav-item"><a href="">控制台</a></li><li class="layui-nav-item"><a href="">商品管理</a></li><li class="layui-nav-item"><a href="">用户</a></li><li class="layui-nav-item"><a href="javascript:;">其它系统</a><dl class="layui-nav-child"><dd><a href="">邮件管理</a></dd><dd><a href="">消息管理</a></dd><dd><a href="">授权管理</a></dd></dl></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item"><a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img">阳某</a><dl class="layui-nav-child"><dd><a href="">基本资料</a></dd><dd><a href="">安全设置</a></dd></dl></li><li class="layui-nav-item"><a href="">退了</a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree"  lay-filter="test"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">所有商品</a><dl class="layui-nav-child"><dd><a href="javascript:;">列表一</a></dd><dd><a href="javascript:;">列表二</a></dd><dd><a href="javascript:;">列表三</a></dd><dd><a href="">超链接</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">解决方案</a><dl class="layui-nav-child"><dd><a href="javascript:;">列表一</a></dd><dd><a href="javascript:;">列表二</a></dd><dd><a href="">超链接</a></dd></dl></li><li class="layui-nav-item"><a href="">云市场</a></li><li class="layui-nav-item"><a href="">发布商品</a></li></ul></div></div><div class="layui-body"><!-- 内容主体区域 --><div style="padding: 15px;"><div class="layui-inline">书名：<div class="layui-inline"><input class="layui-input" name="s_title" autocomplete="off" /></div><button class="layui-btn" lay-submit="" lay-filter="reload">搜索</button><button id="add" class="layui-btn" lay-submit="" lay-filter="pageSubmit">新增</button></div><table id="demo" lay-filter="test"></table><script type="text/html" id="barDemo"><a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a></script></div></div><div class="layui-footer"><!-- 底部固定区域 -->© layui.com - 底部固定区域</div>
</div>
</body>
</html>

Dao方法，这里用的是mvc框架

package com.xy.dao;import java.sql.SQLException;
import java.util.List;
import java.util.Map;import com.xy.util.JsonBaseDao;
import com.xy.util.JsonUtils;
import com.xy.util.PageBean;
import com.xy.util.StringUtils;public class BookDao extends JsonBaseDao {/*** 查所有* @param paMap* @param pageBean* @return* @throws InstantiationException* @throws IllegalAccessException* @throws SQLException*/public List<Map<String, Object>> list(Map<String, String[]> paMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{String sql="select * from t_mvc_book where true ";String bname = JsonUtils.getParamVal(paMap, "bname");if(StringUtils.isNotBlank(bname)) {sql+=" and bname like '%"+bname+"%'";}return super.executeQuery(sql, pageBean);}/*** 增加* @param paMap* @return* @throws NoSuchFieldException* @throws SecurityException* @throws IllegalArgumentException* @throws IllegalAccessException* @throws SQLException*/public int add(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {String sql="insert into t_mvc_book(bid,bname,price) values(?,?,?)";return super.executeUpdate(sql, new String[] {"bid","bname","price"}, paMap);}public int del(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {String sql="delete from t_mvc_book where bid=?";return super.executeUpdate(sql, new String[] {"bid"}, paMap);}public int edit(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {String sql="update t_mvc_book set bname=?,price=? where bid=?";return super.executeUpdate(sql, new String[] {"bname","price","bid"}, paMap);}
}

Action

package com.xy.web;import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.xy.dao.BookDao;
import com.xy.util.JsonUtils;
import com.xy.util.PageBean;
import com.xy.util.ResponseUtil;
import com.zking.framework.ActionSupport;public class BookAction extends ActionSupport {private BookDao bookDao=new BookDao();public String list(HttpServletRequest req,HttpServletResponse resp) throws JsonProcessingException, Exception {PageBean pageBean=new PageBean();pageBean.setRequest(req);List<Map<String, Object>> list = this.bookDao.list(req.getParameterMap(),pageBean);Map map=new HashMap();map.put("data", list);map.put("code", 0);map.put("count", pageBean.getTotal());ObjectMapper om=new ObjectMapper();ResponseUtil.write(resp, om.writeValueAsString(map));return null;}public int addBook(HttpServletRequest req,HttpServletResponse resp) throws JsonProcessingException, Exception {int add = bookDao.add(req.getParameterMap());ObjectMapper om=new ObjectMapper();ResponseUtil.write(resp, om.writeValueAsString(add));return add;}public int del(HttpServletRequest req,HttpServletResponse resp) throws JsonProcessingException, Exception {int del = bookDao.del(req.getParameterMap());ObjectMapper om=new ObjectMapper();ResponseUtil.write(resp, om.writeValueAsString(del));return del;}public int edit(HttpServletRequest req,HttpServletResponse resp) throws JsonProcessingException, Exception {req.setCharacterEncoding("utf-8");resp.setCharacterEncoding("html/text;charset=utf-8");int edit = bookDao.edit(req.getParameterMap());ObjectMapper om=new ObjectMapper();ResponseUtil.write(resp, om.writeValueAsString(edit));return edit;}
}

最后增删查改也就完成了
在这里插入图片描述

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

手把手教你如何设计打地鼠游戏（技术教程）
写在前面：这是一篇冗长而专业的技术教程，林子费劲功夫想让学习ComputerScience不辣么枯燥，着实花了好多时间呢？不信往下看嘛？！文末有惊喜哟！本App设计的功能包括：自带背景音乐；地鼠随机出现；计分计时，分数和剩余时间实时显示在屏幕上。Step1：素材准备篇准备1：萝卜…...
2024/4/20 17:25:23
CHM 帮助文档制作
【转】CHM文件制作方法,（以w3school为例） CHM文件制作方法,（以w3school为例）今天在看网页版的w3c时,发现它升级了,而且就在昨天..,找了下现在网上的w3c教程chm内容都是3.0版本的(至少我没找到5.0的),所以自己动手做了这个chm帮助文件,希望能对新手有用文件下载:w3school …...
2024/4/23 2:53:50
定制谷歌文档Google Docs表单(Forms)内容
Google 2008年推出的Docs文档表单应用，很多人或许用到，对于制作用于网络调查的调查表非常方便，不仅能快速制作调查表单，而且Google Docs还非常方便的在线记录了所有调查结果。但美中不足的是，表单的在线编辑系统却不够强大，所支持的几种类型里面都只能填写文字，却无法加…...
2024/4/22 6:50:34
h5布局器可视化表单设计器
码农苦码农懂！您是否有过以下想法：我是一名element初学者，我想以最短的时间快速进入 element 的大门我是一名后端工程师，虽能熟练掌握 JS 的写法，但是页面样式布局让我很头疼我是一名创业者或者团队 Leader，如果能有一款软件降低团队或者我的开发门槛，提升效率和体验…...
2024/4/20 2:00:51
毕业设计
http://www.xhasp.net/NET/ZhiShi/100001827.shtmlhttp://www.sj00.com/http://www.csharpwin.com/在百度中输入关键字“asp.net毕业设计”就可找到毕业设计网站，可以根据他们的要求去设计项目。http://www.w3school.com.cn/asp/asp_variables.asp...
2024/4/20 17:24:19
创建一个简单美观的bootstrap表单全过程
参考文献 Bootstrap表单布局样式bootstrap创建登录注册页面 Bootstrap登录框自适应水平居中+垂直居中新建和导入本人使用eclipse。创建一个空白的网页项目，创建index.jsp。导入bootStrap和jQuery <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js&quo…...
2024/4/22 7:27:08
大统一！微软谷歌 W3C 把 Web 文档迁移至 MDN
（点击上方公众号，可快速关注）转自：新浪科技Mozilla、微软、谷歌、三星、W3C达成协议，准备将它们的所有文档网站统一，内容全部放到Mozilla MDN平台。MDN之前叫作“Mozilla Developer Network”，现在已经变成了“MDN Web Docs”品牌，它存放了所有网络标准（Web标准）文档…...
2024/4/26 14:02:21
Android表单及图片上传--HTTP协议构造分析
最近一段时间在做Android客户端与服务器之间的通信，包括表单提交和图片上传两部分，这块内容Android没有提供具体的API，后来到网上找了一下，发现大神们都是自己构造相关的http协议。不过，在这里说一句，大神们提供的思路和代码都比较好，但是那些代码，我自己是没法正常运行…...
2024/4/20 17:24:17
流程表单开发设计器设计方案
目录前言设计功能使用场景模拟快速开发表单表单使用主要功能表单设计器功能其他相关功能数据存储设计Demo界面及功能表单设计器表单设计器功能界面整体原型定义数据项目表单字段属性定义前言原办公业务流程平台审批单使用业务数据（横向）表纵向存储的思路，所有流程…...
2024/4/25 18:10:49
VUE表单校验rules不起作用
在做公安局疫情上报系统的时候，由于前台的表单项目比较多，而且需要根据不同的条件进行显示切换，开始运行是表单校验很好用，随着项目不断更新，忽然有一天发现校验不起作用了。经过几次调试，发现一个规律，就只有2项是不好用的，而且就是2，3项目不起作用，把表单换一下位…...
2024/5/5 8:32:19
HTML之表单元素“Password”引发的思考-你的密码安全吗？？？
由于浏览器有记住密码的功能，如果大家是允许浏览器记住密码的话，时间久了，难免自己也忘记登录已久的密码到底是多少，这里教大家一个简单的办法，就是打开邮箱、博客、论坛等登录界面后点击自己的用户名，密码会自动以星号显示，这里选择“开发工具-审查元素”，找到密码框，…...
2024/4/26 3:58:14
for循环 image.onload怎么处理
通过循环创建图片，并在每个图片加载完成之后执行函数，不过每次都是触发最后一个图片的 onload 事件。代码：var src=["http://www.w3school.com.cn/i/site_photoref.jpg","http://www.w3school.com.cn/i/site_photoexa.jpg","http://www.w3school.c…...
2024/5/5 5:40:54
网站开发之HTML基础表格Table和表单Form（三）
前面两篇文章主要介绍了HTML的基础知识，详见：网站开发之HTML入门知识及常用标记符（一）网站开发之HTML基础知识及超链接（二）这篇文章主要介绍HTML两个比较重要的基础知识：表格Table及简单的网页布局表单Form及Input控件简单介绍HTML5新增Input控件参考：W3School内…...
2024/4/20 12:15:00
W3-HTML 基础教程笔记
HTML 提示：使用小写标签 HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。 W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。始终为属性值加引号属性值应该始终被包…...
2024/4/20 17:24:57
布局器拖拽拖拽表单设计器厉害了
码农苦码农懂！您是否有过以下想法：我是一名element初学者，我想以最短的时间快速进入 element 的大门我是一名后端工程师，虽能熟练掌握 JS 的写法，但是页面样式布局让我很头疼我是一名创业者或者团队 Leader，如果能有一款软件降低团队或者我的开发门槛，提升效率和体验…...
2024/4/24 17:31:25
Java 超赞的网站
类似W3school的超级赞的网址。 Java，C#，VB，C，C++，Oracle，SQL等等样样俱全！相关教程，书籍，文档和源代码等等尽在其中！官方网站：http://www.java2s.com/ 中文网址：http://www.java2s.com/CN/index.html...
2024/5/5 23:03:00
HttpUrlConnection 实现模拟POST表单传输
HttpUrlConnection实现模拟POST表单传输概述：有的时候我们需要从后台与其他系统交互数据。而其他系统提供的接口，也就是交互方式可能是这样的，提供一个URL，http://IP:port/servlet/Scan，告诉你参数名字是xml,参数内容是一个拼好的xml串。而且这个URL没有界面，用get方式传…...
2024/4/20 12:45:33
标签 content用法
content after 在元素内容之后插入内容代码 h1:after {content:url(/i/w3school_logo_white.gif)}结果a:after {content: " (" attr(href) ")" } <body> <p><a href="http://www.w3school.com.cn">W3School</a> .</…...
2024/5/5 14:27:24
W3Cschool——学习二：JavaScript对象，String，Date，Array
JavaScript 指导方针JavaScript 对大小写敏感空格：JavaScript会忽略多余的空格。换行：您可以在文本字符串内部使用反斜杠对代码进行折行。------------------------------------------------------------------------------------------------------------------------------…...
2024/4/20 11:10:06
java爬虫教程：模拟用户表单登录
转自：http://xiaolongonly.cn/2016/06/01/Reptile3/这个是爬虫教程第三篇，教大家如何模拟用户表单登录。前期准备：JSOUP 1.83 jar包 Eclipse 任意版本能运行java就行谷歌浏览器第一步：依然是分析页面结构我们要模拟CSDN用户表单登录，来获取用户登录后的数据。在一些…...
2024/5/4 5:53:56

layui的layer弹出层和form表单

文章目录

弹出层layer

form表单

增删改查所有代码

相关文章

最新文章