使用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 相关文章推荐
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
JavaScript iframe的相互操作浅析
Oct 14 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
面试题:react和vue的区别分析
Apr 08 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
jQuery实现的分页插件完整示例
May 26 jQuery
JavaScript数组排序的六种常见算法总结
Aug 18 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 define函数的使用说明
2008/08/27 PHP
php横向重复区域显示二法
2008/09/25 PHP
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
简单了解python反射机制的一些知识
2019/07/13 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
电脑饰品店的创业计划书
2014/01/21 职场文书
《金子》教学反思
2014/04/13 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
合作合同协议书范本
2015/01/27 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
草房子读书笔记
2015/06/29 职场文书
python实现简易名片管理系统
2021/04/11 Python
Python 中 Shutil 模块详情
2021/11/11 Python