layui更新弹出层或窗口iframe里的form元素select下拉列表或单选项值

最新推荐文章于 2024-01-03 13:19:14 发布

nizhengjia888

最新推荐文章于 2024-01-03 13:19:14 发布

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/nizhengjia888/article/details/104870222

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

部分代码如下：

index = layui.layer.open({
title: title,
type: 2,
area: ['98%', '96%'],
content: '/Test/Test/TestForm',
success: function (layero, index) {
var body = layui.layer.getChildFrame('body', index);
//编辑
if (key) {
$.ajax({
type: 'get',
url: '/Test/Test/TestDan?key=' + key.ID,
//async: false,
success: function (res) {
//console.log(res.data);
body.find('.layui-form').formSerialize(res.data);
//获取iframe并进行render
//var iframeWin = window[layero.find('iframe')[0]['name']]//与下面写法一样的值
var iframeWindow = layero.find('iframe')[0].contentWindow;
iframeWindow.layui.form.render();

通过上面的栗子实践

readerArchivesManage.html（读者列表html）

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/fragment_head :: common-head('图书管理系统')"></head>
<link th:href="@{/plugins/layui/css/layui.css}" rel="stylesheet" type="text/css">
<link th:href="@{/css/public.css}" rel="stylesheet" type="text/css">
<body class="childrenBody">
<form class="layui-form">
    <blockquote class="layui-elem-quote quoteBox">
        <div class="layui-inline">
            <a class="layui-btn layui-btn-normal addReaderArchives_btn">添加读者</a>
        </div>
    </blockquote>
    <table id="readerArchivesList" lay-filter="readerArchivesListTable"></table>
    <!--操作-->
    <script type="text/html" id="readerArchivesListBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>
</form>

<div th:include="common/fragment_js :: common-js"></div>
<script th:src="@{/plugins/layui/layui.js}"  type="text/javascript"></script>
<script th:src="@{/js/readerManage/readerArchivesManage.js}"  type="text/javascript"></script>
</body>
</html>

readerArchivesManage.js （列表js）

/**
 * 读者管理
 */
layui.use(['form','layer','table','laytpl'],function(){
    var form = layui.form,
        layer = parent.layer === undefined ? layui.layer : top.layer,
        $ = layui.jquery,
        laytpl = layui.laytpl,
        table = layui.table;

    //初始化列表
    var tableIns = table.render({
        elem: '#readerArchivesList',
        url : ctx+'/readerManage/getReaderArchivesList',
        cellMinWidth : 95,
        page : true,
        height : "full-125",
        limit : 10,
        limits : [10,20],
        id : "readerArchivesListTable",
        cols : [[
            {field: 'barcode', title: '条形码', width:200, align:"center"},
            {field: 'name', title: '姓名', width:200, align:"center"},
            {field: 'typename', title: '读者类型', width:200, align:"center"},
            {field: 'paperType', title: '证件类型', width:200, align:"center"},
            {field: 'paperNO', title: '证件号码', width:200, align:"center"},
            {field: 'tel', title: '电话', width:200, align:"center"},
            {field: 'email', title: 'Email', width:200, align:"center"},
            {title: '操作', width:236, templet:'#readerArchivesListBar',fixed:"right",align:"center"}
        ]]
    });

    //添加读者
    function addReaderArchives(edit){
        var index = layui.layer.open({
            title : "添加读者",
            type : 2,
            area: ['400px', '460px'],
            content : ctx+"/readerManage/toAddReaderArchives",
            success : function(layero, index){
                var body = layui.layer.getChildFrame('body', index);
                //var childForm = layui.layer.getChildFrame('form', index);
                if(edit){
                    body.find("#readerName").val(edit.name);
                    //body.find("input[name='sex']").removeAttr('checked');
                    //body.find("input[value="+edit.sex+"]").attr("checked","checked");//性别

                    body.find("input[name='sex'][value='男']").attr("checked", edit.sex == '男' ? true : false);
                    body.find("input[name='sex'][value='女']").attr("checked", edit.sex == '女' ? true : false);

                    body.find("#barcode").val(edit.barcode);
                    body.find("#typeid").val(edit.typeid);//读者类型
                    //body.find("#typeid").find("option[value="+edit.typeid+"]").attr("selected",true);
                    body.find("#vocation").val(edit.vocation);
                    body.find("#birthday").val(edit.birthday);
                    body.find("#paperType").val(edit.paperType);
                    //body.find("#paperType").find("option[value="+edit.paperType+"]").attr("selected",true);//有效证件
                    body.find("#paperNO").val(edit.paperNO);
                    body.find("#tel").val(edit.tel);
                    body.find("#email").val(edit.email);
                    body.find("#introduce").val(edit.remark);
                    body.find("#id").val(edit.id);
                    form.render();//刷新全部
                    //childForm.render();
                    //刷新弹窗(子iframe)的form
                    var iframeWindow = layero.find('iframe')[0].contentWindow;
                    iframeWindow.layui.form.render();
                }
                setTimeout(function(){
                    layui.layer.tips('点击此处返回列表', '.layui-layer-setwin .layui-layer-close', {
                        tips: 3
                    });
                },500)
            }
        })
    }
    $(".addReaderArchives_btn").click(function(){
        addReaderArchives();
    })

    //批量删除
    /*$(".delAll_btn").click(function(){
        var checkStatus = table.checkStatus('userListTable'),
            data = checkStatus.data,
            newsId = [];
        if(data.length > 0) {
            for (var i in data) {
                newsId.push(data[i].newsId);
            }
            layer.confirm('确定删除选中的用户？', {icon: 3, title: '提示信息'}, function (index) {
                // $.get("删除文章接口",{
                //     newsId : newsId  //将需要删除的newsId作为参数传入
                // },function(data){
                tableIns.reload();
                layer.close(index);
                // })
            })
        }else{
            layer.msg("请选择需要删除的用户");
        }
    })*/

    //列表操作
    table.on('tool(readerArchivesListTable)', function(obj){
        var layEvent = obj.event,
            data = obj.data;
        if(layEvent === 'edit'){ //编辑
            addReaderArchives(data);
        }else if(layEvent === 'del'){ //删除
            layer.confirm('确定删除？',{icon:3, title:'提示信息'},function(index){
                $.get(ctx+"/readerManage/delReaderArchivesById",{id : data.id },function(data){
                    tableIns.reload();
                    layer.close(index);
                })
            });
        }
    });

})

addReaderArchives.html （添加页面，iframe子页面）

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/fragment_head :: common-head('图书管理系统')"></head>
<link th:href="@{/plugins/layui/css/layui.css}" rel="stylesheet" type="text/css">
<link th:href="@{/css/public.css}" rel="stylesheet" type="text/css">
<style>
	.layui-layer-iframe iframe{height: 100%!important;}
</style>
<body class="childrenBody">
<form class="layui-form" style="width:80%;">
	<div class="layui-form-item layui-row layui-col-xs12">
		<label class="layui-form-label">姓名</label>
		<div class="layui-input-block">
			<input type="text" name="readerName" id="readerName" class="layui-input" lay-verify="required" placeholder="请输入姓名">
		</div>
	</div>
	<div class="layui-form-item layui-row layui-col-xs12">
		<label class="layui-form-label">性别</label>
		<div class="layui-input-block">
			<!--<input type="text" name="sex" id="sex" class="layui-input" lay-verify="required" placeholder="请输入性别">-->
			<input type="radio" name="sex" value="男" title="男" checked="">
			<input type="radio" name="sex" value="女" title="女">
		</div>
	</div>
	<div class="layui-form-item layui-row layui-col-xs12">
		<label class="layui-form-label">条形码</label>
		<div class="layui-input-block">
			<input type="text" name="barcode" id="barcode" class="layui-input" lay-verify="required" placeholder="请输入条形码">
		</div>
	</div>
	<div class="layui-form-item layui-row layui-col-xs12">
		<label class="layui-form-label">读者类型</label>
		<div class="layui-input-block">
			<!--<input type="text" name="typeid" id="typeid" class="layui-input" lay-verify="required" placeholder="请输入读者类型">-->
			<select name="typeid" id="typeid" lay-verify="required">
				<option value="">请选择</option>
				<option th:each="ro: ${readerTypeNameList}" th:value="${ro.id}" th:text="${ro.name}" ></option>
			</select>
		</div>
	</div>
	<div class="layui-form-item layui-row layui-col-xs12">
		<label class="layui-form-label">职业</label>
		<div class="layui-input-block">
			<input type="text" name="vocation" id="vocation" class="layui-input" lay-verify="required" placeholder="请输入职业">
		</div>
	</div>
	<div class="layui-form-item layui-row layui-col-xs12">
		<label class="layui-form-label">出生日期</label>
		<div class="layui-input-block">
			<!--<input type="text" name="birthday" id="birthday" class="layui-input" lay-verify="required" placeholder="请输入出生日期">-->
			<input type="text" name="birthday" id="birthday" class="layui-input" lay-verify="required" placeholder="yyyy-MM-dd" autocomplete="off">
		</div>
	</div>
	<div class="layui-form-item layui-row layui-col-xs12">
		<label class="layui-form-label">有效证件</label>
		<div class="layui-input-block">
			<!--<input type="text" name="paperType" id="paperType" class="layui-input" lay-verify="required" placeholder="请输入有效证件">-->
			<select name="paperType" id="paperType" lay-verify="required">
				<option value="身份证">身份证</option>
				<option value="学生证">学生证</option>
				<option value="军官证">军官证</option>
				<option value="工作证">工作证</option>
			</select>
		</div>
	</div>
	<div class="layui-form-item layui-row layui-col-xs12">
		<label class="layui-form-label">证件号码</label>
		<div class="layui-input-block">
			<input type="text" name="paperNO" id="paperNO" class="layui-input" lay-verify="required" placeholder="请输入证件号码">
		</div>
	</div>
	<div class="layui-form-item layui-row layui-col-xs12">
		<label class="layui-form-label">电话</label>
		<div class="layui-input-block">
			<input type="text" name="tel" id="tel" class="layui-input" lay-verify="required" placeholder="请输入电话">
		</div>
	</div>
	<div class="layui-form-item layui-row layui-col-xs12">
		<label class="layui-form-label">Email</label>
		<div class="layui-input-block">
			<input type="text" name="email" id="email" class="layui-input" lay-verify="required" placeholder="请输入Email">
		</div>
	</div>
	<div class="layui-form-item layui-row layui-col-xs12">
		<label class="layui-form-label">备注</label>
		<div class="layui-input-block">
			<textarea name="introduce" id="introduce" placeholder="请输入备注" class="layui-textarea userDesc"></textarea>
		</div>
	</div>

	<div class="layui-form-item layui-row layui-col-xs12">
		<div class="layui-input-block">
			<button class="layui-btn layui-btn-sm" lay-submit="" lay-filter="addReaderArchives">确定</button>
		</div>
	</div>
	<input type="hidden" name="id" id="id" />
</form>

<div th:include="common/fragment_js :: common-js"></div>
<script th:src="@{/plugins/layui/layui.js}"  type="text/javascript"></script>
<script th:src="@{/js/readerManage/addReaderArchives.js}"  type="text/javascript"></script>
</body>
</html>

addReaderArchives.js（添加页面js，iframe子页面js）

layui.use(['form','layer','laydate'],function(){
    var form = layui.form
    layer = parent.layer === undefined ? layui.layer : top.layer,
        $ = layui.jquery,
        laydate = layui.laydate;

    //日期
    laydate.render({
        elem: '#birthday'
    });

    form.on("submit(addReaderArchives)",function(data){
        //弹出loading
        var index = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});
        var field = data.field;
        var params = {
            name:field.readerName,
            sex:field.sex,
            barcode:field.barcode,
            typeid:field.typeid,
            vocation:field.vocation,
            birthday:field.birthday,
            paperType:field.paperType,
            paperNO:field.paperNO,
            tel:field.tel,
            email:field.email,
            remark:field.introduce,
        }
        if(field.id==""){
            // 实际提交信息
            $.post(ctx+"/readerManage/addReaderArchives",params,function(res){
                top.layer.close(index);
                top.layer.msg("添加成功！");
                layer.closeAll("iframe");
                top.location.reload();
            })
        }else{
            params.id = field.id;
            // 实际提交信息
            $.post(ctx+"/readerManage/updateReaderArchives",params,function(res){
                top.layer.close(index);
                top.layer.msg("修改成功！");
                layer.closeAll("iframe");
                top.location.reload();
            })
        }
        return false;
    })

    //格式化时间
    function filterTime(val){
        if(val < 10){
            return "0" + val;
        }else{
            return val;
        }
    }
    //定时发布
    var time = new Date();
    var submitTime = time.getFullYear()+'-'+filterTime(time.getMonth()+1)+'-'+filterTime(time.getDate())+' '+filterTime(time.getHours())+':'+filterTime(time.getMinutes())+':'+filterTime(time.getSeconds());

})

nizhengjia888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
layui更新弹出层或窗口iframe里的form元素select下拉列表或单选项值

部分代码如下：index = layui.layer.open({title: title,type: 2,area: ['98%', '96%'],content: '/Test/Test/TestForm',success: function (layero, index) {var body = layui.layer.getChildFrame('body', index...
复制链接

扫一扫