• easyUI 如何不跳转页面,只是加载替换center部分内容


     以前做的一个故障报修系统,前端框架使用easyUI框架,layout布局,center使用datagrid 。点击左边树形菜单时时页面跳转,想要知道如何点击菜单时不进行页面跳转,而是只对center模块的东西进行加载更新?

    HTML代码:

    <div class="easyui-layout" style="100%;height:100%;"  data-options="fit:true">
                <!-- 上边 -->
                <div region="north" style="height:80px;background-color:#2d8bef; overflow: hidden;" >
                    <div id="pageNorth" class="easyui-panel" style=" 100%;background-color:#2d8bef;" border="false">
                    </div>
                </div>
                <!-- 左边 -->
                <div region="west" style="150px; overflow: hidden;">
                    <div id="pageWest" class="easyui-panel" style=" 100%;" border="false">
                    </div>
                </div>
                <!-- 中间区域 -->
                <div id="content" region="center" style="overflow: hidden;" border="false">
                    <div id="pageContent" class="easyui-panel" style=" 100%;height:100%;" border="false">
                    </div>
                </div>
                <!-- 下边版权区 -->
                <div region="south" style="height: 30px; background-color: #2d8bef; text-align:center; line-height: 30px; color:#fff;" border="false">
                    版权所有 © XX XXX有限公司
                </div>
            </div>

    jQuery代码: 使用panel 的 refresh 方法

    $(function(){
        $("#pageNorth").panel("refresh", "title.html");
        $("#pageWest").panel("refresh", "menu.html");
    
        openURL("欢迎您", "welcome.html");
    });
    
    
    function openURL(title, url) {
        $("#pageContent").panel({
            title: title,
            href: url
        });
    }
    

      在menu中的每个链接添加点击事件时调用函数openURL()  (两种方法都可以实现 也可以在js代码中使用事件委托,再分别判断具体点击的是哪个 链接,switch case)

    <li><span><a href="javascript:openURL('学校管理', 'school_mng/school.html')">学校管理</a></span></li>
    <!-- <li><span><a href="javascript:void(0)" onclick="openURL('学校管理', 'school_mng/school.html')">学校管理</a></span></li> -->
    

      

  • 相关阅读:
    window.onload 、body.onload 以及 jQuery 等dom加载完成后执行脚本的区别
    HTML5事件-pageshow 和 pagehide
    动态加载script 和 link
    递归 recursive
    HTML5事件-自定义右键菜单
    left与margin-left区别
    偏移量、客户区、滚动大小
    屏幕适配
    KVC和KVO
    HUD总结
  • 原文地址:https://www.cnblogs.com/lal-fighting/p/5671298.html
Copyright © 2020-2023  润新知