您现在的位置:首页 >> 前端 >> 内容

datagrid初始化表格时不加载数据及分页设置无效的原因

时间:2017/7/14 10:03:20 点击:

  核心提示:页面在初始化加载数据较多时会非常耗时,如果只加载表格,用户再根据自己的需要通过条件查询数据,就会节约一些时间,提高用户体验,所以在初始化datagrid时想只加载表格不加载数据,做到数据与表格加载分离...

页面在初始化加载数据较多时会非常耗时,如果只加载表格,用户再根据自己的需要通过条件查询数据,就会节约一些时间,提高用户体验,所以在初始化datagrid时想只加载表格不加载数据,做到数据与表格加载分离的效果。

经过实验发现,使用.datagrid()方法时,参数中只要有URL存在,都会自动调用一次加载数据,可设置url参数为null,则加载表格时就不会向后台发出请求;但是此时如果用户想重置页面条件,重新加载页面时,由于没有请求后台,只加载表格,则会发生页面条件清空,表格数据还在或者表格数据为空分页展示的记录却不为0的现象,所以也需要重置数据和分页参数,具体代码如下:

/**
 * 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进行处理然后展示在页面

Tags:DA AT TA AG 
作者:网络 来源:chengsi101