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