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

本文介绍了一个使用EasyUI框架的故障报修系统的前端布局方案。重点在于如何通过点击左侧树形菜单仅更新中心区域的内容而不导致页面跳转。通过使用`panel`的`refresh`方法及`openURL`函数实现了这一需求。

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

 

HTML代码:

<div class="easyui-layout" style="width: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="width: 100%;background-color:#2d8bef;" border="false">
                </div>
            </div>
            <!-- 左边 -->
            <div region="west" style="width:150px; overflow: hidden;">
                <div id="pageWest" class="easyui-panel" style="width: 100%;" border="false">
                </div>
            </div>
            <!-- 中间区域 -->
            <div id="content" region="center" style="overflow: hidden;" border="false">
                <div id="pageContent" class="easyui-panel" style="width: 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> -->

  

 

转载于:https://www.cnblogs.com/lal-fighting/p/5671298.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值