layui弹窗点击事件

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:17

changefileone函数时按钮绑定事件，按钮点击后调用这个函数然后弹出弹出层，加载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');

删除全部
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）也可以直接在子窗口的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
点击事件,弹窗案例,详细见下方转载自http://www.shagua.wiki/project/3?p=119
```
点击事件,弹窗案例,详细见下方
转载自http://www.shagua.wiki/project/3?p=119
```
收起
展开全文
layui的弹窗为啥不出来
2019-11-30 17:09:36
点击事件： ![图片说明](https://img-ask.csdn.net/upload/201911/30/1575104902_252174.png) 这样写的事件，不知道为啥就是不出来 ![图片说明]...
收起
java javascript

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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <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...
收起
mysql php javascript jquery
layui弹出层闪退
2019-12-01 22:33:33
1、弹窗打开事件还未绑定到任何按钮，可是点击form表单中的按钮可以打开我定义的弹出层 2、绑定弹出层到按钮，打开弹窗闪退后面发现真如参考博文所说：我的button也是在form表单中，原因：我在form表单中使用...
收起
【前端-layui-layer】layui弹出层闪退，layer弹出层闪退，layer弹出层坑
2020-02-14 20:30:28
1、弹窗打开事件还未绑定到任何按钮，可是点击form表单中的按钮可以打开我定义的弹出层 2、绑定弹出层到按钮，打开弹窗闪退后面发现真如参考博文所说：我的button也是在form表单中，原因：我在form表单中使用...
收起
jq+layui之table表每行的编辑按钮只能点击触发一次的问题的解决
2019-01-28 15:11:00
　在写好表之后，测试时会发现，当你点击第一行的“修改”，突然不想修改了，关闭了“修改”的弹窗，但是这时候你想到刚才第一行的修改还有地方要修改，你重新点击“修改”按钮，这时候它似乎故意跟你过不去似的，...
收起
layui弹出层闪退，layer弹出层闪退，layer弹出层坑
千次阅读 热门讨论 2018-04-12 14:43:13
1、弹窗打开事件还未绑定到任何按钮，可是点击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:01
1、弹窗打开事件还未绑定到任何按钮，可是点击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按钮，点击的...
收起
layer弹出层闪退
layui+TP5 实现编辑功能
千次阅读 2019-01-25 10:04:24
主要逻辑是点击选择框记录下当前用户的id，弹出弹出层之后直接ajax后台返回该用户id，然后把信息展示到弹出层中，当修改信息的时候绑定事件提交，后台进行验证，通过之后提示消息，关闭弹窗。刷新数据。如果用户...
收起
tp5 后台管理系统代码 thinkphp
layer弹出层闪退_layui弹出层闪退解决_WEB前端开发
2020-12-29 07:12:31
编程中需要注意的地方有：通过二次 pcntl_fork() 以及 posix_setsid 让主进程脱离终端通过 pc今天用layui的弹出层插件，发现绑定弹出层到按钮，打开弹窗会闪退。原因：在form表单中使用了Button按钮，点击的时候...
收起
layer弹出层闪退
layer弹出层闪退
2020-03-26 10:33:35
1、弹窗打开事件还未绑定到任何按钮，但点击form表单中的按钮可以打开定义的弹出层 2、绑定弹出层到按钮，打开弹窗闪退后面发现原因：在form表单中使用了Button按钮，点击的时候会触发默认事件，而form的action没填...
收起
ayui弹出层闪退，layer弹出层闪退，layer弹出层坑
2018-06-25 23:27:00
1、弹窗打开事件还未绑定到任何按钮，可是点击form表单中的按钮可以打开我定义的弹出层 2、绑定弹出层到按钮，打开弹窗闪退后面发现真如参考博文所说：我的button也是在form表单中，原因：原来我在form表单中...
收起
关于bootstrap模态框的思考
2019-03-04 16:33:21
在项目中使用了bootstrap的模态框，在模态框中添加了几个按钮，发现不能用标志位的方法限制按钮的多次点击事件。最终在一个讲模态框卡顿的问题上受到启发，原问题的解决方法如下： “ 找到问题就很好解决了，...
收起
bootstrap 前端

layui文本框填充值_layui弹窗中content的文本框中读取数据

layui弹窗间的传值（layui弹出层传值）(窗口传值)

layui按钮点击事件

layui的弹窗为啥不出来

Layui关闭弹窗返回值的两种方式（一）

关于layui点击右上角关闭弹窗，弹窗内容出现在下方的问题

Layui 新增按钮打开全屏弹窗

Layui 关于在使用Layui弹出层的时候,弹两个窗口时再使用第二次弹窗的时候导致窗口不能点击

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

Layui(二) 主窗体和iframe层（弹窗）相互传值

LayUI数据表格查询与重载

layui弹出层闪退

【前端-layui-layer】layui弹出层闪退，layer弹出层闪退，layer弹出层坑

jq+layui之table表每行的编辑按钮只能点击触发一次的问题的解决

layui弹出层闪退，layer弹出层闪退，layer弹出层坑

layui父类获取子类iframe数据

如何解决layui弹出层闪退的问题

ayui弹出层闪退，layer弹出层闪退，layer弹出层坑(那些年踩过的layui的坑)

layer弹出层闪退_如何解决layui弹出层闪退的问题

layui+TP5 实现编辑功能

layer弹出层闪退_layui弹出层闪退解决_WEB前端开发

layer弹出层闪退

ayui弹出层闪退，layer弹出层闪退，layer弹出层坑

关于bootstrap模态框的思考

layui弹窗点击事件

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