layui跳转html如何带参数,Layui跳转页面代码(可携带复杂参数)
今天用了Layui的“数据表格 - 数据操作”示例代码,结果发现点击“编辑”按钮出出来一个弹出消息框,效果如下:
虽然说也可以用“弹出层”做编辑页面,但是,由于我编辑的东西很多,用“弹出层”不太理想。
我就想能不能像URL链接那样,直接点击链接就跳转走了。例如:点击一个”编辑“按钮,就直接跳转到相对应的”编辑页面“。
下面是我给大家的方法,大家可以做一个参考:
注意:Layui跳转页面代码最重要的部份是layer.open那里,请大家不要看错了。
第一种:Layui点击“编辑”按钮后“直接”跳转页面
layui.use('table', function(){
var table = layui.table;
//监听表格复选框选择
table.on('checkbox(demo)', function(obj){
console.log(obj)
});
//监听工具条
table.on('tool(demo)', function(obj){
var data = obj.data;
if(obj.event === 'detail'){
layer.msg('ID:'+ data.id + ' 的查看操作');
} else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
//layer.alert('编辑行:
'+ JSON.stringify(data));
layer.open({
content: '开始编辑',
success: function(layero, index){
self.location="<?php echo $HOMEURL.$ADMIN_ADDRESS;?>?type=category&action=edit&id=" + data.id;//跳到指定页面,这里可以自定义修改,携带复杂参数
}
});
}
});
第二种:Layui点击“编辑”按钮后,点击“确定”后才开始跳转页面
layer.open({
content: '确定开始编辑吗?',
btn: ['确定','取消'],
style: 'width:80%',
yes: function(index, layero){
//do something
self.location="<?php echo $HOMEURL.$ADMIN_ADDRESS;?>?type=category&action=edit&id=" + data.id; //跳到指定页面,这里可以自定义修改,携带复杂参数
layer.close(index); //如果设定了yes回调,需进行手工关闭
},
cancel: function(index,layero){ //按右上角“X”按钮
},
});
总结:
以上只是我目前用得比较多的两种方法,其实还有很多种方法,大家具体可以参考layui手册:
https://www.layui.com/doc/modules/layer.html#success
通过这里你可以掌握更多的Layui跳转页面方式,可以实现不同效果的Layui跳转页面代码。我上面两种方法与原理也是参考于layui手册。
例如:
1、success - 层弹出后的成功回调方法
类型:Function,默认:null
当你需要在层创建完毕时即执行一些语句,可以通过该回调。success会携带两个参数,分别是当前层DOM当前层索引。如:
layui.code
layer.open({
content: '测试回调',
success: function(layero, index){
console.log(layero, index);
}
});
2、yes - 确定按钮回调方法
类型:Function,默认:null
该回调携带两个参数,分别为当前层索引、当前层DOM对象。如:
layer.open({
content: '测试回调',
yes: function(index, layero){
//do something
layer.close(index); //如果设定了yes回调,需进行手工关闭
}
});
3、cancel - 右上角关闭按钮触发的回调
类型:Function,默认:null
该回调携带两个参数,分别为:当前层索引参数(index)、当前层的DOM对象(layero),默认会自动触发关闭。如果不想关闭,return false即可,如;
cancel: function(index, layero){
if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时,该层才会关闭
layer.close(index)
}
return false;
}
4、end - 层销毁后触发的回调
类型:Function,默认:null
无论是确认还是取消,只要层被销毁了,end都会执行,不携带任何参数。
5、full/min/restore -分别代表最大化、最小化、还原 后触发的回调
类型:Function,默认:null
携带一个参数,即当前层DOM
layui跳转html如何带参数,Layui跳转页面代码(可携带复杂参数)相关推荐
- 获取页面链接后携带的参数
获取页面链接&后携带的参数 提示:本方法只在H5页面试用过,vue并未测试,各位可以尝试一下 文章目录 获取页面链接&后携带的参数 前言 一.URLSearchParams是什么? 二 ...
- python数据参数_零基础学习python数据分析——函数的参数
原标题:零基础学习python数据分析--函数的参数 上一节课中我们讲了python的函数定义,Python的函数定义非常简单,但灵活度却非常大.除了正常定义的必选参数外,还可以使用默认参数.可变参数 ...
- layui上传图片需携带额外参数
最近项目中遇到上传图片需携带跳转链接额外参数的问题困扰很久得到解决现记录如下 充分了解layui upload.js组件中的三个状态 choose,before,done choose)表示文件选择后 ...
- vue 跳转页面带对象_vue从一个页面跳转到另一个页面并携带参数
1.需求: 点击商场跳转到商业体列表 解决方案: 元页面: a标签中添加跳转函数 商场 toMallInfo: function(mallCode){ this.$router.push({ path ...
- layui横线:带标题的横线(含代码、案例)
layui横线:带标题的横线(含代码.案例) 官方文档:https://www.layui.com/doc/element/auxiliar.html 案例· 截图: 代码示下: /* 分割线(含标题 ...
- AJAX扩展-POST传递参数并跳转页面
拓展的代码: 这段代码的原理是创建一个表单,所有args都创建一个隐藏的input,用post方法把这些参数传递过去 注意form表单一定要加载到页面中,即下面代码中标红的部分,不然参数是无法被传递的 ...
- vue 跳转页面带对象_vue跳转页面的几种方法(推荐)
vue跳转不同页面的多种方法 1:router-link跳转 点击跳转2 点击跳转1 点击跳转3 2:this.$router.push() 点击跳转4 export default{ name:'t ...
- layui table数据表格中数据返回成功,但页面不显示数据内容问题
layui table数据表格中数据返回成功,但页面不显示数据内容问题. 这是我做毕业设计的时候自己遇到的问题,后来查看了网上的一些技术贴子而得到解决,所以便想总结一个大概的方法,供大家参考! 一般导 ...
- 【笔记】微信开发者工具自定义编译模式(编译时,携带 指定参数 直接跳转 指定页面)
文章目录 问题 解决 问题 发现这个神奇功能之前,一般都是在 app.json 下 pages 里将当前页面置顶,参数写死... 或是,什么都不做,繁琐的一级一级的点,直到从首页进入需要调试页面... ...
最新文章
- USACO1.1Broken Necklace[环状DP作死]
- 投靠Linux第一步 Windows数据向Linux迁徙(1)
- EOJ_1057_排名汇总
- json-server模拟后台接口
- 徒手撸了个markdown笔记平台
- 使用python数据分析_如何使用Python提升您的数据分析技能
- Win10最详细tensorflow-GPU环境的安装(安装anaconda、CUDA、CUDANN)
- 设计模式 C++抽象工厂模式
- mybatis源码学习方式
- 系统架构升级建议书(1)
- Java 使用Modsim32进行modbus-tcp协议模拟(从机)并使用java当做主机(Maven项目)进行从机信息获取及修改
- java常见面试题:Java程序员面试题(五)
- 大型公司网路架构浅谈
- 利用matlab导入数据+命令行 快速选取excel部分内容
- 猎头推荐转行大数据分析师骗局
- vs2022 c#调用interop.word 12.0版本也就是word2007实现首行缩进两个字符
- 下载各省疫情历史数据
- 另类的黑苹果“安装”方法。
- C51单片机,基于LCD液晶屏的简易时钟
- pca降维python实例_主成分分析(Principal component analysis, PCA)例子–Python | 文艺数学君...