layui iframe弹出层编辑表格及radio数据回显

最新推荐文章于 2023-10-21 09:50:49 发布

RedMapleGI

最新推荐文章于 2023-10-21 09:50:49 发布

阅读量1.5k

点赞数 7

分类专栏： layui 文章标签： layui jquery

本文为博主原创文章，任何形式转载请标名出处或附带原文链接！

本文链接：https://blog.csdn.net/qq_34846877/article/details/116003689

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Layui 介绍

layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。
其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。

一Layui 官方提供的更新渲染

layui文档-表单更新渲染：https://www.layui.com/doc/modules/form.html#render
【重点】核心要点：在于获取要编辑当前页面的窗口及元素，再进行回显赋值和渲染。
在这里插入图片描述

二本地效果图

在这里插入图片描述

三JS核心代码

核心要点：在于获取要编辑当前页面的窗口及元素，再进行回显赋值和渲染。

table.on('tool(currentTableFilter)', function (obj) {
			console.log(obj);
            var data = obj.data;
			// console.log(data.username);
            if (obj.event === 'edit') {
                var index = layer.open({
                    title: '编辑用户',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: 'table/edit.html',
					success: function(layero, index) {
						//需要找到它的子窗口body
						var updateBody = layer.getChildFrame('body', index); 
						// // 给子窗口元素赋值
						updateBody.find("input[name=id]").val(data.id);
						updateBody.find("input[name=username]").val(data.username);
						updateBody.find("input[name=city]").val(data.city);
						updateBody.find("input[name=sign]").val(data.sign);
						updateBody.find("input[name=experience]").val(data.experience);
						updateBody.find("input[name=score]").val(data.score);
						updateBody.find("input[name=classify]").val(data.classify);
						updateBody.find("input[name=wealth]").val(data.wealth);
						
						// 单选按钮特殊处理
						updateBody.find("input[name=sex][value="+data.sex+"]").attr("checked", "checked");
						// 获取content窗口后再渲染
						var updateWin = layero.find('iframe')[0].contentWindow;
						updateWin.layui.form.render("radio");
					}	
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
					$.ajax({
						type: "get",
						dataType: "json",
						url: "http://127.0.0.1:18088/layui/delById/"+obj.data.id,
						success: function (data) {
							console.log('----单个删除成功===' + JSON.stringify(data));
						},
						error: function (msg) {
							console.log("ajax连接异常：" + msg);
						}
					});
                });
            }
        });

四edit.html页面代码

显示一些核心表单代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>


<div class="layui-form layuimini-form">
	<div class="layui-form-item layui-hide">
	    <label class="layui-form-label required">ID</label>
	    <div class="layui-input-block">
	        <input type="number" name="id" value="" class="layui-input">
	    </div>
	</div>
    <div class="layui-form-item">
        <label class="layui-form-label required">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="username" lay-verify="required" lay-reqtext="用户名不能为空" placeholder="请输入用户名" value="" class="layui-input">
            <tip>填写自己管理账号的名称。</tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男">
            <input type="radio" name="sex" value="女" title="女">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">签名</label>
        <div class="layui-input-block">
            <input type="text" name="sign" placeholder="请输入签名" value="" class="layui-input">
        </div>
    </div>
	<div class="layui-form-item">
	    <label class="layui-form-label">评分</label>
	    <div class="layui-input-block">
	        <input type="number" name="score" value="" placeholder="请输入评分值,如: 66"  class="layui-input">
	    </div>
	</div>
    <div class="layui-form-item">
        <label class="layui-form-label">职业</label>
        <div class="layui-input-block">
            <input type="text" name="classify" placeholder="请输入职业" value="" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>

<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;
			
		form.render("radio", "edit-table");	
        //监听提交
        form.on('submit(saveBtn)', function (data) {
			var data1 = JSON.stringify(data.field);
            var index = layer.alert(data1, {
                title: '最终的提交信息'
            }, function () {
				$.ajax({
					type: "post",
					dataType: "json",
					url: "http://127.0.0.1:18088/layui/update",
					data: data1,
					contentType: 'application/json;charset=UTF-8',
					success: function (data) {
						console.log(data+'111');
					},
					error: function (msg) {
						console.log("ajax连接异常：" + msg);
					}
				})
                // 关闭弹出层
                layer.close(index);
                var iframeIndex = parent.layer.getFrameIndex(window.name);
                parent.layer.close(iframeIndex);

            });
            return false;
        });
    });
</script>
</body>
</html>

五参考文档

官方在线示例：https://www.layui.com/demo/
官方API文档：https://www.layui.com/doc/
参考博客：https://blog.csdn.net/qq_40634846/article/details/104720361

RedMapleGI

关注

7
点赞
踩
19

收藏

觉得还不错? 一键收藏
6
评论
layui iframe弹出层编辑表格及radio数据回显

layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。表格表单数据编辑回显。
复制链接

扫一扫