loadGrid layui

function httpRequest(option) {
    if (!option.url) {
        return false
    }
    var defaultOption = {
        url: '',
        type: 'get',
        data: null,
        timeout: 3000,
        query: null,
        dataType: 'json',
        contentType: 'application/x-www-urlencoded',
        async: true,//默认是异步
        cache: true,//默认是true,表格缓存
        processData: true,//对发送的内容进行转字符串,false表示不需要转换
        beforeSend: function (XHR, request) {
            this.index = layui.layer.load(0);
            var tokenLocal = localStorage.getItem('token');
            if (!tokenLocal) {
                layui.layer.close(this.index)
                XHR.abort();
                return
                // window.location.href='index.html'
            };
            XHR.setRequestHeader('access-token', tokenLocal);
        },
        success: function (response, status, XHR) {
            if (option.success) {
                option.success(response)
            }
            // if (response.code) {
            //     option.successNext(response.data, status, XHR)
            // } else {
            //     layer.msg(response.message)
            // }
        },
        complete: function (XHR, status) {
            var that = this;
            setTimeout(function () {
                layui.layer.close(that.index)
            }, 200)
        },
        error: function (XHR, statusText) {
            // XHR表格ajax对象,statusText表示状态对一个的文字 
            /*  
             XHR.status 0 表示网络原因,比如没网,或者网速过慢导致超时,
             error(错误) notmodified(因为文件没变有缓存) parsererror(请求的数据类型和后端返回的数据类型不一致) timeout(超时)
            */
            console.log(XHR);
            console.log(statusText);
            var textStatus = statusText;
            var status = XHR.status;
            switch (status) {
                case 0:
                    if (textStatus == 'error') {
                        layer.msg('网络未连接,请检查网络')
                    } else if (textStatus == 'timeout') {
                        layer.msg('请求超时')
                    } else if (textStatus == 'parsererror') {
                        layer.msg('请求数据类型错误')
                    } else if (textStatus == 'notmodified') {
                        layer.msg('notmodified');
                    }
                    break;
                case 400://表示参数错误
                    var responseText = XHR.responseText.message;
                    layer.msg(responseText)
                    break;
                case 401:// responseText返回unAuthorized(未授权)
                    localStorage.setItem('token');
                    layer.msg('登录已过期,请重新登录');
                    setTimeout(function () {
                        window.location.href = 'index.html'
                    }, 2000)
                    break;
                case 404:
                    layer.msg('访问资源不存在')
                    break;
                case 500:
                    layer.msg('服务器错误')
                    break;
                default:
                    layer.msg('未知错误')
            }

        }

    };

    if (option.query) {
        var queryStr = ''
        for (var i in option.query) {
            queryStr += i + '=' + option.query[i] + '&';
        }
        console.log(queryStr);

        option.query = '?' + queryStr.slice(0, queryStr.length - 1);
        option.url = option.url + option.query;
    }

    var option = Object.assign({}, defaultOption, option);
    $.ajax(option);
}
function loadGridData(option) {
    var defaultOption = {
        url: '',
        type: 'get',
        contentType: 'application/x-www-urlencoded',
        height: 'full',
        cols: [],
        limit: 10,
        curr: 1,
        query: null
    };
    var option = Object.assign({}, defaultOption, option);
    var p1 = getGridData(option);
    p1.then(function (data) {
        layui.table.render({
            elem: '#' + option.elem,
            cols: [option.cols],
            data: data.dataList,
            height: option.height
        });
        layui.laypage.render({
            elem: option.pageEle,
            count: data.allRow,
            limit: option.limit,
            curr: option.curr,
            jump: function (obj, first) {
                if (!first) {
                    option.query = {
                        pageNum: obj.curr,
                        pageSize: 10
                    }
                    option.curr = obj.curr;
                    loadGridData(option)
                }
            }
        })
    })

}
function getGridData(option) {
    return new Promise(function (resolve, reject) {
        httpRequest({
            url: option.url,
            type: option.type,
            contentType: option.contentType,
            data: option.data,
            query: option.query,
            success: function (response, status, XHR) {
                if (response.data.dataList) {
                    resolve(response.data)
                } else {
                    reject(response.message)
                }
            }
        })
    });
}

用法:

 loadGridData({
        url: 'http://10.130.219.77:8088/bazk/api/v1/medicalRecords/medPageList',
        type: 'post',
        elem: 'ele-table',
        contentType: 'application/json',
        height: '300',
        pageEle: 'page',
        data: JSON.stringify(params),
        cols: col,
        query:{
            pageNum:1,
            pageSize:10
        }
    });
原文地址:https://www.cnblogs.com/slfmeimei/p/10722080.html