使用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 相关文章推荐
共享自己写一个框架DreamScript
Jan 20 Javascript
JavaScript 反科里化 this [译]
Sep 20 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
浅析jQuery 3.0中的Data
Jun 14 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
js实现无缝轮播图效果
Mar 09 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
菜鸟修复电子管记
2021/03/02 无线电
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
JavaScript 学习初步 入门教程
2010/03/25 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
Django框架模板介绍
2019/01/15 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
HTML5文档结构标签
2017/04/21 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
高中生校园生活自我评价
2013/09/19 职场文书
精细化工应届生求职信
2013/11/17 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
真诚的求职信
2014/07/04 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
详解pytorch创建tensor函数
2022/03/22 Python