easyui中点击菜单树中的某个选项，右边的窗口显示该选项对应的iframe窗口内容

peacezhi

于 2020-03-12 20:09:51 发布

阅读量464

点赞数

分类专栏：语法与技术

本文链接：https://blog.youkuaiyun.com/peacezhi/article/details/104826658

版权

语法与技术专栏收录该内容

107 篇文章

订阅专栏

本文介绍了如何在EasyUI的菜单树中，通过点击不同节点，实现在右侧窗口动态加载对应的IFrame内容，从而实现不同功能模块的展示。详细讲解了事件绑定和IFrame的src属性更新方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="div1" class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',title:'头部',split:true" style="height:100px"></div>
    <div data-options="region:'south',title:'底部',split:true" style="height:100px"></div>
    <div data-options="region:'west',title:'左边',split:true" style="width:100px">
        <div id="tree1"></div>
    </div>
    <div data-options="region:'east',title:'右边',split:true" style="width:100px"></div>
    <div id="center1" data-options="region:'center',title:'中间'">
        <iframe id="main" width="100%" height="98%" frameborder="0" src="/Default/Main"></iframe>
    </div>
</div>

<script type="text/javascript">
    var data1 = [{
        text: "用户管理",
        id: 1,
        state: closed,
        attributes: { url: "/Default/UserInfo" }
    }, {
        text: "新闻管理",
        id: 2,
        state: closed,
        attributes: { url: "/Default/NewInfo" }
    }];

    $(function() {
        $("#tree1").tree({
            data: data1,
            onClick: function (object1) {
                $("#center1").html(' <iframe id="main" width="100%" height="98%" frameborder="0" src="' + object1.attributes.url + '"></iframe>');
            }
        });
    });
</script>