使用layer弹窗,制作编辑User信息页面的方法


Posted in Javascript onSeptember 27, 2019

用户信息展示页面为A页面,编辑页面为B页面。A是B的父页面

首先在A页面添加按钮,点击触发函数,函数初始化layer弹窗

‘编辑'按钮:

<button type="button" class="btn btn-primary btn-xs" id="edit{{item.id}}" 
     onclick="editSingle('{{$index}}')">修改</button>

执行函数:

var userContent//作为全局变量,之后给B页面直接调用,后面会提到
function editSingle(index){
 userContent = vm.content[index]
 layer.open({
  type: 2,
  title: '编辑',
  area : ['800px' , '520px'], 
  scrollbar: false,//禁止浏览器滚动
  content: 'bUser/editSingle'
  }); 
}

B页面初始化时从A页面取值,用parent.xxx

var iframe = parent.layer.getFrameIndex(window.name); //获取窗口索引,这里的B页面所在窗口的索引值为1
 var vm = new Vue({
  el:'#editUser',
  data:{
   contents:parent.userContent,//从A页面取值
   titles:['手机','密码','用户名','性别','邮箱','地区','个性签名','头像']
  }
 });

使用Vue动态生成html语句

<form class="form-horizontal" id="editUser" action="<%=basePath%>/BSMSys/bUser/save" method="post">
 <div class="form-group" v-for="(key,value) in contents" >
  <div v-if="$index==0">
   <div hidden>
    <input v-else type="text" class="form-control" id="{{key}}" name="{{key}}" placeholder="{{value}}" value="{{value}}">
   </div>
  </div>
  <div v-if="$index!=0">
   <label for="{{key}}" class="col-xs-2 control-label">{{titles[$index-1]}}</label>
   <div class="col-xs-9" >
    <div v-if="$index==4 || value=='MAN'" class="fixradio">
     <input type="radio" name="{{key}}" id="{{key}}" value="MAN"/> 男
     <input type="radio" name="{{key}}" id="{{key}}" value="WOMEN"/> 女
    </div>
    <input v-else type="text" class="form-control" id="{{key}}" name="{{key}}" placeholder="{{value}}" value="{{value}}">
   </div>
  </div>
 </div>

 <div class="form-group">
  <div class="col-xs-offset-5 col-xs-1">
   <button class="btn btn-primary" id="save">保存</button>
  </div>
  <div class="col-xs-1">
   <button class="btn btn-default" id="restore">还原</button>
  </div>
 </div>
</form>

效果如下:

使用layer弹窗,制作编辑User信息页面的方法

由于其中'性别'是radio单选框,所以需要判断

//判断性别,并选中对应的radio
  if(vm.contents.sex!=''){
   if(vm.contents.sex=='MAN') $("#sex:eq(0)").click();
   else $("#sex:eq(1)").click();
  }

还原按钮,即刷新页面:

$("#restore").click(function(){
   window.location.reload();
  })

保存按钮:

$("#save").click(function(){
   $("#editUser").submit();
   parent.location.reload();
   //parent.layer.close(iframe);//如果执行这一步,会导致submit无法提交到服务器,这里用刷新页面使弹窗关闭
  })

在后台将form数据保存进数据库即可

后续优化:

将B页面form表单的submit提交改为ajax提交,

function save(){ 
  $.ajax({
   type:"post",
   url:"<%=basePath%>/BSMSys/bUser/save",
   data: $("#editUser").serialize(),//序列化表单数据
   complete: function() {
    parent.layer.close(iframe);//关闭弹窗
   }
  });
 }
$('#save').on('click', function(){
   save();
  });

将A页面的layer弹窗添加end函数回调,使弹窗关闭后刷新页面:

function jumpToPage(page){
 $.get("<%=basePath%>/BSMSys/bUser/showUser?pageNum="+page, function(data) { 
  vm.content=data.content;//赋值给vue
  currPage = data.number+1;
  $('#pager').bootstrapPaginator("show",currPage );//初始化分页插件
 });
 $("#pageInputGroup").attr("class","input-group");
 $("#pageInput").attr("placeholder",function(index,value){
  $(this).val("");
  return "第"+options.currentPage+"页,共"+options.totalPages+"页";
 });
}
var userContent
function editSingle(index){
 userContent = vm.content[index]
 layer.open({
  type: 2,
  title: '编辑',
  area : ['800px' , '520px'], 
  scrollbar: false,//禁止浏览器滚动
  content: '<%=basePath%>/BSMSys/bUser/editSingle',
  end:function(){
   jumpToPage(options.currentPage);
  }
 }); 
}

以上这篇使用layer弹窗,制作编辑User信息页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery function的正确书写方法
Aug 02 Javascript
javascript中创建对象的几种方法总结
Nov 01 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
jquery操作select方法汇总
Feb 05 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
Dec 03 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
canvas红包照片实例分享
Feb 28 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
vue实现倒计时获取验证码效果
Apr 17 #Javascript
通过layer实现可输入的模态框的例子
Sep 27 #Javascript
vue调用语音播放的方法
Sep 27 #Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 #Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 #Javascript
vue实现在线翻译功能
Sep 27 #Javascript
webpack 处理CSS资源的实现
Sep 27 #Javascript
You might like
需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
关于尾递归的使用详解
2013/05/02 PHP
php中{}大括号是什么意思
2013/12/01 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
Python列表生成器的循环技巧分享
2015/03/06 Python
Python自动重试HTTP连接装饰器
2015/04/28 Python
详解python读取和输出到txt
2019/03/29 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
python的pip有什么用
2020/06/17 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
Python学习笔记之装饰器
2020/08/06 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
安全生产宣传标语
2014/06/06 职场文书
单位员工收入证明样本
2014/10/09 职场文书
工作检讨书500字
2014/10/19 职场文书
主持稿开场白
2015/06/01 职场文书
安全教育片观后感
2015/06/17 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
2019个人半年工作总结
2019/06/21 职场文书
导游词之岳阳楼
2019/09/25 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
Python中os模块的简单使用及重命名操作
2021/04/17 Python
Python Socket编程详解
2021/04/25 Python
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android
vue实现登陆页面开发实践
2022/05/30 Vue.js