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 相关文章推荐
js 判断 enter 事件
Feb 12 Javascript
jqPlot jquery的页面图表绘制工具
Jul 25 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 Javascript
微信小程序实现红包雨功能
Jul 11 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 Javascript
Angular6项目打包优化的实现方法
Dec 15 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 Javascript
React Fragment介绍与使用详解
Nov 11 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
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
php中判断数组是一维,二维,还是多维的解决方法
2013/05/04 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
php实现读取内存顺序号
2015/03/29 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
Js动态创建div
2008/09/25 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
Python正则表达式使用经典实例
2016/06/21 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
获取Django项目的全部url方法详解
2017/10/26 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
Python面向对象编程基础实例分析
2020/01/17 Python
Django的CVB实例详解
2020/02/10 Python
用python批量下载apk
2020/12/29 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
护理专业毕业生自荐信范文
2014/01/05 职场文书
部队万能检讨书
2014/02/20 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
货款欠条范本
2015/07/03 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
python_tkinter弹出对话框创建
2022/03/20 Python
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python