layui 传递前端请求_layui弹出层如何传值?

layui弹出层如何传值?下面本篇文章给大家介绍一下layui弹窗间的传值(layui弹出层传值)(窗口传值)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

主要有两部分从主窗口传值到弹出层

从弹出层传值到主窗口

通过session互传

通过调用父窗口的函数从而获取到父窗口的值(相反也是可以的)

1、从主窗口传值到弹出层

首先时js

changefileone函数时按钮绑定事件,按钮点击后调用这个函数然后弹出弹出层,加载changefile.html界面

然后success提前加载changefile的form数据(从主窗口传值到弹出层)//bootstraptable的修改,点击按钮的时候自动选中该行,因此可以获取到整行的值

function changefileone() {

var rowselect = $("#menuTable").bootstrapTable('getSelections'); //取得当前选定的selectItem对象,其中包括整行值

console.log(rowselect);

layer.open({

title: "修改文件属性",

type: 2,

content: "changefile.html",

area: ['50%', '70%'],

skin: "layui-layer-molv",

btn: ['确定', '关闭'],

success: function (layero, index) { //成功获得加载changefile.html时,预先加载,将值从父窗口传到 子窗口

console.log(obj.data.editAble);

let body = layer.getChildFrame('body', index);

//console.log(rowselect[0].filename);

body.find(".filename").val(rowselect[0].filename); //通过class名进行获取数据

body.find(".filepath").val(rowselect[0].path);//意思是将rowselect[0].path这个值传递到子窗口的class="filepath"这个的文本框中,(预先加载)

//body.find(".menuid").val(rowselect[0].previousid);

layui.form.render();

},

yes: function (index, layero) { //按了弹出层的确定按钮时,这是将在父窗口中获取子窗口form标签里的所有值,并根据name名和值形成键值对json对象

//console.log(layero);

layer.alert('来到这里了'+index);

let body = layer.getChildFrame("body", index);

let data = {};

body.find("#changefileform").serializeArray().forEach(function (item) { //获取弹出层写下的数据,input,下拉框啊,之类的表单元素(即changefileform下的所有数据)

data[item.name] = item.value; //根据表单元素的name属性来获取数据

});

data["fileid"] = rowselect[0].fileid;

//if (data["previousid"] == "" || data["previousid"] == null)

// data["previousid"] = rowselect[0].previousid;

console.log(data);

$.post('/api/dofile', data, function (result) {

if (result == "success") {

layer.alert("修改文件属性成功");

}

setTimeout(function () {

layer.close(index);

parent.location.reload();

}, 600);

});

layer.close(index);

resetSearch();

}

});

}

点击按钮后,提前加载

然后是html界面,script里面是用来下拉框加载数据库数据的,可以删掉

$(document).ready(function () {

var selectvalue = ""; //定义这个用来存放选择的value

layui.use('form', function () {

var form = layui.form;

$.get("/api/choosemenu", function (data) {

for (var j in data.rows) {

//alert(data.rows[j].Name);

$("#menuname").append("" + data.rows[j].Name + "");

}

form.render();

form.on('select', function (data) {

//alert(data.value);

//console.log(data.value);

selectvalue = data.value;

console.log(selectvalue);

});

})

})

})

文件名

文件路径

父目录

请选择父目录

2、然后再这个弹出层填写数据,按了确定后就开始加载这个js啦,这个获取数据是通过name属性来获取的,上面 那个的话是通过class名称来获取的

然后controller获取从js传来的数据的话,看我另外的博客

下拉框动态获取数据库数据

下拉框可以搜索

看我其他博客

3、通过session传值

设置sessionsessionStorage.setItem('roleid', 'hello');

取sessionvar ss=sessionStorage.getItem('roleid');

删除session中保存指定的值sessionStorage.removeItem('roleid');

删除全部sessionStorage.clear();

4、通过调用父窗口的函数从而获取到父窗口的值, 这个适合获取少量值, 父窗口的js:

(1)(这个是获取bootstraptable的选定值)menuTable是表格的id,这样返回的值是jSON值来的function getrowselect() {

return $.map($('#menuTable').bootstrapTable('getSelections'), function (row) {

return row//返回数据行

});

}

(2)如果是普通的text文本框(父窗口的js)function getrowselect() {

return $.map($('#text').val(), function (row) {

return row//返回数据行

});}

(3)也可以直接在子窗口的jswindow.parent.getElementById("text").val();

如果是(1)(2)种的话子窗口js这样调用(这个是接(1)(2)的啊别搞错了):var rowselect = window.parent.getrowselect();

console.log(rowselect);//这里可以打印一下获取到值没有

5、假如是子窗口传值给父窗口

父窗口js:function getrowselect(userdata) {

console.log(userdata);

document.getElementById(userdata.inputid).value = userdata.uname;

var dffff = "id" + userdata.inputid;

document.getElementById(dffff).value=userdata.uid;

return;

}

子窗口://data="";

//data={"ss"="hello","gg"="world"}

window.parent.getrowselect(data);

6、假如子弹窗窗口想要比父窗口大的话,需要用到top.layer.open或者parent.layer.open

这时通过var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();

更多web前端知识,请查阅 HTML中文网 !!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/503480.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

长春学校计算机科学技术学院,长春大学计算机科学技术学院

长春大学计算机科学技术学院介绍:长春大学计算机科学技术学院成立于1996年。目前,学院下设计算机科学与技术系、网络工程系、软件工程系、计算机基础教学部、计算机实验教学中心五个部门;有计算机科学与技术、网络工程、软件工程三个全日制本…

工具系列:TensorFlow决策森林_(5)使用文本和神经网络特征

文章目录 设置使用原始文本作为特征使用预训练的文本嵌入同时训练决策树和神经网络构建模型训练和评估模型 欢迎来到 TensorFlow决策森林( TF-DF)的 中级教程。 在本文中,您将学习有关 TF-DF的一些更高级的功能,包括如何处理自…

hive 导出json格式 文件_hive支持json格式的数据

Hive支持完全json格式的数据现有json格式的数据test.txt,如下{"name":"zhang","age":"20","sex":"man"}{"name":"li","age":"21","sex":"m…

超级计算机游戏电脑,Salad邀请PC玩家参与全球最大分布式超级计算机的构建

(来自:Salad 官网)据悉,自 2018 年成立以来,Salad 已经在 25 万名 PC 玩家的帮助下,利用闲置的硬件算力、以及开源的桌面应用程序,来帮助验证区块链交易。作为奖励,Salad 用户能够分享计算资源,…

pd对焦速度_捕捉爆炸瞬间!魅蓝Note6双PD对焦速度逆天

随着手机拍照技术的不断突破,手机拍照效果让我们惊叹不已。全新发布的魅蓝Note6手机之前已经被曝光了拍照样张,同时官网也在发布会前夕提出“全球最快的双摄,对焦速度是多少?今天就让我们通过实际样张,感受一下魅蓝Note6给我们带…

更换锁定计算机图片,电脑锁屏图片怎么设置

电脑锁屏图片怎么设置觉得电脑锁屏的图片单调没有新意?其实大家想知道电脑锁屏图片应该怎么设置吗?下面是小编推荐给大家的电脑锁屏图片怎么设置,希望大家有所收获。同时按下窗口键winR,调出运行对话框,如下图所示运行…

单片机音频谱曲软件_【自己写的小软件】CLY单片机音乐代码超级生成器

我比较喜欢动漫歌曲,最近用它打了《东京泰迪熊》到单片机里面,用P0.0做蜂鸣器输出口,挺好听的,分享一下源代码应该没什么问题吧?/*--------------------------------------------------------8051单片机音乐代码生成器…

六年级计算机应用计划,2017六年级信息技术下册教学计划

2017六年级信息技术下册教学计划制订教学计划必须按学生的特点制订,不能仿制照搬的计划,只有自己去试着做,摸索出自己的完整方法,才是最有用的。下面应届毕业生考试网小编为大家提供了2017六年级信息技术下册教学计划,…

aop统计请求数量_Spring-Boot+AOP+统计单次请求方法的执行次数和耗时情况-Go语言中文社区...

本篇结合aop(面向切面编程)的特性,对spring-boot项目下后端开发人员所关心的java代码的性能做了一次简单的统计,比如,前端发了一个post请求(一连串数据的保存),到了后端,首先是指定Controller的某个方法做接收&#xf…

xadmin的html文件,django xadmin(2) 在xadmin基础上完成自定义页面

1.在xadmin.py,GlobalSettings中自定义菜单2.自定义视图函数,并获取原来的菜单等一下信息(主要是为了用xadmin的模板),具体的自己看xadmin源码3.在adminx.py中注册路由4.html继承。例:xadmin.py:class GlobalSettings(object):sit…

python教程苹果版_python教程

https://www.xin3721.com/eschool/pythonxin3721/1、安装Homebrewhttps://brew.sh/index_zh-cn.html2、通过brew安装pyenv1)命令行输入:$ brew install pyenv(如果一直卡在Updating Homebrew就按ctrlc一次跳转brew update)2)在home目录的 .bash_profile文件中添加&a…

计算机网络与通信思维导图,用思维导图描述5G场景

随着全球首个5G火车站在上海虹桥火车站启动建设,5G时代离我们越来越近。去年底,工业和信息化部向三大运营商发送了5G系统中低频段试验频率使用许可,5G设备将开始试商用。5G毕竟是新技术,小编今天用思维导图给大家讲解一下5G场景&a…

pytorch 指定卡1_在pytorch中指定显卡

1. 利用CUDA_VISIBLE_DEVICES设置可用显卡在CUDA中设定可用显卡,一般有2种方式:(1) 在代码中直接指定import osos.environ[CUDA_VISIBLE_DEVICES] gpu_ids(2) 在命令行中执行代码时指定CUDA_VISIBLE_DEVICESgpu_ids python3 train.py如果使用sh脚本文件…

计算机学院五名学生开发手语app,大学生团队研发成功“聋人自然手语翻译器”APP...

把语音转换成文字,再将文字翻译成手语,在第25个“全国助残日”到来之际,江苏科技大学的一群平均年龄不到22岁的年轻创业者们,研发出了一款“聋人自然手语翻译器”,为普通人与聋哑群体搭建沟通的桥梁。拿起手机&#xf…

java不同进程的相互唤醒_Java多线程(二)同步与等待唤醒

1:数据安全问题1.1:什么情况下会出现数据安全问题?多个线程对同一个资源进行操作,并且操作资源的语句有多条。那么这个时候这些语句因为cpu的随机性,有可能被多个线程分开执行。导致数据安全问题。例子:有3…

苏州宾馆管理也计算机哪个学校好,苏州十大寄宿式中学学校排名榜

教师的素质目标是什么*的发展离不开教育,教育的发展离不开教师,教师的素质提高关系着民族的未来,教师不仅要教授知识,更重要的是教授做人,以下是小编为您整理的教师的素质目标是什么的相关内容。素质教育目标是提高国民…

aop注解配置切点 spring_Spring通过自定义注解灵活配置AOP切点

package com.lsz.config.enums;import java.lang.annotation.ElementType;import java.lang.annotation.Retention;import java.lang.annotation.RetentionPolicy;import java.lang.annotation.Target;/*** 加载配置注解** author lishuzhen* date 2020/11/4 11:22*/Target(Ele…

电大计算机网考上机操作题,电大计算机上机考试模拟题及答案 (1)

模拟试题模拟试题一:第001题:在Windows中添加”传真服务”.第002题:设置Internet Explorer,对所有官方微软网站不进行安全认证.操作步骤第003题:设置Outlook Express,新邮件.新闻邮件下载5天后即被删除, 当浪费的空间达到40%时压缩邮件,并将存储在C盘DDKS根目录下。…

python中哪个符号用于从包中导入模块__学小易找答案

【简答题】7个积分题【单选题】5. Is it time for the meeting now?【单选题】result lambda x: x * x print(result(5)) 以上代码输出结果为?【其它】第一次作业.docx【简答题】11个求导题!【单选题】18. Where does the woman want to work?【单选题】15. Where does the…

在职人员计算机网络管理总结,关于学校网络管理员个人工作总结

关于学校网络管理员个人工作总结主要工作职责1.按照规定流程开通校园网用户,做好审核与登记工作。2.接听办公室报修电话,负责校园网网络故障报修用户信息登记。3.凭证参加网络故障现场维护(自网络故障报修日起两个工作日内)。4.统计当天网络故障报修数据…