精华内容
下载资源
问答
  • 使用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中无法读取到值

    控制台打印值也为空

    展开全文
  • 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

    展开全文
  • 点击事件: ![图片说明](https://img-ask.csdn.net/upload/201911/30/1575104902_252174.png) 这样写的事件,不知道为啥就是不出来 ![图片说明]...
  • 根据实际操作小编遇到的返回值方式是两种: ... 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'
                }]
            ]
        });
    
    
    });

            由于篇幅过长,第二种方法置于下一面文章进行总结讲解。

    展开全文
  • 问题描述:单纯的使用编辑弹窗,关闭事件不会有任何问题,...出现点击弹窗右上角的“x”,内容出现在底部的现象。解决方法:在初始化弹层的时候,就把事件写好。比如layer.open({ type: 1, title:'编辑', closeBt...
  • 备注:1、给按钮绑定点击事件。 2、content 的值为html的路径,我这里使用的是请求跳转的方式。 $("#addMoreDevice").on('click', function() { var index = layui.layer.open({ title : "播出单新增", type : 2,...
  • 所以就导致在代码上一个按钮绑定了两次click时间,在第一次使用过后,再去使用的时候会导致第一次的事件也会执行,页面上会多弹出一个窗口导致页面无法点击,解决方法就是在你弹出第二层窗口中使用$("div.layui-...
  • 下面本篇文章给大家介绍一下layui弹窗间的传值(layui弹出层传值)(窗口传值)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。主要有两部分从主窗口传值到弹出层从弹出层传值到主窗口通过session...
  • 为了简练和减少编写时间,直接上代码(好吧,我承认...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:33
    1、弹窗打开事件还未绑定到任何按钮,可是点击form表单中的按钮可以打开我定义的弹出层 2、绑定弹出层到按钮,打开弹窗闪退 后面发现真如参考博文所说:我的button也是在form表单中,原因: 我在form表单中使用...
  • 1、弹窗打开事件还未绑定到任何按钮,可是点击form表单中的按钮可以打开我定义的弹出层 2、绑定弹出层到按钮,打开弹窗闪退 后面发现真如参考博文所说:我的button也是在form表单中,原因: 我在form表单中使用...
  •  在写好表之后,测试时会发现,当你点击第一行的“修改”,突然不想修改了,关闭了“修改”的弹窗,但是这时候你想到刚才第一行的修改还有地方要修改,你重新点击“修改”按钮,这时候它似乎故意跟你过不去似的,...
  • 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的弹出层插件,发现绑定弹出层到按钮,打开弹窗会闪退。 原因:在form表单中使用了Button按钮,点击的时候会触发默认事件,而form的action我没填,所以就是弹出层会闪退! 解决办法: 方法一:将button...
  • 1、弹窗打开事件还未绑定到任何按钮,可是点击form表单中的按钮可以打开我定义的弹出层 2、绑定弹出层到按钮,打开弹窗闪退 我的button也是在form表单中,原因: 原来我在form表单中使用了Button按钮,点击的...
  • 如何解决layui弹出层闪退的问题发布时间:2020-06-16 18:44:41来源:亿速云阅读:183作者:元一问题:今天用layui的弹出层插件,发现绑定弹出层到按钮,打开弹窗会闪退。原因:在form表单中使用了Button按钮,点击的...
  • layui+TP5 实现编辑功能

    千次阅读 2019-01-25 10:04:24
    主要逻辑是点击选择框记录下当前用户的id,弹出弹出层之后直接ajax后台返回该用户id,然后把信息展示到弹出层中,当修改信息的时候绑定事件提交,后台进行验证,通过之后提示消息,关闭弹窗。刷新数据。 如果用户...
  • 编程中需要注意的地方有: 通过二次 pcntl_fork() 以及 posix_setsid 让主进程脱离终端 通过 pc今天用layui的弹出层插件,发现绑定弹出层到按钮,打开弹窗会闪退。原因:在form表单中使用了Button按钮,点击的时候...
  • layer弹出层闪退

    2020-03-26 10:33:35
    1、弹窗打开事件还未绑定到任何按钮,但点击form表单中的按钮可以打开定义的弹出层 2、绑定弹出层到按钮,打开弹窗闪退 后面发现原因:在form表单中使用了Button按钮,点击的时候会触发默认事件,而form的action没填...
  • 1、弹窗打开事件还未绑定到任何按钮,可是点击form表单中的按钮可以打开我定义的弹出层 2、绑定弹出层到按钮,打开弹窗闪退 后面发现真如参考博文所说:我的button也是在form表单中,原因: 原来我在form表单中...
  • 在项目中使用了bootstrap的模态框,在模态框中添加了几个按钮,发现不能用标志位的方法限制按钮的多次点击事件。 最终在一个讲模态框卡顿的问题上受到启发,原问题的解决方法如下: “ 找到问题就很好解决了,...

空空如也

空空如也

1 2
收藏数 25
精华内容 10
关键字:

layui弹窗点击事件