使用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 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
js 分栏效果实现代码
Aug 29 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
jQuery实现可拖动的浮动层完整代码
May 27 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
Vue + ts实现轮播插件的示例
Nov 10 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 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图片库imagemagick安装方法
2014/09/23 PHP
Symfony查询方法实例小结
2017/06/28 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
浅谈flask中的before_request与after_request
2018/01/20 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
用python读取xlsx文件
2020/12/17 Python
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
社会实践自我鉴定
2013/11/07 职场文书
酒店总经理职务说明书
2014/02/26 职场文书
电气自动化求职信
2014/06/24 职场文书
同意迁入证明模板
2014/10/26 职场文书
2014年林业工作总结
2014/12/05 职场文书
会计稽核岗位职责
2015/04/13 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
升学宴来宾致辞
2015/07/27 职场文书
python实现简单区块链结构
2021/04/25 Python
Go语言基础map用法及示例详解
2021/11/17 Golang
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers