共有三种传值方法
1.通过layer.open()
中的success
回调方法传值。
弹出层layer本质上是一个iframe
,可以通过js获取其dom元素然后对相应的标签赋值。
代码示例:(这里是使用layui的table组件,在点击工具栏时打开弹出层,主要是success回调函数中的代码)
//监听工具条
table.on('tool(user)', function (obj) {
var data = obj.data;
console.info("tool");
if (obj.event === 'edit') {//实现操作
//layer.msg('ID:'+ data.id + ' 的查看操作');
layer.open({
type: 2,
content: '/Storage/OutStorageDetail2',
title: "修改用户",
area: ["700px", "450px"],
end: function () { // layui 关闭弹框时的回调函数
$("#reloadBtn").click();
},
success: function (layero, index) {
//向layer页面传值,传值主要代码
var body = layer.getChildFrame('body', index);
//得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
//var iframeWin = window[layero.find('iframe')[0]['name']];
//将弹窗页面中属性名name="fixure_id"的标签赋值
body.find("[name='fixure_id']").val(data.fixure_id);
}
});
}
});
2.利用后台.net mvc的控制器方法传值,由于.net mvc框架中每个页面view都有对应的action方法,所以可以从后台传值到layer中。
具体思路:
1.在layer.open()
的content
参数中将少量信息拼接传递到后台,如userID
2.在页面view
对应的后台action
方法中接收该userID并查找到对应的要传的值,通过ViewBag等传递到layer中。
代码示例:(前端view代码)
//监听工具条
table.on('tool(user)', function (obj) {
var data = obj.data;
console.info("tool");
if (obj.event === 'edit') {//实现操作
//layer.msg('ID:'+ data.id + ' 的查看操作');
layer.open({
type: 2,
content: '/Storage/UserDetail?userGuid=' + data.UserGuid,
title: "修改用户",
area: ["700px", "450px"],
end: function () { // layui 关闭弹框时的回调函数
$("#reloadBtn").click();
}
});
}
});
后台控制器的action方法:(这里通过前台传来的userGuid,使用ef获得用户所有信息,最后通过ViewBag将数据在传回前端弹窗的view)
public ActionResult UserDetail(Guid? userGuid)
{
if (userGuid == null)
{
return View();
}
using (ruanmouDbContext context = new ruanmouDbContext())
{
rm_UserInfo userinfo = context.rm_UserInfo.FirstOrDefault(u => u.UserGuid == userGuid);
ViewBag.userInfo = Newtonsoft.Json.JsonConvert.SerializeObject(userinfo);
return View();
}
}
layer前端弹窗view接收值的代码:
var userInfo = @ViewBag.userInfo ;
var jsonUser = JSON.parse(userInfo);
3.(不推荐)在layer的content
参数的url
拼接字符串进行传值,但此方法只能传少量的值(通过url地址传值)
这种方法其前端的layeropen()方法的代码与第二种类似,但前端弹窗获取值的方法与第二种不同,其前端直接用js从url地址中获取参数值,这种方法我还没实际使用过,不是很推荐。
用js从url地址中取值的参考代码:
/**
* [通过参数名获取url中的参数值]
* 示例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明
* @param {[string]} queryName [参数名]
* @return {[string]} [参数值]
*/
function GetQueryValue(queryName) {
var query = decodeURI(window.location.search.substring(1));
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == queryName) { return pair[1]; }
}
return null;
}
//使用方法
var queryVal=GetQueryValue('name');
console.log(queryVal);// 小明
参考:
js获取url参数值的方法总结