页面在初始化加载数据较多时会非常耗时,如果只加载表格,用户再根据自己的需要通过条件查询数据,就会节约一些时间,提高用户体验,所以在初始化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进行处理然后展示在页面
额。。。。做分页应该是直接从数据库那里拿数据的时候做的吧,你是全写静态了?反正我做的是数据库sql语句读数据库的时候读出多少到多少的,也就是比如第二页就是输出第21-40条这种,所以没这个问题,只要传一个请求的页码和搜索的条件就好,然后如果读不出数据就显示另一个页码,比如您查找的东西没找到啥米的。。。。你这个的话,要不就是先判断下是否存在那个文件,如果不存在就跳转到目录。。。。
你看下这个:http://blog.csdn.net/foart/article/details/3984928
网页链接
看一下这个吧,现在很少有人手动写分页了,一般都是用插件。或者现在主流的前端框架,都有用户量特别大的前端组件库,用起来很方便。其实这个分页手写js并不难,主要是理清逻辑就可以了,能写但是没必要~如果是比较老的前端框架,必须手写js分页逻辑,追问就行,我给你屡屡
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)