精华内容
下载资源
问答
  • 今天小编就为大家分享一篇Layui弹出层 加载 做编辑页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui弹出层按钮提交iframe表单的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layer是一款近年来备受青睐的web弹层组件,这篇文章主要介绍了layui弹出层效果的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Layui弹出修改删除

    千次阅读 2019-08-16 18:20:18
    班级修改和删除(修改用到了弹出层) 弹出层页面 <div class="layui-input-block layui-form" id="modifyClass" lay-filter="updateClass" style="margin-top: 30px""> <form class="layui-...

    班级修改和删除(修改用到了弹出层)

    在这里插入图片描述

    • 弹出层页面
    <div class="layui-input-block layui-form" id="modifyClass"
    		lay-filter="updateClass" style="margin-top: 30px"">
    		<form class="layui-form" action="" lay-filter="example">
    			<div class="layui-form-item">
    				<div class="layui-inline">
    					<label class="layui-form-label">年级</label>
    					<div class="layui-input-inline">
    						<input type="text" class="layui-input" name="grade1" id="grade1"
    							placeholder="例:2016" readonly="true">
    					</div>
    				</div>
    			</div>
    			<div class="layui-form-item">
    				<label class="layui-form-label">班级编号</label>
    				<div class="layui-input-inline">
    					<input type="text" name="classid1" required lay-verify="required" readonly="true"
    						placeholder="请输入班级编号" autocomplete="off" class="layui-input"
    						id="classid1">
    				</div>
    			</div>
    			<div class="layui-form-item">
    				<label class="layui-form-label">班级名称</label>
    				<div class="layui-input-inline">
    					<input type="text" name="classname1" id="classname1" required
    						lay-verify="required" placeholder="请输入班级名称" autocomplete="off"
    						class="layui-input">
    				</div>
    				<!-- <div class="layui-form-mid layui-word-aux">辅助文字</div> -->
    			</div>
    			<div class="layui-form-item">
    				<label class="layui-form-label">专业</label>
    				<div class="layui-input-inline">
    					<select name="majorid" lay-verify="required" id="majorid1"
    						lay-filter="majorid1">
    						<option value="">请选择</option>
    					</select>
    				</div>
    			</div>
    
    			<div class="layui-form-item">
    				<div class="layui-input-block">
    					<button class="layui-btn" lay-submit="" lay-filter="enmodify">确认修改</button>
    				</div>
    			</div>
    		</form>
    	</div>
    
    • 主页面的js(其中content: ‘./displayClass.html’, 即为引入弹出层页面;success: function(layero, index){…} …即为给弹出层页面内容赋值)
    //监听 修改、删除行事件
    	table.on('tool(table1)',function(obj){
    	    var data1 = obj.data;
    	  	if(obj.event === 'del'){
    	      	layer.confirm('想好要删除了么?', function(index){
    	    	  	$.ajax({
    	    			url:"../../ClassesDeleteServlet",
    	    		  	data:{"classid": data1.classid},
    	    			type:"post",
    	    			dataType:"json",
    	    		  	success:function (data) {
    	    			 	if (data == 0) {
    	    				    layer.msg('删除失败!',{icon:5,offset:"auto",time:2000});//提示框
    					  	}else{
    						    layer.msg('删除成功!',{icon:6,offset:"auto",time:2000});//提示框
    					  	}
    	    		 	}  
    	    	 	});  
    	            return false; 
    	     	});
    	    } else if(obj.event === 'edit'){
    	    	layer.open({
    	    		type: 2
    	    		,title: "修改班级信息"
    	    		,area: ['45%', '70%']
    	    		,content: './displayClass.html',
    	    		success: function(layero, index){
    	    			var body = layer.getChildFrame('body', index);
    	    		    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象
    	    		    body.find('#classid1').val(data1.classid);
    	    		    body.find('#classname1').val(data1.classname);
    	    		    body.find('#grade1').val(data1.grade);
    	    		    
    	    		    //为弹框页面专业下拉框赋值
    	    		    $.ajax({
    	    				url : '../../MajorFindAllServlet?deptid=5',
    	    				dataType : 'json',
    	    				data : {
    	    					'state' : 0
    	    				}, //查询状态为正常的所有机构类型
    	    				type : 'post',
    	    				success : function(data) {
    	    					$.each(data, function(index, item) {
    	    						if (item.majorid == data1.majorid) {
    	    							body.find('#majorid1').append($("<option>").attr("value",item.majorid).attr("selected","selected").text(item.majorname));
    								}else  {
    									body.find('#majorid1').append($("<option>").attr("value",item.majorid).text(item.majorname));
    								}
    	    					});
    	    					iframeWin.layui.form.render("select");
    	    				}
    	    			});
    	    		  }
    	    	 });
    	    };
    	})
    
    • 弹出层提交表单监听(layer.msg(‘修改成功!’,{icon:6,offset:“auto”,time:2000});//提示框2秒自动消失)
    form.on('submit(enmodify)',function(data){
    				$.ajax({
    					url:'../../ClassUpdateServlet',
    					data:{
    						classid:$("#classid1").val(),
    						classname:$("#classname1").val(),
    						grade:$("#grade1").val(),
    						majorid:$("#majorid1").val()
    					},
    					success:function(data){
    						if (data == 0) {
    							layer.msg('修改失败!',{icon:5,offset:"auto",time:2000});//提示框
    						}else  {
    							layer.msg('修改成功!',{icon:6,offset:"auto",time:2000});//提示框
    						}
    						
    						setTimeout(function(){
    							var index = parent.layer.getFrameIndex(window.name);
    							parent.layer.close(index);//关闭弹出层
    							parent.location.reload();//重新加载父页面表格
    						}, 2100);
    					}
    				})
    				return false;
    			});
    
    展开全文
  • 切图附件
  • layui弹出层中添加文本框

    千次阅读 2019-08-09 09:55:48
    有时候,我们需要针对,审核时给出原因这一需求,在弹出层添加文本框,比如 这时候就用到了 layer.prompt() var remarkReason = ""; layer.prompt({ formType: 0, value: '', title: '请输入不通过原因',...

    有时候,我们需要针对,审核时给出原因这一需求,在弹出层添加文本框,比如

    这时候就用到了

    layer.prompt()
    var remarkReason = "";
            layer.prompt({
                formType: 0,
                value: '',
                title: '请输入不通过原因',
                btn: ['确定','取消'], //按钮,
                btnAlign: 'c'
            }, function(value,index){
                remarkReason = value;
                layer.close(index);
                    //执行不通过
                    var ids = "";
                    for (var i = 0; i < data.length; i++) {
                        ids += data[i].id + ",";
                    }
                    $.ajax({
                        type: 'POST',
                        url: "/ipmcenter/wechatexamine/noPass",
                        data: {
                            ids: ids,
                            remarkReason: remarkReason
                        },
                        dataType: "json",
                        success: function (data) {
    
                            if(data.code == 0){
                                layer.msg(data.data, {icon: 1});
                                table.reload(We.tableId);
                                $.ajax({
                                    type: 'POST',
                                    url: "/ipmcenter/wechatexamine/examineLog",
                                    data: {
                                        ids: ids
                                    },
                                    dataType: "json",
                                    success: function (data) {
                                        if(data.code == 0){
                                            //layer.msg(data.data, {icon: 1});
                                            //table.reload(ExamineLog.tableId);
                                            // table.reload(ExamineLog.tableId,{
                                            //         page: {
                                            //             curr: 1 //重新从第 1 页开始
                                            //         }
                                            //         ,where: {
                                            //
                                            //             ids: ids
                                            //         }
                                            //     }
                                            // );
    
                                        } else {
                                            //layer.msg(data.data, {icon: 2});
    
                                        }
    
                                    }
                                });
    
                            } else {
                                layer.msg(data.data, {icon: 2});
    
                            }
    
                        }
                    });
            },function (value,index) {
    
            });

     

    展开全文
  • layui弹出输入框

    千次阅读 2019-07-23 14:57:22
    <script> layui.use('layer', function(){ //独立版的layer无需执行这一句 var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句 var f = {$server.f}; if(f==0){ l...
    <script>
        layui.use('layer', function(){ //独立版的layer无需执行这一句
            var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
            var f = {$server.f};
            if(f==0){
                layer.open({
                    id:1,
                    type: 1,
                    title:'修改密码',
                    skin:'layui-layer-rim',
                    area:['450px', 'auto'],
                    closeBtn :0,//右上角的关闭按钮取消
                    content: ' <div class="row" style="width: 420px;  margin-left:7px; margin-top:10px;">'
                    +'<div class="col-sm-12">'
                    +'<div class="input-group">'
                    +'<span class="input-group-addon"> 新 密 码   :</span>'
                    +'<input id="firstpwd" type="password" class="form-control" placeholder="请输入密码">'
                    +'</div>'
                    +'</div>'
                    +'<div class="col-sm-12" style="margin-top: 10px">'
                    +'<div class="input-group">'
                    +'<span class="input-group-addon">确认密码:</span>'
                    +'<input id="secondpwd" type="password" class="form-control" placeholder="请再输入一次密码">'
                    +'</div>'
                    +'</div>'
                    +'</div>'
                    ,
                    btn:['保存'],
                    btn1: function (index,layero) {
                        var firstpwd = $('#firstpwd').val();
                        var secondpwd = $('#secondpwd').val();
                        if(firstpwd != secondpwd){
                            layer.msg('密码不一致', {time: 1500, anim: 6});
                        }else{
                            $.post("{:url('index/edit')}", { firstpwd: firstpwd,'secondpwd':secondpwd},
                                function(data){
                                    if(data.code==1){
                                        layer.msg(data.msg, {time: 1500}, function () {
                                            window.location.href = data.url;
                                        });
                                    }else{
                                        layer.msg(data.msg, {time: 1500, anim: 6});
                                    }
                                });
                        }
                    }
                });
            }
    
        })
    </script>

     

    展开全文
  • Layui弹出层 加载 做编辑页面

    万次阅读 2018-05-19 14:30:55
    先上效果图基本准备,引入layuilayui.css,layui.js文件 &lt;link rel="stylesheet" href="../../../Publics/others/layui/css/layui.css" media="all"&gt; &lt;script...

    layui是一款优秀的模块化前端框架。利用layui弹出层做编辑页面

    先上效果图



    基本准备,引入layui的layui.css,layui.js文件

        <link rel="stylesheet" href="../../../Publics/others/layui/css/layui.css" media="all">
        <script src="../../../Publics/others/layui/layui.js"></script>

    Js方法

    /**
     * 页面内弹出编辑窗口 //需要引入 layui.js layui.css文件
     * @param {} title 标题 不显示为false
     * @param {} area 大小 ["400px","500px"] 或者 "400px"--->只设置宽度
     * @param {} path 弹出页面路径
     * @param {} sucFunName 执行保存操作后再弹出页面中的保存方法名称
     * @param {} callBack 执行保存操作之后的其他操作
     * @returns {} 
     */
    function openDetial(title, area, path, sucFunName, callBack) {
        layer.open({
            type: 2,
            title: title, //不显示标题栏
            closeBtn: 2,
            area: area,
            shade: 0.8,
            id: (new Date()).valueOf(), //设定一个id,防止重复弹出 时间戳1280977330748
            btn: ['保存', '取消'],
            btnAlign: 'r',
            moveType: 1, //拖拽模式,0或者1
            content: path,
            yes: function (index, layero) {
                var btn = layero.find('.layui-layer-btn').find('.layui-layer-btn0');
                alert("-----");
                try {
                    var _ifr = btn[0].parentNode.parentNode.getElementsByClassName("layui-layer-content")[0].children[0].contentWindow ||
                         btn[0].parentNode.parentNode.getElementsByClassName("layui-layer-content")[0].children[0].children[0].contentWindow;
                    var func = new Function('_ifr', "return _ifr." + sucFunName + "();");
                    var flg = func(_ifr);
                    if (flg == false) {
                        return false;
                    } else {
                        if (callBack != null) callBack();
                        window.location.reload();
                    }
                } catch (ex) {
    
                }
            },
            btn2: function (index, layero) {
            }
        });
    }
    //
    

    以下是测试页面 测试页面中具备保存方法ApplicationSave() 


    <!--// ========================================================================
    // Author              :    Jp
    // Email               :    1427953302@qq.com/dongmingzhixiu@outlook.com
    // Create Time         :    2018-4-22 15:53:38
    // Update Time         :    2018-4-22 15:53:43
    // =========================================================================
    // CLR Version         :    4.0.30319.42000
    // Class Version       :    v1.0.0.0
    // Class Description   :    编辑页面
    // Computer Name       :    Jp
    // =========================================================================
    // Copyright ©JiPanwu 2017 . All rights reserved.
    // ==========================================================================
    -->
    <!DOCTYPE html>
    
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta name="viewport" content="width =device-width, initial-scale=1"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta http-equiv="Content-Language" content="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <title>JpAutoFramework</title>
        <meta content="victor" name="author"/>
         <script type="text/javascript">
            function ApplicationSave() {
                //具体保存操作
                //需要返回值,保存成功,返回true,保存失败返回false
    
            }
        </script>
        
    </head >
    
    <body οnlοad="load()" style="margin: auto">
    <form>
        <table id="data" class="editorTable" style="margin: auto; margin-top: 50px; width: 80%;">
            <tr style="display: none;">
                <th> 编号 </th>
                <td> <input type="text" readonly="readonly" id="ID" /></td>
            </tr>
            <tr>
                <th> 项目名称 </th>
                <td> <input type="text" id="Names"  /></td>
            </tr>
            <tr>
                <th> 金额 </th>
                <td> <input type="text" id="PRICE" /></td>
            </tr>
            <tr>
                <th> 账目类型 </th>
                <td>
                    <select type="text" id="ISOUT">
                        <option value="0">支出</option>
                        <option value="1">收入</option>
                        <option value="2">信用卡消费</option>
                        <option value="3">信用卡还款</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th> 日期 </th>
                <td> <input type="text" id="Dates" /></td>
            </tr>
            <tr>
                <th> 描述 </th>
                <td>
                    <textarea rows="10" cols="38" id="Remark"></textarea>
                </td>
            </tr>
        </table>
    </form>
    </body >
    </html >

    调用 如下参数中的ApplicationSave和编辑页面的方法名一致

    openDetial("列表维护", ['600px', '550px'], "./editor.html", "ApplicationSave", function() {alert("执行完了");});

    有兴趣的小伙伴,可以试试



                //具体保存操作
    展开全文
  • 如何更改layui弹出层样式

    千次阅读 2018-07-12 16:07:11
    然后设置layui弹出层内容: layer.open({ skin: 'alert-skin',//弹出层皮肤,可自定义也可用官方 title: ['导出字段选择', 'color:rgb(139, 181, 219);'],//弹出层title,数组右半部份设置title样式 area: 'auto'...
  • js: skin: 'title-style-add',//自定义样式名 ....title-style-add .layui-layer-title { /*弹出层title样式*/ background-color: #1e9fff; } 官网有更多的操作 弹出层官网组件地址:https://layer.layui.com/
  • layui弹出修改颜色

    千次阅读 2020-04-16 17:09:16
    本人在开发后台页面的时候,提示用户批量删除的数据时,为了惊醒一点儿先把文字改成红色提醒,看了layui文档,... 如图所示用layer.style来修饰,后面的XXX是你定义的弹出层变量名,如 var index= layer.confirm('...
  • Layui弹出层自动关闭并刷新父页面

    千次阅读 2019-08-25 10:30:27
    弹出层提交表单 //监听提交 form.on('submit(enadd)', function(data) { $.ajax({ url : '../../user/UserInsertServlet', dataType : 'json', data : $(data.form).serialize(), type : 'post', ...
  • layui弹窗间的传值(layui弹出层传值)(窗口传值)

    万次阅读 多人点赞 2019-04-04 10:07:17
    1、从主窗口传值到弹出层 2、从弹出层传值到主窗口 1、从主窗口传值到弹出层 首先时js changefileone函数时按钮绑定事件,按钮点击后调用这个函数然后弹出弹出层,加载changefile.html界面 然后success提前加载...
  • 由于近期需调整接口,所以需要在一个容易误操作的地方添加一个验证功能,然后请我们的前端做了一个基于LayUI弹出层框架 //点击按钮触发弹窗 $('#topBoxContent').on("click"," .t_cont_button:not(.ban)",...
  • layui 弹出层和提交表单

    万次阅读 2018-07-18 11:43:14
    在点击修改按钮的时候,content 路径CPTL/ +curId ,路径中的curid 是当前信息的ID,弹窗跳出当前的数据信息   2.  把提交的按钮写在子页面里面,这里没有用layui 自带的yes:function(),   3....
  • 在父界面中修改子界面的值以及如何刷新子界面的select选中和回显
  • layui弹出层使用心得

    2020-10-21 16:03:01
    layui.use(['upload','layer'], function(){ var upload = layui.upload,layer = parent.layer === undefined ? layui.layer : parent.layer; upload.render({ elem: '#test3', url: "<?=yii\helpers\Url::...
  • layui弹出层按钮回调

    千次阅读 2020-08-02 21:26:34
    ,content: ‘导入数据有错误,请查看下载文件列表中错误导出文件数据,修改后重新上传’ ,btn: [‘确认’] , success: function () { window.location.href = excelUrl; } ,yes: function(index, layero){ window....
  • 文章目录layui弹出层:icon图标小结表格示下:调用代码 · 效果图 · 示下: layui弹出层:icon图标小结 layui的弹框插件layer中,有很多不同场景需要的弹框icon图标,今天小结一下,方便以后使用; 官方文档...
  • layui关闭弹出层 layer.msg(‘此元素下没有子菜单!’); layui关闭弹出层 1.关闭特定层 //当你想关闭当前页的某个层时 var index = layer.open(); var index = layer.alert(); var index = layer.load(); var index...
  • layui弹出层,数据回显

    千次阅读 2020-04-06 18:45:15
    1、效果图 2、具体操作 function openUpdateEquipmentAccident(data) {//data为当前行数据,即点击修改的那一行 ... title: '修改人身事故信息', content: $("#updateDiv"), area: ['80...
  • Jquery必须大于1.83 ...input id=about type=button value=修改考勤 class=layui-btn layui-btn-normal /> 主要js代码 [removed] $('input#about').on('click', function () { layer.confirm('是
  • html:按钮外层div一定要写id,button要写type=“button”和data-...<div **id="layerDemo**" style="margin-top:10px "> <button type="button" class="layui-btn layui-btn-sm" data-method="notice"...
  • }, success : function() {} 这是一个弹出层的页面,在layui中,点击“添加”功能键之后弹出这个页面。但是有一种情况, 是当我们点击X,关闭这个页面,可能会导致,修改页面的某些数据不显示,如:描述; 所以,...
  • 关于layui中iframe弹出层type:2的一些使用 主要实现的效果如图 主页面点击 弹出 主页面使用js函数传id值 <button type="button" class="layui-btn layui-btn-normal" id="out" th:if="${chemical.stock} != '0'...
  • 1)在弹出层的操作: //这里是提交操作_弹出层 $.ajax({ url:'/conpany.php?g=Conpany&c=Device&a=deviceCz', type:'get', data:data.field, dataType:"json", success:function(data){ if(dat...
  • layui弹出框confirm自定义样式 增加skin参数,自定义皮肤样式。 效果图
  • 代码如下: 解决方案:
  • 4、使用backgound可以设置多个背景图的特性,设置九个分区的背景图 完事代码 .layui-layer,.layui-layer-title{ background-color: transparent !important; color: white !important; border-bottom: 0px solid #...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,248
精华内容 899
关键字:

layui弹出修改