layer实现弹窗提交信息


Posted in Javascript onDecember 12, 2016

layer是非常好用的弹窗插件,具体参见官方文档
点击这里进入。官方有很多示例,使用方法也非常简单,引入官方下载的css和js就可以了。但是有时候,弹窗提醒并不能满足我们的所有要求。例如,在奖品界面,希望点击“编辑奖品”的时候,能弹出对话框让我们来填写信息,如下图所示:

layer实现弹窗提交信息

如何用简洁美观的 layer 实现这一功能呢?官方并没有给我们提供示例,那就自己动手写吧。下面把代码贴出来。

给“添加奖品”按钮加上单击触发confirmUpdateAward方法

var awards = "";
function confirmUpdateAward(i) {
 layer.open({
  type: 1,
  closeBtn: false,
  shift: 7,
  shadeClose: true,
  content: "<div style='width:350px;'><div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>请输入奖项名称</p><input id='awardName' class='form-control' type='text' name='awardName' value='"+awards[i].awName+"'/></div>" +
  "<div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>请输入奖项描述</p><input id='awardDescription' class='form-control' type='text' name='awardDescription' value='"+awards[i].awDescription+"'/></div>"+
  "<div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>请输入获奖人数</p><input id='awardUserCount' class='form-control' type='number' name='awardUserCount' value='"+awards[i].awUserCount+"'/></div>"+
  "<div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>请输入奖项类别</p><input id='awardKind' class='form-control' type='text' name='awardKind' value='"+awards[i].awKind+"'/>" +
  "<button style='margin-top:5%;' type='button' class='btn btn-block btn-success btn-lg' onclick='updateAward("+awards[i].id+")'>提交</button></div>"
 });
}

function updateAward(awardId){

 var awardUserCount = $("#awardUserCount").val();
 if(awardUserCount*1>8888 || awardUserCount*1<1){
  layer.msg('人数必须是1到8888', {
   time: 500, //0.5s后自动关闭
   // btn: ['明白了', '知道了']
  });
 }else{
  var awardName = $("#awardName").val();
  var awardDescription = $("#awardDescription").val();
  var awardKind = $("#awardKind").val();
  $.ajax({
   type: "post",
   url : getContextPath() + "/award/updateAward",
   dataType:'json',
   data: {
    "awardId":awardId,
    "awardName":awardName,
    "awardDescription":awardDescription,
    "awardUserCount":awardUserCount,
    "awardKind":awardKind
   },
   success: function(data){
    var updateSuccess = data.data;
    if(updateSuccess){
     layer.msg('修改成功', {
      time: 500, //0.5s后自动关闭
      // btn: ['明白了', '知道了']
     });
     refreshPage();
    }else{
     layer.msg('修改失败', {
      time: 500, //20s后自动关闭
      // btn: ['明白了', '知道了']
     });
    }
   }
  });
  layer.closeAll();
 }
}

这里有几个需要注意的点:

第一:最后一定要用

layer.closeAll();

否则提交之后弹窗不会自己关闭。

第二:

<input type="number" />

只能保证用户不能输入字母(实际上字母e是可以输入的,会认为是科学技术法),但是通过Json传到后端的依旧是String类型,在做将该信息用

Integer.valueOf();

强转为Integer时候,一定要判断String是否为空,否则会抛异常。

第三:

这里实际上是用到了一个js方法之间调用巧传对象的方法。

当我们从数据库取出若干条奖品记录时,每一条记录都应该有一个“修改”按钮。当我们做修改的时候,用户都希望输入框中显示之前的信息,但是js的方法之间调用的时候,传对象很麻烦,有什么简便的方法呢?

如上面的源码所示,我们只传序号 i 过去。下面这段代码是奖品展示页面的代码,我们可以看到每条记录都有“编辑”按钮。

$(document).ready(function () {
 refreshPage();
});

//定义全局变量
var awards = "";

function refreshPage(){
 $.ajax({
  type: "post",
  url : getContextPath() + "/award/getAllAwards",
  dataType:'json',
  data: {
  },
  success: function(data){
   awards = data.data;
   var awardHtml = "";
   var iLen = awards.length;
   //遍历取出每一条奖品
   for(var i = iLen - 1 ; i >=0 ; i--){
    awardHtml+="<tr><td><span id='span"+i+"' style='cursor:pointer;' onclick='selectAward("+i+","+iLen+")' class='label label-default'>"+"选中"+"</span></td><td>"+awards[i].awName+"</td><td>"+awards[i].awDescription+"</td><td>"+
     awards[i].awUserCount+"</td><td>"+awards[i].awKind+"</td><td><span style='cursor:pointer;' class='label label-info' onclick='confirmUpdateAward("+i+")'>"+"编辑"+"</span></td><td>" +
     "<span class='label label-danger' style='cursor:pointer;' onclick='comfirmDeleteAward("+awards[i].id+")'>"+"删除"+"</span></td></tr>";
   }
   $("#awardTable").html(awardHtml);
  }
 });
}

注意看

onclick='confirmUpdateAward("+i+")'>"+"编辑"+"</span>

这句,我们只传了i到我们最开始写的confirmUpdateAward方法里面,却因为在js中定义了全局变量 awards ,就可以巧妙地在confirmUpdateAward方法中使用awards[i]了。

layer做信息提交遇到的坑都写在这里了,应该再没什么别的问题了,有需要的话可以留言评论。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
document.compatMode介绍
May 21 Javascript
JQuery live函数
Dec 24 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
express+mockjs实现模拟后台数据发送功能
Jan 07 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
js实现简单进度条效果
Mar 25 Javascript
详解Javascript数据类型的转换规则
Dec 12 #Javascript
设置jquery UI 控件的大小方法
Dec 12 #Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 #Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 #Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 #Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 #Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 #Javascript
You might like
php计算函数执行时间的方法
2015/03/20 PHP
javascript学习之闭包分析
2010/12/02 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
Python map及filter函数使用方法解析
2020/08/06 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
全球虚拟主机商:HostGator
2017/02/06 全球购物
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
中国高端家电购物商城:顺电
2018/03/04 全球购物
成教毕业生自我鉴定
2013/10/23 职场文书
大学生毕业自我评价范文分享
2013/11/07 职场文书
先进集体事迹材料
2014/02/17 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
三好生演讲稿
2014/09/12 职场文书
教师节标语大全
2014/10/07 职场文书
安全检查汇报材料
2014/12/26 职场文书