js结合table改变iframe地址

最新推荐文章于 2023-06-13 15:55:02 发布

Ysmooth

最新推荐文章于 2023-06-13 15:55:02 发布

阅读量287

点赞数

分类专栏： layui 文章标签： javascript html5 html

本文链接：https://blog.csdn.net/Ysmooth/article/details/119976715

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

js结合table改变iframe地址

实现同界面的预览功能
嵌入iframe

// A code block
<iframe src="" width=100% height= "300px" name="my-iframe" scrolling="Yes"
        noresize="noresize" frameborder="0" id="my-iframe">
</iframe>

在js中写入

document.getElementById('my-iframe').setAttribute('src','http://localhost:8096/business/tpiao/p_review?autoId=' + data.autoId + '&flag=' + flag);

或者

$('#my-iframe').attr('src','http://localhost:8096/business/tpiao/p_review?autoId=' + data.autoId + '&flag=' + flag);

ftl文件

// 
<!DOCTYPE html>
<html>
<head>
    <#include "/head.ftl">
    <script type="text/javascript" src="/lib/template-web.js"></script>
</head>
<body>
<script>
    var autoId=${autoId};
</script>

<div class="layui-fluid">
    <div class="layui-row">
        <fieldset class="layui-elem-field">
            <legend><b>${theObj.name!}(ID:${theObj.autoId!})</b></legend>
            <div class="layui-field-box" style="text-align: center">
                满分：${ theObj.fullScore!}&nbsp;&nbsp;&nbsp;&nbsp;及格分：${ theObj.passScore!}
            </div>
            <div class="layui-field-box" style="text-align: center">
                &nbsp;&nbsp;&nbsp;&nbsp;出卷人：${ theObj.createUserName!}
                &nbsp;&nbsp;&nbsp;&nbsp;出卷时间： ${ theObj.createDate?datetime}
            </div>
        </fieldset>
    </div>
    <div class="layui-card">
        <div class="layui-card-body ">
            <table id="mytable" class="layui-table layui-form" lay-filter="l_table">
            </table>
        </div>
    </div>
</div>

<iframe src="" width=100% height= "300px" name="my-iframe" scrolling="Yes"
        noresize="noresize" frameborder="0" id="my-iframe">
</iframe>

<script type="text/html" id="l_toolbar">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="p_review">预览</a>
</script>

<script type="text/javascript" src="/js/business/paper/tpiao_review.js"></script>
</body>
</html>

js文件

// 
var prefix = "/business/paper";
var tags=[];
var step = 111;
var table;


layui.use('table', function () {
    table = layui.table;
    //后端已经筛选出paperId对应的票id和票对应的分数，同时写了一个数据接口listById，想通过表单的形式进行显示
    //listById接口，写了测试程序可用，作为表单的数据接口不可用

    //第一个实例
    table.render({
        elem: '#mytable'
        , id: 'autoId'
        , url: '/business/paper/listById/'+autoId//数据接口
        , cols: [[ //表头
            {field: 'name', title: '票名称', sort: true}
            , {field: 'typeName', title: '票类型', sort: true}
            , {field: 'score', title: '分数',sort: true}
            , {toolbar: '#l_toolbar', title: '操作', fixed: 'right', width: 178, align: 'center'}
        ]]
        , done: function (data) {
            console.log(data);
        }
    });
    table.on('sort(l_table)', function (obj) {
        obj.field = jd_tuofeng(obj.field);
        table.reload('autoId', {
            initSort: obj
            , where: {
                sort: obj.field //排序字段
                , order: obj.type //排序方式
            }
        });
    });
    //监听工具条
    table.on('tool(l_table)', function (obj) {
        var data = obj.data;
        // 两票预览标志位
        var flag = 'preview';
        if (obj.event === 'p_review') {
            $('#my-iframe').attr('src',
            'http://localhost:8096/business/tpiao/p_review?autoId=' 
            + data.autoId + '&flag=' 
            + + flag);
        }
    });

});

前端表格

前端界面：

autoId	名称	分数	操作
111	1600电脑	1600	预览
222	2000电脑	1600	预览

效果

在这里插入图片描述

Ysmooth

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js结合table改变iframe地址

layui学习笔记1--js结合table改变iframe地址js结合table改变iframe地址ftl文件js文件前端表格效果js结合table改变iframe地址实现同界面的预览功能嵌入iframe// A code block<iframe src="" width=100% height= "300px" name="my-iframe" scrolling="Yes" noresize="noresize" frameborder="0" id="my-ifram
复制链接

扫一扫

专栏目录