以前做的一个故障报修系统,前端框架使用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> -->

  

easyUI 如何不跳转页面,只是加载替换center部分内容的更多相关文章

  1. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

  2. mpvue 页面预加载,新增preLoad生命周期

    存在的必要性:mpvue开发微信小程序,在页面跳转到新页面的过程中会有200ms左右的延迟,这个200ms如果用来请求新页面的接口,那么跳转到新页面或许已经渲染好了页面. 就是两种方式: 1.新页面跳 ...

  3. HBuilder mui 手机app开发 Android手机app开发 ios手机app开发 打开新页面 预加载页面 关闭页面

    创建子页面 在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题: mui的解决思路是:将需要滚动的区域通过单独的webview实 ...

  4. Vue-Router 页面正在加载特效

    Vue-Router 页面正在加载特效 如果你在使用 Vue.js 和 Vue-Router 开发单页面应用.因为每个页面都是一个 Vue 组件,你需要从服务器端请求数据,然后再让 Vue 引擎来渲染 ...

  5. 使用 SVG 实现一个漂亮的页面预加载效果

    今天我们要为您展示如何使用 CSS 动画, SVG 和 JavaScript 创建一个简单的页面预加载效果.对于网站来说,这些预载入得画面提供了一种创造性的方法,使用户在等待内容加载的时候不会那么无聊 ...

  6. yii2 如何在页面底部加载css和js

    作者:白狼 出处:www.manks.top/article/yii2_load_js_css_in_end 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接 ...

  7. js和jquery页面初始化加载函数的方法及先后顺序

    运行下面代码.弹出A.B.C.D.E的顺序:A=B=C>D=E. jquery:等待页面加载完数据,以及页面部分元素(不包括图片.视频), js:是页面全部加载完成才执行初始化加载. <! ...

  8. 关于asp.net中页面事件加载的先后顺序

    一.ASP.NET 母版页和内容页中的事件 母版页和内容页都可以包含控件的事件处理程序.对于控件而言,事件是在本地处理的,即内容页中的控件在内容页中引发事件,母版页中的控件在母版页中引发事件.控件事件 ...

  9. jquery的 $(function(){ }) = $(document).ready(function(){ }) ,及页面的加载顺序

    document.ready和onload的区别:一.JavaScript文档加载完成事件页面加载完成有两种事件一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件) 二.是onloa ...

随机推荐

  1. 调用sharepoint 2010 REST报版本过低

    问题描述: 写了一个webservice调用sharepoint REST,本机测试成功,部署到服务器上后报错 (System.Data.Services.Client.DataServiceQuer ...

  2. scrollToItemAtIndexPath: atScrollPosition: animated:

    oh my god 今天死在scrollToItemAtIndexPath: atScrollPosition: animated:方法上面,scrollPosition这个参数控制cell具体停留在 ...

  3. android 自定义控件——(一)圆角按钮

    ----------------------------------矩形或圆角类型(源代码下有属性解释)------------------------------------------------ ...

  4. kindle型号

    这篇文章为 Kindle 新手解决三个问题:怎么辨别Kindle 型号?通过 Kindle 外观判断准确吗?Kindle序列号在那里? 贴吧吧友提问的原话"在咸鱼看到一台,那哥们说也不知道K ...

  5. JavaScript标准参考教材(alpha)--笔记

    一.导论 二.基本语法 1.严格来说var a=1与a=1效果不太一样,delete命令无法删除前者. JavaScirpt是一种动态类型语言,也就是说,变量的类型没有限制,可以赋予各种类型的值. J ...

  6. (八)数据呈现——一图胜千言<完结>

    数据分析师就像厨师一样.厨师的工作有5步:下单.备料.切配.烹饪.打荷.数据分析师的工作也有5步.呈现数据就好像打荷.厨师在把菜肴端给客人之前要做盘饰美化,让菜肴精致美观,这个工作就是打荷.同样,数据 ...

  7. Linux操作系统主机名(hostname)简介

    http://www.jb51.net/LINUXjishu/10938.html 摘要:本文是关于Linux操作系统主机名(hostname)的文档,对主要配置文件/etc/hosts进行简要的说明 ...

  8. 无法解析指定对象的 TargetProperty (UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)“的异常解决

    最近在写动画的时候做一个倒计时的效果,就是数字从大到小的一个动画,但是当我设置要new PropertyPath("XXXXXXX")的时候却报了标题的异常,各种报错.百度了好久也 ...

  9. Linux下使用crontab定时备份日志

    上周学习了Linux,其中有使用crontab定时备份日志的内容,现把主要步骤记录如下: 首先需要备份的日志的源目录位于/opt/lampp/logs/access_log 备份到/tmp/logs下 ...

  10. FPGA与simulink联合实时环路系列——实验三 按键key

    实验三 按键key 实验内容 在FPGA的实验中,经常涉及到按键的使用,按键是必不可少的人机交互的器件之一,在这些实验中,有时将按键的键值读取显示到数码管.LCD或者是通过串口传送到PC的串口助手上进 ...