-
layui文本框填充值_layui弹窗中content的文本框中读取数据
2021-01-14 03:44:40使用layui表单处理数据,点击查看时跳出弹框并获取当前行的数据,如何在content的文本框中得到数据,我使用了点击事件,已经能得到相应数据,但是无法将值赋给content的文本框中,如何解决。代码如下:用户 添加...使用layui表单处理数据,点击查看时跳出弹框并获取当前行的数据,如何在content的文本框中得到数据,我使用了点击事件,已经能得到相应数据,但是无法将值赋给content的文本框中,如何解决。
代码如下:
- 用户
添加
用户列表
序号用户名所在部门角色操作
{{item.num}}{{item.name}}
{{item.part}}{{item.source}}
查看
用户名
所在部门
角色
export default{
data(){
return{
users:[
{num:1,name:'111',part:'人事',source:'百度',url:'www.baidu.com'},
{num:2,name:'222',part:'人事',source:'知乎',url:'www.baidu.com'},
{num:3,name:'333',part:'人事',source:'知乎',url:'www.baidu.com'},
{num:4,name:'444',part:'人事',source:'知乎',url:'www.baidu.com'},
{num:5,name:'555',part:'人事',source:'知乎',url:'www.baidu.com'},
{num:6,name:'666',part:'人事',source:'知乎',url:'www.baidu.com'}
],
readonly:true,
}
},
methods:{
openEditLayer(obj){
layer.alert(JSON.stringify(obj));
document.getElementById('username').value=obj.name;
layer.open({
title:'用户信息',
type: 1,
skin: 'layui-layer-rim',
area: ['500px', '300px'],
content: document.getElementById('details').innerHTML
})
}
}
}
可以得到当前行的数据
但是content中无法读取到值
控制台打印值也为空
-
layui弹窗间的传值(layui弹出层传值)(窗口传值)
2019-04-04 10:07:17changefileone函数时按钮绑定事件,按钮点击后调用这个函数然后弹出弹出层,加载changefile.html界面 然后success提前加载changefile的form数据(从主窗口传值到弹出层) //bootstraptable的修改,点击按钮的时候...主要有两部分
1、从主窗口传值到弹出层
2、从弹出层传值到主窗口
3、通过session互传
4、通过调用父窗口的函数从而获取到父窗口的值(相反也是可以的)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里面是用来下拉框加载数据库数据的,可以删掉
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="/Scripts/jquery/jquery.min.js" type="text/javascript"></script> <script src="/Scripts/layer/layer.js" type="text/javascript"></script> <script src="/Scripts/layui/layui.all.js" type="text/javascript"></script> <link rel="stylesheet" href="/Scripts/layui/css/layui.css" /> <script type="text/javascript"> $(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("<option value='" + data.rows[j].menuid + "'>" + data.rows[j].Name + "</option>"); } form.render(); form.on('select', function (data) { //alert(data.value); //console.log(data.value); selectvalue = data.value; console.log(selectvalue); }); }) }) }) </script> </head> <body> <form class="layui-form" id="changefileform"> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 --> <div class="layui-form-item"> <label class="layui-form-label layui-bg-red layui-center">文件名</label> <div class="layui-input-block"> <input type="text" name="filename" placeholder="请输入" autocomplete="off" class="layui-input filename"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label layui-bg-red layui-center">文件路径</label> <div class="layui-input-block"> <input type="text" name="filepath" placeholder="请输入" autocomplete="off" class="layui-input filepath"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label layui-bg-green layui-center">父目录</label> <div class="layui-input-block"> <select name="previousid" id="menuname" lay-search> <option value="" style="width:50px" class="menuid">请选择父目录</option> </select> </div> </div> </form> </body> </html>
2、然后再这个弹出层填写数据,按了确定后就开始加载这个js啦,这个获取数据是通过name属性来获取的,上面 那个的话是通过class名称来获取的
然后controller获取从js传来的数据的话,看我另外的博客
下拉框动态获取数据库数据
下拉框可以搜索
看我其他博客3、通过session传值
设置session
sessionStorage.setItem('roleid', 'hello');
取session
var ss=sessionStorage.getItem('roleid');
删除session中保存指定的值
sessionStorage.removeItem('roleid');
删除全部
4、通过调用父窗口的函数从而获取到父窗口的值, 这个适合获取少量值, 父窗口的js:sessionStorage.clear();
(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)也可以直接在子窗口的js
window.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();
-
layui按钮点击事件
2021-01-11 15:23:29 -
layui的弹窗为啥不出来
2019-11-30 17:09:36点击事件:  这样写的事件,不知道为啥就是不出来 ![图片说明]... -
Layui关闭弹窗返回值的两种方式(一)
2019-08-15 15:43:21根据实际操作小编遇到的返回值方式是两种: ... Layui内有两种点击事件,第一种是jquery中的click方式第二种是按钮监听组的方式,上篇已经做过讲解了,此处不再做过多赘述。废话不多说,直接贴例子总结: ...根据实际操作小编遇到的返回值方式是两种:
1、直接操作打开的窗口获取值
2、操作弹窗打开的子页面返回值
下面就讲解两个实例,以作总结,以不变应万变:
一、直接操作打开的窗口获取值
Layui内有两种点击事件,第一种是jquery中的click方式第二种是按钮监听组的方式,上篇已经做过讲解了,此处不再做过多赘述。废话不多说,直接贴例子总结:
场景:点击input框弹窗显示列表,关闭弹窗选择值填入inout框内。即点击图一到图二的场景
图一 input框
图二 弹窗
1、html页面代码
<div class="layui-row layui-col-xs8"> <label style="margin-top: -1.5%;" class="layui-form-label"> <span class="myspan">*</span>涉案部门及案件性质</label> <input class="layui-col-xs6 layui-input myDialog" type="text" id="caseNature" name="caseNature" required lay-verify="required" style="width: 75%;" placeholder="请选择涉案部门及案件性质" autocomplete="off" data-type="selectCaseNature"> </div>
2、js代码
此处同样还是用的按钮监听组激活弹窗的方式。
var panelaction = { selectCaseNature:function () {//选择涉案部门属性 var tit = '涉案部门性质'; var url = 'case_nature.html'; var index = larryms.open({ title: tit, type: 2, shadeClose: false, area: ['763px', '460px'], content: url, btn: ['确定','关闭'], yes: function(index){ //当点击‘确定'按钮的时候,获取弹出层返回的值 var iframeWindow = window['layui-layer-iframe'+ index]; var checkStatus = iframeWindow.layui.table.checkStatus('case_nature'); var data = checkStatus.data; if(data.length==1){ layer.msg(data[0].caseNature); $("#caseNature").html(data[0].caseNature); }else{ layer.msg("请选择一个值!"); } //最后关闭弹出层 layer.close(index); }, cancel: function(){ //右上角关闭回调 } }); } }
做一下总结,先通过var iframeWindow锁定当前的弹窗,然后再通过checkStatus获取状态,再一句状态的obj锁定data属性来做数据逻辑的判断以及操作。
3、此处为了方便自己使用,子页面也做一下记录
3-1 html页面
此处一定要把要操作的放在“内容了”和“内容结束哦”两标签之内,因为不加的话弹窗样式会不好看(此处仅针对我本地做描述,各位看官按照自己的情况调样式即可)
<!-- 面板 --> <div class="layui-row larryms-panel"> <div class="larry-container"> <div class="layui-row layui-col-space15 larryms-data-top"> <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12"> <section class="layui-card"> <!-- <div class="layui-card-header">涉案人员列表</div>--> <div class="layui-card-body"> <!-- 内容了 --> <table id="case_nature" name="case_nature" lay-filter="case_nature" data-url="../../../../larryms/data/letters_query.json"></table> <!-- 内容结束哦 --> </div> </section> </div> </div> </div> </div>
3-2 js 代码
即一个控制列表展示的js。
var table; var larryms; layui.define(['jquery', 'table', 'larryms','forms'], function(exports) { var $ = layui.$, forms = layui.forms; table = layui.table; larryms = layui.larryms; //接收案件 var mUrl_accept = $('#case_nature').data('url'); //mUrl = dataportal_caseQuery; mIns_accept = table.render({ elem: '#case_nature', id: "case_nature", cellMinWidth: 95, url: mUrl_accept, method: 'get', height: "full-100", page: true, limits: [15, 30, 45, 60, 75, 90, 105, 120], limit: 15, response: { //定义后端 json 格式,详细参见官方文档 statusName: 'code', //状态字段名称 statusCode: 200, //状态字段成功值 msgName: 'msg', //消息字段 countName: 'count', //总数字段 dataName: 'data' //数据字段 }, cols: [ [ { type: "radio", fixed: 'center', width: 60 }, { type: "numbers", fixed: 'center', title: '序号', width: 60 }, { field: 'caseNature', title: '性质', minWidth: 100, align: 'center' }] ] }); });
由于篇幅过长,第二种方法置于下一面文章进行总结讲解。
-
关于layui点击右上角关闭弹窗,弹窗内容出现在下方的问题
2018-03-20 16:35:18问题描述:单纯的使用编辑弹窗,关闭事件不会有任何问题,...出现点击弹窗右上角的“x”,内容出现在底部的现象。解决方法:在初始化弹层的时候,就把事件写好。比如layer.open({ type: 1, title:'编辑', closeBt... -
Layui 新增按钮打开全屏弹窗
2019-10-11 11:04:52备注:1、给按钮绑定点击事件。 2、content 的值为html的路径,我这里使用的是请求跳转的方式。 $("#addMoreDevice").on('click', function() { var index = layui.layer.open({ title : "播出单新增", type : 2,... -
Layui 关于在使用Layui弹出层的时候,弹两个窗口时再使用第二次弹窗的时候导致窗口不能点击
2018-10-05 00:55:57所以就导致在代码上一个按钮绑定了两次click时间,在第一次使用过后,再去使用的时候会导致第一次的事件也会执行,页面上会多弹出一个窗口导致页面无法点击,解决方法就是在你弹出第二层窗口中使用$("div.layui-... -
layui 传递前端请求_layui弹出层如何传值?
2020-12-20 19:02:37下面本篇文章给大家介绍一下layui弹窗间的传值(layui弹出层传值)(窗口传值)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。主要有两部分从主窗口传值到弹出层从弹出层传值到主窗口通过session... -
Layui(二) 主窗体和iframe层(弹窗)相互传值
2019-12-10 16:38:59为了简练和减少编写时间,直接上代码(好吧,我承认...data-type——绑定事件 (备注:事件名随便定义,但必须和JS中的事件名一致) <textarea placeholder="请输入内容" class="layui-textarea" id="permi... -
LayUI数据表格查询与重载
2020-02-10 15:14:41查询功能模块的工作流程是: 在输入框中输入关键字,点击查询按钮,数据传输到服务端。 服务端接收到数据,进行查询后将数据...编写输入框与查询按钮,监听按钮点击事件。 <div class="layui-inline layui-sho... -
layui弹出层闪退
2019-12-01 22:33:331、弹窗打开事件还未绑定到任何按钮,可是点击form表单中的按钮可以打开我定义的弹出层 2、绑定弹出层到按钮,打开弹窗闪退 后面发现真如参考博文所说:我的button也是在form表单中,原因: 我在form表单中使用... -
【前端-layui-layer】layui弹出层闪退,layer弹出层闪退,layer弹出层坑
2020-02-14 20:30:281、弹窗打开事件还未绑定到任何按钮,可是点击form表单中的按钮可以打开我定义的弹出层 2、绑定弹出层到按钮,打开弹窗闪退 后面发现真如参考博文所说:我的button也是在form表单中,原因: 我在form表单中使用... -
jq+layui之table表每行的编辑按钮只能点击触发一次的问题的解决
2019-01-28 15:11:00在写好表之后,测试时会发现,当你点击第一行的“修改”,突然不想修改了,关闭了“修改”的弹窗,但是这时候你想到刚才第一行的修改还有地方要修改,你重新点击“修改”按钮,这时候它似乎故意跟你过不去似的,... -
layui弹出层闪退,layer弹出层闪退,layer弹出层坑
2018-04-12 14:43:131、弹窗打开事件还未绑定到任何按钮,可是点击form表单中的按钮可以打开我定义的弹出层 2、绑定弹出层到按钮,打开弹窗闪退 后面发现真如参考博文所说:我的button也是在form表单中,原因: 我在form表单中... -
layui父类获取子类iframe数据
2019-04-18 19:28:43需求如下 一个普通的表格页面,需要通过弹窗出现高级搜索iframe页面,高级搜索里面的表单点击搜索按钮,把...在弹窗返回函数中监控搜索按钮点击事件。 $("#seach").on("click",function(){ // 搜索弹窗 layer.op... -
如何解决layui弹出层闪退的问题
2020-07-17 12:00:57今天用layui的弹出层插件,发现绑定弹出层到按钮,打开弹窗会闪退。 原因:在form表单中使用了Button按钮,点击的时候会触发默认事件,而form的action我没填,所以就是弹出层会闪退! 解决办法: 方法一:将button... -
ayui弹出层闪退,layer弹出层闪退,layer弹出层坑(那些年踩过的layui的坑)
2019-05-09 12:00:011、弹窗打开事件还未绑定到任何按钮,可是点击form表单中的按钮可以打开我定义的弹出层 2、绑定弹出层到按钮,打开弹窗闪退 我的button也是在form表单中,原因: 原来我在form表单中使用了Button按钮,点击的... -
layer弹出层闪退_如何解决layui弹出层闪退的问题
2020-12-29 07:12:29如何解决layui弹出层闪退的问题发布时间:2020-06-16 18:44:41来源:亿速云阅读:183作者:元一问题:今天用layui的弹出层插件,发现绑定弹出层到按钮,打开弹窗会闪退。原因:在form表单中使用了Button按钮,点击的... -
layui+TP5 实现编辑功能
2019-01-25 10:04:24主要逻辑是点击选择框记录下当前用户的id,弹出弹出层之后直接ajax后台返回该用户id,然后把信息展示到弹出层中,当修改信息的时候绑定事件提交,后台进行验证,通过之后提示消息,关闭弹窗。刷新数据。 如果用户... -
layer弹出层闪退_layui弹出层闪退解决_WEB前端开发
2020-12-29 07:12:31编程中需要注意的地方有: 通过二次 pcntl_fork() 以及 posix_setsid 让主进程脱离终端 通过 pc今天用layui的弹出层插件,发现绑定弹出层到按钮,打开弹窗会闪退。原因:在form表单中使用了Button按钮,点击的时候... -
layer弹出层闪退
2020-03-26 10:33:351、弹窗打开事件还未绑定到任何按钮,但点击form表单中的按钮可以打开定义的弹出层 2、绑定弹出层到按钮,打开弹窗闪退 后面发现原因:在form表单中使用了Button按钮,点击的时候会触发默认事件,而form的action没填... -
ayui弹出层闪退,layer弹出层闪退,layer弹出层坑
2018-06-25 23:27:001、弹窗打开事件还未绑定到任何按钮,可是点击form表单中的按钮可以打开我定义的弹出层 2、绑定弹出层到按钮,打开弹窗闪退 后面发现真如参考博文所说:我的button也是在form表单中,原因: 原来我在form表单中... -
关于bootstrap模态框的思考
2019-03-04 16:33:21在项目中使用了bootstrap的模态框,在模态框中添加了几个按钮,发现不能用标志位的方法限制按钮的多次点击事件。 最终在一个讲模态框卡顿的问题上受到启发,原问题的解决方法如下: “ 找到问题就很好解决了,...
-
spark大数据分析与实战
-
图的遍历
-
基于Qt的LibVLC开发教程
-
源码分析-HashMap
-
Nonpolarizing guide-mode resonance filter with ultra-narrow linewidth
-
AndroidAssistant_test.zip
-
浅析JavaScript的事件代理和委托
-
为什么说要搞定微服务架构,先搞定RPC框架?
-
ELF视频教程
-
MySQL Router 实现高可用、负载均衡、读写分离
-
Ubuntu 下的 Java 环境配置
-
C++代码规范和Doxygen根据注释自动生成手册
-
NFS 实现高可用(DRBD + heartbeat)
-
Unity ILRuntime框架设计
-
awesomium_v1.6.6_sdk_win(markdown).rar
-
在 Linux 上构建企业级 DNS 域名解析服务
-
2021-02-26
-
一种MySQL到HBase的迁移策略的研究与实现
-
强化学习的学习之路(二十七)_2021-01-27:Q-learning with continuous actions
-
Buffer count exceeding default GL_MAX_SHADER_STORAGE_BUFFER_BINDINGS. Shader might not work on all h