极乐门资源网 Design By www.ioogu.com
用户信息展示页面为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>
效果如下:
由于其中'性别'是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"+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信息页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
标签:
layer,弹窗,User
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无使用layer弹窗,制作编辑User信息页面的方法的评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新日志
2024年12月26日
2024年12月26日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]