【layUI杂记】layui之点击返回上一层刷新父页面

• 在使用layui的过程中，我发现我对父页面使用的是table表格， table表格中渲染的是a标签，点击数据调转到具体显示页面。关于table表格渲染a标签，可以参考另外一篇文章。

// 给表格添加a标签； 添加show_schedule_detail点击事件
<script type="text/html" id="checkboxTpl">
  <a href="javascript:;" onclick="show_schedule_detail({{ d.id }})">{{ d.title }}</a>
</script>
 
<div style="padding: 10px;">
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
 
<script>
    parent_show_type = parent.show_type;
    // 渲染表格
    layui.use('table', function () {
        var table = layui.table;
 
        table.render({
            elem: '#test'
            , url: '${SITE_URL}news/show/details/'
            , method: 'post'
            , where: {
                'check_type': parent_show_type
            }
            , cols: [[
                , {field: 'release_time', title: '发布时间', width: 102}
                , {field: 'title', title: '标题', templet: '#checkboxTpl'}
                , {field: 'user', title: '发布者', width: 160}
            ]]
            , page: true
            , limit: 15
            , limits: [15, 30, 45]
        });
 
    });
    // 点击事件
    function show_schedule_detail(show_id) {
        layer.open({
            type: 2
            , skin: 'layui-layer-rim' // 加上边框
            , area: ['100%', '100%'] // 区域
            , closeBtn: false  // 去掉关闭按钮
            , title: false // 去掉标题
            , shade: 0.8 // 阴影部分
            , content: '${SITE_URL}news/newsletters/examine/' + show_id + '/?to_show=1'
        });
    }
</script>
```
 
下面我们来看  具体信息页面
 
```html
<div class="lg-container">
    <div class="post-container">
        <center><h2>${ run_news.title }</h2></center>
        <p class="post-info-group" id="c">
            % if run_to_show:
            <!-- 给返回上一层添加点击事件 -->
            <a href="javascript:;" style="float: left;" onclick="to_a()">返回上一层</a>
            % endif
            <span id="a">发表时间：${ run_news.release_time } </span>
            <span id="b">作者：${run_news.user.username} </span>
 
        </p>
        <hr class="layui-bg-black">
        <article class="post-content" id="post-content">
            ${run_news.content}
        </article>
    </div>
</div>
<script>
    // 点击事件 关闭子页面，刷新父页面
    function to_a() {
        var index=parent.layer.getFrameIndex(window.name);//获取当前弹出层的层级
        window.parent.location.reload();//刷新父页面
        parent.layer.close(index);//关闭弹出层
    }
</script>

标签：parent,show,layUI,title,杂记,layui,table,news,页面
来源： https://www.cnblogs.com/guojie-guojie/p/16194785.html