使用parent.xadmin.add_tab()方法打开新的标签页
重点是这个parent&＃xff0c;折磨了我一下午&＃xff0c;原来是没有搞清应该从父页面打开。最开始的xadmin.add_tab()是用在左边菜单上的&＃xff0c;点击就会增加新的标签页&＃xff0c;这个才是父页面。
使用X-admin(Layui)前端框架&＃xff0c;在打开新Tab页面内刷新其他Tab页面解决方案(表单数据多可以使用open弹框全屏)
使用X-admin(Layui)前端框架&＃xff0c;从数据列表页点击弹框(open)的添加页面&＃xff0c;然后添加成功关闭弹框且刷新列表页&＃xff0c;这种情况比较常见代码如下&＃xff1a;
// 获得frame索引
var index &＃61; parent.layer.getFrameIndex(window.name);
//关闭当前frame
parent.layer.close(index);
window.parent.location.reload();
如果是添加页面的字段很多&＃xff0c;打开新的Tab页面的话&＃xff0c;就不能使用以上代码&＃xff0c;我的解决方案是代码如下&＃xff1a;
————————————————
版权声明&＃xff1a;本文为CSDN博主「似水往昔浮流年 ♚」的原创文章&＃xff0c;遵循CC 4.0 BY-SA版权协议&＃xff0c;转载请附上原文出处链接及本声明。
原文链接&＃xff1a;https://blog.csdn.net/qiaoshuai0920/article/details/103414005
//重新调用打开list页面&＃xff0c;并且刷新。
parent.xadmin.add_tab(&＃39;列表&＃39;,&＃39;list.action&＃39;,true);
//关闭当前tab页面 必须后关闭。
xadmin.del_tab();
前一个页面的检查语句可能会使后一个页面提交失败&＃xff0c;并返回到前一页面
这个bug隐藏地非常深&＃xff0c;我一开始写了新增合同页面&＃xff0c;通过“下一步”的按钮跳转到添加合同条款的页面&＃xff0c;结果可以跳转&＃xff0c;合同编号也传递正确了&＃xff0c;但是条款信息提交时却又返回到了上一页面。
因为某种机缘巧合而发现了原来是新增合同页面的form检查语句form.verify{}不让我提交……至于原因&＃xff0c;可能是我把不该写的东西写在了form.verify{}里吧……改得太快&＃xff0c;没注意具体原因。
使用layui的layer.open打开页面并传入参数
layui.use([&＃39;jquery&＃39;,&＃39;form&＃39;,&＃39;layer&＃39;], function(){
var $ &＃61; layui.jquery,
layer &＃61; layui.layer,
form &＃61; layui.form;
///预览
$(&＃39;#preview&＃39;).on(&＃39;click&＃39;,function() {
var w &＃61; ($(window).width() * 0.7);
var h &＃61; ($(window).height() - 50);
layer.open({
resize: false,
title: &＃39;预览&＃39;,
shadeClose: true,
area: [w &＃43; &＃39;px&＃39;, h &＃43; &＃39;px&＃39;],
type: 2,
content: &＃39;/common/html/preview.html&＃39;,
success: function (layero, index) {
var body &＃61; layer.getChildFrame(&＃39;body&＃39;, index);
body.find(&＃39;#content&＃39;).append(editor.txt.html());
}
});
});
});
使用layui的form进行ajax提交操作时必须return false防止表单跳转
我的理解是如果不return false&＃xff0c;传的参数会被页面自动刷新掉。
Layui form表单提交注意事项
最后return false防止页面刷(form表单提交后如果请求原来的页面尾后没有参数&＃xff1f;id&＃61;之类的参数请求&＃xff0c;可以不返回false))&＃xff0c;
http://localhost:8080/jump/jumpToPages?flag&＃61;5请求原页面大有参数&＃xff0c;必须返回false&＃xff0c;不然页面获取不到参数 报错
// 表单提交
form.on(&＃39;submit(first1)&＃39;, function (data) {
var articleFrom &＃61; data.field;
$.ajax({
type:"POST",
url:"/user/upDate",
data:articleFrom,
dataType:"JSON",
success:function (data) {
if(data.flag){
layer.closeAll();
}
}
});
return false;
});
实现上一步与下一步
Q&＃xff1a;弹窗弹出一个表单&＃xff0c;然后点击下一步的时候再弹出来一个表单 然后点击提交的时候再把所有内容都提交给后台&＃xff0c;如何实现&＃xff1f;
A&＃xff1a;你的弹出层里面可以放两个表单&＃xff0c;先隐藏第二个表单&＃xff0c;点击下一步的时候在隐藏第一个显示第二个&＃xff0c;这中间可以layer.load几秒后再出现&＃xff0c;再一起把表单提交。
实在想用两次弹出层来实现也行&＃xff0c;点击下一步的时候layer.getChildFrame(&＃39;body&＃39;, index)把第一个表单赋给一个变量&＃xff0c;弹出第二个表单&＃xff0c;同样获取表单值一起提交就行了。
Q&＃xff1a;在提交表单后&＃xff0c;给出提交成功信息&＃xff0c;然后怎么关闭当前表单页面&＃xff0c;跳转到并刷新列表页面。怎么让新添加的数据显示在列表页面的首行。
A&＃xff1a;
1.关闭页面
如果你是使用 layui.open 打开的新页面可以参考 https://www.layui.com/doc/modules/layer.html#layer.close
var index &＃61; parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
2.关闭当前页&＃xff0c;刷新父页面
window.parent.location.href &＃61; url (可以试试这个)
3.至于添加的数据显示在最前面&＃xff0c;这个需要后台去处理&＃xff0c;按照新增时间倒序或者是排序号排序都可以的。
京公网安备 11010802041100号