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 相关文章推荐
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
input点击后placeholder中的提示消息消失
Jan 15 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
React快速入门教程
Jan 17 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
详解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 远程关机操作的代码
2008/12/05 PHP
一步一步学习PHP(3) php 函数
2010/02/15 PHP
php从字符串创建函数的方法
2015/03/16 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
jquery 查找新建元素代码
2010/07/06 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
js获取内联样式的方法
2015/01/27 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
Python常用的日期时间处理方法示例
2015/02/08 Python
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
python浪漫表白源码
2019/04/05 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
Python帮你识破双11的套路
2019/11/11 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
美国零售商店:Blue&Cream
2017/04/07 全球购物
存储过程和sql语句的优缺点
2014/07/02 面试题
学生党员思想汇报
2013/12/28 职场文书
生日宴会主持词
2014/03/20 职场文书
经典演讲稿汇总
2014/05/19 职场文书
2014年度党员自我评议
2014/09/13 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书