文档章节

局部动态加载页面

MissGu
 MissGu
发布于 2015/04/01 10:59
字数 729
阅读 3856
收藏 8
点赞 1
评论 0

    不知道各位小伙伴在做前端页面的时候,会不会跟我有一样的经历,整个系统大体上是需要一个整体框架的,只有局部需要不时地刷新。话不多说,以下就是我要实现的效果图。

显然,我用红色边框框起的的地方是整个项目页面都需要有的,而黄色的两个边框的,有些页面采用了同样的样式,有些改变上面黄色边框,有些改变下面黄色边框。

于是,我就想到了用Ajax动态请求其他页面中的内容。这样及不会让index页面的代码内容过多,也可以让几个样式相同的板块统一样式,请求同一页面,省事。

首先呢,我在主页面留了两个空白的div,也就是那两个黄色边框所在的位置。

<div id="navBoxContent">
    <div id="boxButton">    

    </div>
    <div id="mainContent">

    </div>
</div>

上面黄色边框的内容呢,放在另外一个right1.html文件中。以下是right1.html中的内容。

<ul style="margin-left: 30px">
   <li><div class="but" id="add"><img src="images/index/add.png" alt="添加"/></div></li>
   <li><div class="but" id="edit"><img src="images/index/edit.png" alt="修改"/></div></li>
   <li><div class="but" id="del" onclick="del()"><img src="images/index/del.png" alt="删除"/></div></li>
</ul>
<div id="search"><input type="text" placeholder="请输入关键字"><img src="images/index/search.png" alt="搜索"/></div>

下面黄色边框的内容呢,放在table.html中。表格的样式采用了easyui中的datagrid。

<table id="dg"  style="width:100%;height:100%;" data-options="
                                    rownumbers:false,
                                    singleSelect:true,
                                    autoRowHeight:false,
                                    pagination:true,
                                    resizeHandle:'right'">
    <thead>
    <tr>
    </tr>
    </thead>
</table>

对以上right1.html和table.html中的css样式控制呢,可以直接放在index中的统一css样式文件中。

接下来就是js的动态请求了。

$(function(){
    //企业信息 用户管理
   $("#companyInformation").click(function(){
        $.ajax({//按钮栏显示
            url:"right1.html",
            dataType:"html",
            type:"get",
            success:function(data){
                $("#boxButton").html(data);
                $("#boxButton").css({"height":"50px","background":"url('images/index/search_bg.png')"})
            }
        });
       $.ajax({//表格显示
           url:"table.html",
           dataType:"html",
           type:"get",
           success:function(data){
               $("#mainContent").html(data);
               $("#mainContent").css({"height":"509px"});
               $.ajax({
                   url:"datagrid_data.json",
                   type:"post",
                   dataType:"json",
                   success:function(data){
                       $("#dg").datagrid({
                           columns:[data.title]    //动态取标题
                       });
                       $("#dg").datagrid("loadData",data.rows);  //动态取数据

                       $("#dg").datagrid('getPager').pagination({//分页栏下方文字显示
                           pageSize: 15,//每页显示的记录条数,默认为10
                           pageList:[15,30,45,60],//每页显示几条记录
                           beforePageText: '第',//页数文本框前显示的汉字
                           afterPageText: '页    共 {pages} 页',
                           displayMsg: '当前显示 {from} - {to} 条记录    共 {total} 条记录',
                           onBeforeRefresh:function(){
                               $(this).pagination('loading');//正在加载数据中...
                               $(this).pagination('loaded'); //数据加载完毕
                           }
                       })
                   }
               });
           }
       });
    });


});

当然,我前面也说了,我很多栏目的页面可能会是请求同一个页面。那么怎么给两个按钮添加同一个事件呢。在这里,我采用了这样的一种方式:

$("#companyInformation").add($("#userManage")).click(function(){.....});

也就是js的add方法,这样,当点击id名为companyInformation和userManage的menu时都会加载这个表格页面。

© 著作权归作者所有

共有 人打赏支持
MissGu
粉丝 3
博文 5
码字总数 2899
作品 0
北碚
C语言中未初始化变量的值

我们在刚学C编程的时候经常碰到“烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫”,这是为什么呢? 主函数外面(全局)和里面(局部)个定义一个int类型数值。然后没有赋值,直...

ChuckleLiu ⋅ 2016/04/12 ⋅ 0

thinkphp 中的volist标签在ajax操作中的特殊性

背景 在一个Thinkphp的复杂页面(包含volist)中实现volist标签显示jquery查询结果的返回 知识点 使用ajax的目的是不刷新整个页面的前提下实现部分表格数据的刷新,但是注意Thinkphp框架中的...

analanxingde ⋅ 2017/11/01 ⋅ 0

浅谈移动端页面无刷新跳转问题的解决方案

浅谈移动端页面无刷新跳转问题的解决方案 2017-12-22 祈澈姑娘 最近开发微信公众号,用的框架是 一般的 UI,但是涉及到多页面之间的相互跳转的问题,降低了浏览器的性能,用户体验特别不好,...

祈澈姑娘 ⋅ 2017/12/22 ⋅ 0

[转]jquery与updatepanel二次失效问题解决方案

现在越来越多的朋友喜欢将jQuery和ASP.NET AJAX 一起来用,最近,许多印度人在forum里抱怨说UpdatePanel和jQuery不兼容,许多jQuery效果在UpdatePanel更新之后就 不work。本篇通过分析两者的...

冰点沐雪 ⋅ 2012/04/24 ⋅ 0

页面缓存与局部动态缓存的组合 COutputCache+renderDynamic

最近在用Yii框架开发项目中遇到一个缓存问题,先前只是考虑到把内容页面整体缓存了下来,最后发现由于有用户状态的切换,所以有时候其他页面用户状态改变了,但是这个页面由于没有过期状态还是...

威哥 ⋅ 2013/09/26 ⋅ 4

《ExtJS详解与实践》阅读补充资料:单页面应用程序的设计

在一般的Web GUI 中,每个应用都分散在一个页面中,会随着页面的跳转而反映在浏览器的地址栏上;稍微复杂的基于Web 系统中,都采用划分Frame 元素或打开浏览器新窗口的方式来组织页面,从浏览...

sp42 ⋅ 2009/11/17 ⋅ 0

前端:你要懂的单页面应用和多页面应用

单页面应用(SinglePage Web Application,SPA) 只有一张Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源 ,公共资源(js、css等)仅需加载一次,常用于PC端官网、...

hilpeter ⋅ 2017/11/20 ⋅ 0

C语言中变量存储的实质

c中常会见到指针,但是指针的理解还需要要从变量中说起,先看内存空间: 如图:内存是一个存放数据的空间,就像电影院一样,都有自己的编号,这种有序的编号成为内存编址。内存是按照字节一个...

一千零一夜个为什么 ⋅ 2016/11/24 ⋅ 0

大话大前端时代(一) —— Vue 与 iOS 的组件化

序 今年大前端的概念一而再再而三的被提及,那么大前端时代究竟是什么呢?大前端这个词最早是因为在阿里内部有很多前端开发人员既写前端又写 Java 的 Velocity 模板而得来,不过现在大前端的...

一缕殇流化隐半边冰霜 ⋅ 2017/07/10 ⋅ 0

AngularJS路由与模板templateUrl学习笔记

AngularJS路由介绍 AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样。后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(render)到页面(HTML)。A...

rock912 ⋅ 2016/07/13 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Mahout推荐算法API详解

前言 用Mahout来构建推荐系统,是一件既简单又困难的事情。简单是因为Mahout完整地封装了“协同过滤”算法,并实现了并行化,提供非常简单的API接口;困难是因为我们不了解算法细节,很难去根...

xiaomin0322 ⋅ 15分钟前 ⋅ 0

WampServer默认web服务器根目录位置

安装WampServer之后的web服务器根目录默认位置在WampServer安装目录下的www:

临江仙卜算子 ⋅ 16分钟前 ⋅ 0

Redux的一些手法记录

Redux Redux的基本概念见另一篇文。 这里记录一下Redux在项目中的实际操作的手法。 actions 首先定义action.js,actions的type,可以另起一个action-type.js文件。 action-type.js用来存...

LinearLaw ⋅ 17分钟前 ⋅ 0

android 手势检测(左右滑动、上下滑动)

GestureDetector类可以让我们快速的处理手势事件,如点击,滑动等。 使用GestureDetector分三步: 1. 定义GestureDetector类 2. 初始化手势类,同时设置手势监听 3. 将touch事件交给gesture...

王先森oO ⋅ 31分钟前 ⋅ 0

java 方法的执行时间监控 设置超时(Future 接口)

java 方法的执行时间监控 设置超时(Future 接口) import java.util.concurrent.Callable; import java.util.concurrent.ExecutionException; import java.util.concurrent.Executor......

青峰Jun19er ⋅ 36分钟前 ⋅ 0

一名开源小白的Apache成长自述

今天收到了来自Apache Vote我成为Serviceomb项目Committer的邮件,代表自己的贡献得到了充分的肯定;除了感谢团队的给力支持,我更希望将自己的成长经历——如何践行Apache Way的心得介绍给大...

微服务框架 ⋅ 38分钟前 ⋅ 0

vim介绍、颜色显示和移动光标、一般模式下复制、剪切和粘贴

1.vim 是 vi 的升级版 vim 是带有颜色显示的 mini安装的系统,一般都不带有vim [root@aminglinux-128 ~]# yum install -y vim-enhanced已加载插件:fastestmirror, langpacksLoading mir...

oschina130111 ⋅ 38分钟前 ⋅ 0

Deepin 操作系统四面楚歌

作为国内做的最好的 Linux 发行版,源自 Debian sid 的 Deepin 目前正面临重重困境,新版本不断延期,开发人员离职,bug 长期得不到修复,和 Debian/Ubuntu 的兼容性问题也面临越来越严重的挑...

六库科技 ⋅ 39分钟前 ⋅ 0

MyBatis之动态sql

我们需要知道的是,使用mybatis重点是对sql的灵活解析和处理。在原先的UserMappser.xml中,我们这样查询表中满足条件的记录 : 123 <select id="findUserList" parameterType="userQuery...

瑟青豆 ⋅ 39分钟前 ⋅ 0

这届俄罗斯世界杯的冷门那么多怎么办?

最纯粹的世界杯,最神奇的大冷门。 德国0比1被墨西哥摩擦了。 日本历史性的赢了哥伦比亚。 C罗也挑平了西班牙。 梅西被冰岛狮吼吼愣神了。 就连11次进世界杯4强的巴西也被瑞士逼平了。 天台已...

开源中国众包平台 ⋅ 40分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部