文档章节

局部动态加载页面

MissGu
 MissGu
发布于 2015/04/01 10:59
字数 729
阅读 3970
收藏 8

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

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

于是,我就想到了用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
104
0
MVC3缓存之三:MVC3中的局部缓存(Partial Page)

在之前的文章MVC3缓存之二:页面缓存中的局部动态中,没有注意到MVC3的版本中对输出缓存进行了修改,园友的评论中提及了此问题,所以又去抽时间看了下局部缓存的解决方案。 最后发现在发布的...

达摩院法师
2011/04/11
0
0
thinkphp 中的volist标签在ajax操作中的特殊性

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

analanxingde
2017/11/01
0
0
浅谈移动端页面无刷新跳转问题的解决方案

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

祈澈姑娘
2017/12/22
0
0
页面缓存与局部动态缓存的组合 COutputCache+renderDynamic

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

威哥
2013/09/26
0
4

没有更多内容

加载失败,请刷新页面

加载更多

Django进阶 1.1 ORM基础—ORM 1.2.1 增删改查之查询 1.2.2 删改增 (1) 1.2.3 删改增 (2)

ORM基础 ORM是Django操作数据库的API,Django的作者将sql语句封装在里面供我们使用。 我们前面还提到过Django提供一个模拟数据库的工具,sqlite,供我们学习测试使用。 如果我们想使用mysql...

隐匿的蚂蚁
今天
1
0
Windows 上安装 Scala

在安装 Scala 之前需要先安装 Java 环境,具体安装的详细方法就不在这里描述了。 您可以自行搜索我们网站中的内容获得其他网站的帮助来获得如何安装 Java 环境的方法。 接下来,我们可以从 ...

honeymose
今天
3
0
数据库篇多表操作

第1章 多表操作 实际开发中,一个项目通常需要很多张表才能完成。例如:一个商城项目就需要分类表(category)、商品表(products)、订单表(orders)等多张表。且这些表的数据之间存在一定的关系...

stars永恒
今天
3
0
nginx日志自动切割

1.日志配置(Nginx 日志) access.log----记录哪些用户,哪些页面以及用户浏览器,IP等访问信息;error.log------记录服务器错误的日志 #配置日志存储路径:location / {      a...

em_aaron
昨天
5
0
java 反射

基本概念 RTTI,即Run-Time Type Identification,运行时类型识别。RTTI能在运行时就能够自动识别每个编译时已知的类型。   要想理解反射的原理,首先要了解什么是类型信息。Java让我们在运...

细节探索者
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部