zoukankan      html  css  js  c++  java
  • 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
            }
        });
  • 相关阅读:
    ESM CORR
    格式化用jad反编译混淆过的代码,能去大部分错误 (zhuanzai)
    Simple Event Correlation installation and configuration
    linux系统时间和硬件时钟问题(date和hwclock)
    float:center???
    [Android]Volley源代码分析(二)Cache
    iTOP-4412 开发板的 GPIO 是怎么操作的?
    Android手掌抑制功能的实现
    第十二周项目3-摩托车继承自行车和电动车
    面对苦难请勇敢
  • 原文地址:https://www.cnblogs.com/slfmeimei/p/10722080.html
Copyright © 2011-2022 走看看