layUI 子页面传值到父页面并刷新

战族狼魂

已于 2024-08-11 20:47:54 修改

阅读量172

点赞数 7

分类专栏： JSON 前端 layUI 文章标签： layui 前端 javascript

于 2024-08-11 20:45:21 首次发布

本文链接：https://blog.csdn.net/nndsb/article/details/141111441

版权

前端同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

JSON

4 篇文章 0 订阅

订阅专栏

layUI

2 篇文章 0 订阅

订阅专栏

父页面 (parent.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父页面</title>
     <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
 
</head>
<body>
    <div style="padding: 20px;">
        <button class="layui-btn" id="openChild">打开子页面</button>
        <table class="layui-hide" id="table" lay-filter="tableFilter"></table>
    </div>
   <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script>
        layui.use(['table', 'layer'], function(){
            var table = layui.table;
            var layer = layui.layer;

            // 初始化静态数据
            var staticData = [
                {id: 1, username: 'user1', email: 'user1@example.com'},
                {id: 2, username: 'user2', email: 'user2@example.com'},
                {id: 3, username: 'user3', email: 'user3@example.com'},
                {id: 4, username: 'newUser', email: 'newuser@example.com'}
            ];

            // 渲染表格
            table.render({
                elem: '#table',
                id: 'tableId',
                data: staticData, // 使用静态数据
                cols: [[
                    {field: 'id', title: 'ID', width: 80, sort: true},
                    {field: 'username', title: '用户名', width: 120},
                    {field: 'email', title: '邮箱', width: 200}
                ]],
                page: true // 启用分页
            });

            // 打开子页面
            document.getElementById('openChild').onclick = function() {
                layer.open({
                    type: 2,
                    title: '子页面',
                    area: ['600px', '400px'],
                    content: 'child.html'
                });
            };

            // 接收子页面传递的数据，并根据选中的ID来过滤表格
            window.receiveDataFromChild = function(selectedId) {
                console.log('Received ID from child:', selectedId);

                // 根据传递的ID进行过滤
                var filteredData = staticData.filter(function(item) {
                    return item.id === selectedId;
                });

                // 重新加载表格数据
                table.reload('tableId', {
                    data: filteredData,
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    }
                });
            };
        });
    </script>
</body>
</html>

子页面 (child.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子页面</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">

</head>
<body>
    <div style="padding: 20px;">
        <table class="layui-hide" id="childTable" lay-filter="childTableFilter"></table>
        <button class="layui-btn" id="sendData">传递数据并关闭</button>
    </div>

       <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script>
        layui.use(['table', 'layer'], function(){
            var table = layui.table;

            // 子页面的静态数据
            var childData = [
                {id: 1, username: 'user1', email: 'user1@example.com'},
                {id: 2, username: 'user2', email: 'user2@example.com'},
                {id: 3, username: 'user3', email: 'user3@example.com'},
                {id: 4, username: 'newUser', email: 'newuser@example.com'}
            ];

            // 渲染子页面表格
            table.render({
                elem: '#childTable',
                id: 'childTableId',
                data: childData,
                cols: [[
                    {type: 'radio'}, // 单选
                    {field: 'id', title: 'ID', width: 80, sort: true},
                    {field: 'username', title: '用户名', width: 120},
                    {field: 'email', title: '邮箱', width: 200}
                ]],
                page: true // 启用分页
            });

            // 选中行时触发
            table.on('radio(childTableFilter)', function(obj){
                console.log('Selected row:', obj.data);
                selectedId = obj.data.id; // 获取选中的ID
            });

            // 传递选中的行的ID给父页面
            document.getElementById('sendData').onclick = function() {
                if (typeof selectedId !== 'undefined') {
                    window.parent.receiveDataFromChild(selectedId);
                } else {
                    alert('请先选择一行数据！');
                }

                // 关闭当前子页面的 layer 弹出层
                var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                parent.layer.close(index); // 关闭窗口
            };
        });
    </script>
</body>
</html>

示例说明

父页面 (parent.html)
- table 初始化时加载一组静态数据。
- 当子页面传递数据时，通过 receiveDataFromChild 函数接收选中的 ID，并将数据作为过滤条件来过滤表格的数据。
- 过滤后的数据被重新加载到表格中，只显示选中 ID 对应的记录。
子页面 (child.html)
- 子页面表格使用单选框让用户选择一行。
- 选中行后，用户点击“传递数据并关闭”按钮，将选中的行的 ID 传递到父页面，然后关闭子页面。