layui两个html传值,Layui跳转传参、父子页面

使用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;按照新增时间倒序或者是排序号排序都可以的。