新手来学习77 2024-08-12 11:08 采纳率: 0%
浏览 19
已结题

layui怎么实现子窗口修改完成后，用原来查询条件刷新父页面

layui怎么实现子窗口修改完成后，用原来查询条件刷新父页面，并且还是原来的页码.正常刷新不要保留条件查询。

<!DOCTYPE html>
<html class="x-admin-sm" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8"/>
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <link rel="stylesheet" href="/iconfont.css">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script type="text/javascript" src="/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
        .total-row {
            height: 50px;
            font-weight: bold;
            text-align: center;
            font-size: 160px;
            background-color: rgba(158, 196, 255, 99); /* 可选：添加背景色 */
        }
    </style>
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <label for="materialNo">物料搜索</label>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" id="materialNo" name="materialNo" placeholder="货号、名称、商品货号"
                                   autocomplete="off" class="layui-input">
                        </div>

                        <div class="layui-inline layui-show-xs-block">
                            <label for="materialType"></label>
                            <select name="materialType" id="materialType" lay-filter="materialType">
                            </select>
                        </div>

                        <div class="layui-inline layui-show-xs-block">
                            <label for="supplier"></label>
                            <select name="supplier" id="supplier" lay-filter="supplier">
                            </select>
                        </div>

                        <div class="layui-inline layui-show-xs-block">
                            <div class="layui-input-inline">
                                <select name="materialname" id="materialname" lay-search="">
                                    <option value="">物料名称</option>
                                </select>
                            </div>
                        </div>


                        <div class="layui-inline layui-show-xs-block">
                            <label for="materialState"></label>
                            <select name="materialState" id="materialState" lay-filter="materialState">
                                <option value="">物料状态</option>
                                <option value="开启">开启</option>
                                <option value="禁用">禁用</option>
                            </select>
                        </div>

                        <div class="layui-inline layui-show-xs-block">
                            <label for="singleState"></label>
                            <select name="singleState" id="singleState" lay-filter="singleState">
                                <option value="">单品状态</option>
                                <option value="开启">开启</option>
                                <option value="禁用">禁用</option>
                            </select>
                        </div>

                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="sreach"><i
                                    class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <table class="layui-table layui-form" id="test" lay-filter="test"></table>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
    </div>
</script>
<script type="text/html" id="materialStateTemplate">
    {{# if(d.materialstate === '开启'){ }}
    <input type="checkbox" name="materialstate" lay-skin="switch" lay-text="开启|禁用" value="{{d.materialstate}}"
           lay-filter="materialStateFilter" data-id="{{d.id}}" checked>
    {{# } else { }}
    <input type="checkbox" name="materialstate" lay-skin="switch" lay-text="开启|禁用" value="{{d.materialstate}}"
           lay-filter="materialStateFilter" data-id="{{d.id}}">
    {{# } }}
</script>

<script type="text/html" id="singleStateTemplate">
    {{# if(d.singlestate === '开启'){ }}
    <input type="checkbox" name="singlestate" lay-skin="switch" lay-text="开启|禁用" value="{{d.singlestate}}"
           lay-filter="singleStateTemplate" data-id="{{d.id}}" checked>
    {{# } else { }}
    <input type="checkbox" name="singlestate" lay-skin="switch" lay-text="开启|禁用" value="{{d.singlestate}}"
           lay-filter="singleStateTemplate" data-id="{{d.id}}">
    {{# } }}
</script>


<script>
    layui.use(['form', 'table', 'layer'], function () {
        var form = layui.form;

        // 通用的 AJAX 请求函数
        function loadOptions(url, selector, defaultOption) {
            $.ajax({
                type: "GET",
                url: url,
                dataType: "json",
                async: true,
                success: function (data) {
                    var options = `<option value="">${defaultOption}</option>`;
                    data = Array.isArray(data) ? data : data.data;
                    data.forEach(item => {
                        var value = item.supplier || item; // 适应不同的数据结构
                        options += `<option value="${value}">${value}</option>`;
                    });
                    $(selector).empty().append(options);
                    form.render('select');
                }
            });
        }

        // 加载下拉选项
        loadOptions('GroupCsmaterialMaterialType', '#materialType', '物料类型');
        loadOptions('GroupCsmaterialMaterialName', '#materialname', '物料名称');
        loadOptions('SelectPzSupplier', '#supplier', '供应商');
    })

</script>
<script>
    layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table,
            $ = layui.$,
            layer = layui.layer;
        var form = layui.form;

        var applySearchParams = localStorage.getItem('applySearchParams') === 'true';

        if (!applySearchParams) {
            localStorage.removeItem('searchParams');
        }

        localStorage.removeItem('applySearchParams'); // Clear the flag
        var searchParams = JSON.parse(localStorage.getItem('searchParams')) || {};
        if(applySearchParams && Object.keys(searchParams).length > 0){
            $('#materialType').val(searchParams.materialtype);
            $('#supplier').val(searchParams.supplier);
            $('#materialState').val(searchParams.materialState);
            $('#singleState').val(searchParams.singleState);
            $('#materialNo').val(searchParams.materialNo);
            $('#materialname').val(searchParams.materialname);
        } else {
            searchParams = {}; // Reset search parameters if not applying them
        }
        table.render({
            elem: '#test',
            url: 'selectAllCsmaterial',
            toolbar: 'default',
            page: true,
            cellMinWidth: 90,
            limits: [50, 70, 90, 150, 200],
            limit: 50,
            cols: [
                [
                    {type: 'radio'},
                    {field: 'id', title: '序列', align: 'center'},
                    {
                        field: 'materialimg',
                        title: '图片',
                        align: 'center',
                        templet: function (d) {
                            return '<img class="thumbnail" src="' + d.materialimg + '" alt="图片" style="width:35px;height:35px;"/>';
                        }
                    },
                    {field: 'materialno', title: '物料货号', align: 'center'},
                ]
            ],
            parseData: function (res) {
                var result;
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.count,
                    "data": result
                }
            },
            where: searchParams
        });
        form.on('submit(sreach)', function () {
            var materialtype = $('#materialType').val();
            var supplier = $('#supplier').val();
            var materialState = $('#materialState').val();
            var singleState = $('#singleState').val();
            var materialNo = $('#materialNo').val();
            var materialname = $('#materialname').val();
            var searchConditions = {
                materialtype: materialtype,
                supplier: supplier,
                materialState: materialState,
                singleState: singleState,
                materialNo: materialNo,
                materialname: materialname
            };
            localStorage.setItem('searchParams', JSON.stringify(searchConditions));
            // 执行搜索重载
            table.reload('test', {
                page: {
                    curr: 1
                },
                where: searchConditions
            }, 'data');
            return false;
        });

        // 监听工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    alert("新增按钮")
                    break;
                case 'update':
                    if (checkStatus.data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (checkStatus.data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.open({
                            type: 2,
                            title: '编辑物料信息',
                            shadeClose: true,
                            shade: 0.8,
                            area: ['1500px', '800px'],
                            content: '/selectcsmaterialById?id=' + checkStatus.data[0].id
                        });
                    }
                    break;
                case 'delete':
                    if (checkStatus.data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        layer.confirm('真的删除行么', function (index) {
                            $.ajax({
                                url: '/deletePzCsmaterial',
                                type: 'POST',
                                data: {id: checkStatus.data[0].id},
                                success: function (result) {
                                    if (result.success) {
                                        layer.msg(result.message);
                                        table.reload('test');
                                    } else {
                                        layer.msg(result.message);
                                    }
                                },
                                error: function () {
                                    layer.msg('请求失败');
                                }
                            });
                            layer.close(index);
                        });
                    }
                    break;
            }
        });
 })
</script>
</body>
</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="/layui/css/layui.css" media="all">
    <script src="/js/jquery.min.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<form class="layui-form" enctype="multipart/form-data">
    <div class="layui-form-item">
        <label class="layui-form-label">物料图片</label>
        <div class="layui-input-inline">
            <img id="materialImage" th:if="${pzCsmaterial != null}" th:src="${pzCsmaterial.materialimg}"
                 onclick="document.getElementById('imageUpload').click();"
                 style="cursor: pointer; max-width: 300px; max-height: 300px; width: auto; height: auto;" />
            <input type="file" id="imageUpload" name="imageFile" style="display: none;" accept="image/*"/>
        </div>
    </div>

    <div class="layui-form-item">
        <input th:value="${pzCsmaterial != null}?${pzCsmaterial.id}:''" type="hidden" name="id" lay-verify="required"
               autocomplete="off" class="layui-input">
        <div class="layui-inline"><label class="layui-form-label">物料货号</label>
            <div class="layui-input-inline">
                <input th:value="${pzCsmaterial != null}?${pzCsmaterial.materialno}:''" type="text" name="materialno"
                       lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script src="/layui/layui.js" charset="utf-8"></script>

<script>

    document.getElementById('imageUpload').addEventListener('change', function (event) {
        var file = event.target.files[0];
        console.log(file); // 检查文件是否被选择
        if (file) {
            var reader = new FileReader();

            reader.onload = function (e) {
                document.getElementById('materialImage').src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    });
    layui.use(['form', 'jquery', 'layer'], function () {
        var form = layui.form,
            $ = layui.jquery,
            layer = layui.layer;

        form.on('submit(demo1)', function (data) {
            var formData = new FormData();

            Object.keys(data.field).forEach(function (key) {
                formData.append(key, data.field[key]);
            });

            var fileInput = document.getElementById('imageUpload');
            if (fileInput && fileInput.files.length > 0) {
                formData.append('imageFile', fileInput.files[0]);
            }

            $.ajax({
                url: 'updatePzCsmaterial',
                data: formData,
                dataType: 'json',
                type: 'post',
                processData: false,
                contentType: false,
                success: function (response) {
                    if (response.success) {
                        localStorage.setItem('applySearchParams', 'true');
                        console.log(window.opener)
                        if (window.opener && typeof window.opener.refreshTable === 'function') {
                            window.opener.refreshTable();
                        }
                        window.close();
                    } else {
                        layer.msg(response.message);
                    }
                },
                error: function (xhr, status, error) {
                    console.error("AJAX request failed: ", error);
                    layer.msg('提交失败，请稍后重试。');
                }
            });
            return false; // 阻止表单默认提交
        });
    });


</script>

</body>
</html>
  • 写回答

16条回答 默认 最新

  • 阿里嘎多学长 2024-08-12 11:10
    关注

    以下内容由AIGC及阿里嘎多学长共同生成、有用望采纳：

    根据您提供的需求和代码，我们可以采用以下步骤实现子窗口修改完成后，使用原来查询条件刷新父页面的功能，同时保持原来的页码。

    步骤1：在父页面中存储查询条件和页码

    在父页面的搜索表单提交事件中，除了存储查询条件外，还需要存储当前页码。可以使用localStorage来实现。

    form.on('submit(sreach)', function () {
    // ...获取搜索条件代码...

    // 获取当前页码
    var currPage = table.cache['test'] ? table.cache['test'].page.curr : 1;
    
    // 存储查询条件和页码
    var searchConditions = {
        materialtype: materialtype,
        supplier: supplier,
        materialState: materialState,
        singleState: singleState,
        materialNo: materialNo,
        materialname: materialname,
        currPage: currPage // 添加页码
    };
    localStorage.setItem('searchParams', JSON.stringify(searchConditions));
    // 执行搜索重载
    // ...
});

    步骤2：在父页面定义刷新表格的函数

    在父页面中定义一个函数，用于根据存储的查询条件和页码刷新表格。

    // 刷新表格的函数
function refreshTable() {
    var searchParams = JSON.parse(localStorage.getItem('searchParams'));
    table.reload('test', {
        page: {
            curr: searchParams.currPage // 使用存储的页码
        },
        where: searchParams
    }, 'data');
}

    确保这个函数可以在全局访问到，以便子页面可以调用。

    步骤3：在子页面提交成功后调用父页面的刷新函数

    在子页面的表单提交成功后，检查window.opener是否存在，并且是否有refreshTable函数，如果有，则调用它。

    success: function (response) {
    if (response.success) {
        // ...其他成功处理代码...

        // 调用父页面的刷新函数
        if (window.opener && typeof window.opener.refreshTable === 'function') {
            window.opener.refreshTable();
        }
        window.close(); // 关闭子窗口
    } else {
        // ...错误处理代码...
    }
},

    示例输入和输出

    假设用户在父页面上执行了以下操作：

    • 搜索条件：物料货号为"X123"
    • 当前页码：第2页

    用户在子页面修改了某个物料的信息并提交。提交成功后，子页面会调用父页面的refreshTable函数。父页面将使用存储在localStorage中的查询条件（物料货号"X123"）和页码（第2页）来刷新表格，确保用户看到的是修改后的数据，且仍然在第2页。

    注意事项

    • 确保子页面和父页面的localStorage操作是同步的，避免因时间差导致数据不一致。
    • 考虑到安全性和隐私性，localStorage有容量限制，并且存储的数据没有过期时间。在实际应用中，可能需要结合服务器端的数据进行验证。
    • 如果用户在多个标签页或窗口中操作，需要考虑localStorage的共享问题。

    通过以上步骤，您应该能够实现子窗口修改数据后，使用原来的查询条件刷新父页面，同时保持原来的页码。希望这能帮助您解决问题。

    评论

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 8月13日
  • 创建了问题 8月12日

悬赏问题

  • ¥15 CCF-CSP 2023 第三题 解压缩(50％)
  • ¥30 comfyui openpose报错
  • ¥20 Wpf Datarid单元格闪烁效果的实现
  • ¥15 图像分割、图像边缘提取
  • ¥15 sqlserver执行存储过程报错
  • ¥100 nuxt、uniapp、ruoyi-vue 相关发布问题
  • ¥15 浮窗和全屏应用同时存在，全屏应用输入法无法弹出
  • ¥100 matlab2009 32位一直初始化
  • ¥15 Expected type 'str | PathLike[str]…… bytes' instead
  • ¥15 三极管电路求解，已知电阻电压和三级关放大倍数