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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
IE 当eval遇上function的处理
Aug 09 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 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/07/09 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
input 输入框内的输入事件详细分析
2010/03/17 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
神经网络python源码分享
2017/12/15 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
在Python中表示一个对象的方法
2019/06/25 Python
python  logging日志打印过程解析
2019/10/22 Python
详解python破解zip文件密码的方法
2020/01/13 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
大学生实训报告总结
2014/11/05 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL