不知道各位小伙伴在做前端页面的时候，会不会跟我有一样的经历，整个系统大体上是需要一个整体框架的，只有局部需要不时地刷新。话不多说，以下就是我要实现的效果图。
显然，我用红色边框框起的的地方是整个项目页面都需要有的，而黄色的两个边框的，有些页面采用了同样的样式，有些改变上面黄色边框，有些改变下面黄色边框。
于是，我就想到了用ajax动态请求其他页面中的内容。这样及不会让index页面的代码内容过多，也可以让几个样式相同的板块统一样式，请求同一页面，省事。
首先呢，我在主页面留了两个空白的div，也就是那两个黄色边框所在的位置。

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

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

对以上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时都会加载这个表格页面。