下面的代码存到index.html即可查看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="position: fixedtop: 0left: 0background-color: #fff">
<a href="#home">首页</a>
<a href="#page2">page2</a>
<a href="#page3">page3</a>
</div>
<div style="height: 800pxborder: 1px solid #dddpadding-top: 35px">
<a id="home"></a>
<br><br>
这里是首页部分
</div>
<div style="height: 800pxborder: 1px solid #dddpadding-top: 35px">
<a id="page2"></a>
<br><br>
这里是page2部分
</div>
<div style="height: 1000pxborder: 1px solid #dddpadding-top: 35px">
<a id="page3"></a>
<br><br>
这里是page3部分
</div>
</body>
</html>
很简单的，我给你说两种方法。第一种最简单，直接生成若干个<div>或者<table>，因为你说是文章，所以我以下用<div>，这样比较简单。
<div id="div1">第一页内容</div>
<div id="div2" style="display:none">第二页内容</div>
<div id="div3" style="display:none">第三页内容</div>
然后你再作几个链接类似于1，2，3这样的文字，点击文字，相应的页面显示，其他页面隐藏。这样就等于有了分页效果。
第二种，
var array =["第一页内容","第二页内容","第三页内容"]
<div id="div1">第一页内容</div>
然后你再作几个链接类似于1，2，3这样的文字，点击文字，把<div>中的内容换成数组中相应的内容。
页面在初始化加载数据较多时会非常耗时，如果只加载表格，用户再根据自己的需要通过条件查询数据，就会节约一些时间，提高用户体验，所以在初始化datagrid时想只加载表格不加载数据，做到数据与表格加载分离的效果。
经过实验发现，使用.datagrid（）方法时，参数中只要有URL存在，都会自动调用一次加载数据，可设置url参数为null，则加载表格时就不会向后台发出请求；但是此时如果用户想重置页面条件，重新加载页面时，由于没有请求后台，只加载表格，则会发生页面条件清空，表格数据还在或者表格数据为空分页展示的记录却不为0的现象，所以也需要重置数据和分页参数，具体代码如下：
[javascript] view plain copy
/**
* dataGrid初始化表格
* @param id datagrid的id
* @param column 展示的列名
* @param opt 设置自定义datagrid属性
*/
function commonInitDataGrid(id, column, opt){
var initData =
{
"code":100,
"msg":"",
"data":{"totalDataCount":0,"totalPageCount":0,"list":[],"properties":{"footer": []}}
}
//校验参数
if(isEmpty(id) || isEmpty(column)){
jQuery.messager.alert("系统提示", "系统错误，请联系技术人员！")
return
}
//默认属性
var defaultOpt= {
"url": null,
"method": 'POST', //请求方式
"columns": column,
"width": document.body.clientWidth < 756 ? 756 - 18 : document.body.clientWidth - 18,
"remoteSort": false,
"rownumbers": true,
"pagination": true,
"showFooter": true,
"fitColumns": true,
"pageNumber": 1,
"pageSize": 20,
"pageList": [10, 20, 30, 50, 100],
"singleSelect": true,
"striped": true,
"loadFilter": function (result) {
if (result.code == "100") {
//解析json结果集，返回给datagrid
var obj =
{
"total": result.data.totalDataCount,
"rows": result.data.list,
"footer": result.data.properties.footer
}
return obj
} else {
jQuery.messager.alert("系统提示", result.msg)
return false
}
}
}
if(!isEmpty(opt)){
//替换自定义属性
$.extend(defaultOpt, opt)
}
//把属性与事件放到表格中，进行初始化
$("#" + id).datagrid(defaultOpt)
$("#" + id).datagrid('loadData', initData)
}
说明：1.设置URL为null后，则每次调用此方法都只会加载表格，不加载数据，调用此方法时就不需要再调用此方法之前设置URL了；
2.pageSize的参数不在pageList之中时，页面分页会默认取pageList中的第一个参数，此时pageSize设置无效。
3.loadFilter方法是为了处理后台返回的结果，并自动传给datagrid进行处理然后展示在页面
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）