layui 渲染表格无法设置ajax请求头问题

刺骨的言语ヽ痛彻心扉 2022-03-28 14:38 981阅读 0赞

#### layui 渲染表格无法设置ajax请求头问题 ####

###### 前情提要： ######

*  相信很多朋友对 layui 都有一定了解，作为后台管理模板使用的前端框架算是一个比较新，也比较受欢迎的框架
 *  公司最近一个项目也在使用Layui，再渲染表格时，发现比较坑的一点，layui渲染表格的几种方式，均无法设置请求头！这可坑死人了。
 *  很多公司为了提升系统安全性，基本都会使用auth2.0，不带token基本就不用玩了。无法设置请求头，还带毛线token啊？

###### 言归正传： ######

上网查询了很多，layui 渲染表格设置请求头的问题，回答最多的就是改源码！  
layui渲染表格的几种方式，其实都是使用内部封装的ajax请求，去获取数据然后渲染的。  
比如下面这种方式：

只有一个url，也没有属性可以设置请求头！

##### 如何解决： #####

*  首先 自己封装一个ajax模块

// 定义模块
    layui.define(['jquery','myWindow','auth'], function (exports) { 
        var $ = layui.jquery;
        var myWindow = layui.myWindow;
        var auth = layui.auth;
        var layer = layui.layer;
        var myAjax = { 
        	// 登录,获取token,设置token
            login:function (data,callback) { 
                $.ajax({ 
                    type:"post",
                    async:true,
                    url:projectPath+"/auth",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    data:data,
                    success:function (response) { 
                        if(response.code == SUCCESS_STATUS){ 
                            //设置token
                            auth.setToken(response.data);
                            //调整页面
                            myWindow.redirectToIndex();
                        }else{ 
                            callback(response);
                        }
                    }
                })
            },
            // token有效时间内 刷新
            refresh:function () { 
                $.ajax({ 
                    type:"post",
                    async:true,
                    headers: { 
                        Authorization: auth.getToken()
                    },
                    url:projectPath+"/refresh",
                    dataType: "json",
                    success:function (response) { 
                        if(response.code == SUCCESS_STATUS){ 
                            //设置token
                            auth.setToken(response.data);
                        }else{ //刷新token出错
                            myWindow.redirectToLogin();
                        }
                    }
                })
            },
           	// 封装ajax
            ajax:function (uri,async,data,callback) { 
                $.ajax({ 
                    type:"post",
                    headers: { // 设置头部
                        Authorization: auth.getToken()
                    },
                    async:async,
                    url:projectPath+uri,
                    dataType: "json",
                    data:data,
                    success:function (response) { 
                        if(response.code == REDIRECT_STATUS){ 
                            myWindow.redirectToLogin();
                            //myWindow.openInCurrentPage(response.data);
                        }else{ 
                            callback(response);// 回调函数
                        }
                    }
                })
             }
        };
    
        exports('myAjax', myAjax);
    });

*  使用js方式渲染表格

// 引入layui.js这里省略了，你们要自己引入，就在这里引入
    <script>
    							var tableData;
                                layui.use(['element','myAjax','laypage','layer'], function(){ 
                                    var laypage = layui.laypage
                                        ,layer = layui.layer;
    
                                    var myAjax = layui.myAjax;//使用自己封装的ajax,只要登陆了,内部就已经设置好了请求头，直接使用模块就行了
                                    var $ = layui.jquery;
                                    var element = layui.element();
                                    var data;
                                    //加载菜单
                                    myAjax.ajax("/invoice/list",false,null,renderTable);// 发送带有请求头的ajax，获取表格数据
                                    //加载完成 初始化
                                    element.init();
    
                                    // 渲染数据表格
                                    function renderTable(response) { 
                                        data = response.data;
                                        console.log(data.length);
                                    }
                                    // 分页
                                    var nums = 5; //每页出现的数据量
                                    //模拟渲染
                                    var render = function(data, curr){ //这里按照你们的需要进行渲染就行，data是你们拿到的list数据
                                        var showTable = "";
    									var thisData = data.concat().splice(curr*nums-nums, nums);
    
                                        for (var i = 0;i<thisData.length;i++){ 
                                            var usedStatus = "已开具";
                                            var id = thisData[i].id;
                                            var status = thisData[i].status;
                                            var table = "<thead>"+
                                                    "<td class='hidden-xs'>"+thisData[i].id+"</td>"+
                                                    "<td class='hidden-xs'>"+thisData[i].orderId+"</td>"+
                                                    "<td class='hidden-xs'>"+thisData[i].orderFee+"</td>"+
                                                    "<td class='hidden-xs'>"+thisData[i].companyName+"</td>"+
                                                    "<td class='hidden-xs'>"+thisData[i].companyEin+"</td>"+
                                                    "<td class='hidden-xs'>"+thisData[i].email+"</td>"+
                                                    "<td class='hidden-xs'>"+thisData[i].createTime+"</td>";
    												if (thisData[i].status == usedStatus) { 
    												    console.log(thisData[i].status+"状态为已开具")
                                                        table += "<td class='hidden-xs'><button class='layui-btn layui-btn-mini layui-btn-danger layui-btn-radius' style='background-color: #FF5722'>"+thisData[i].status+"</button></td>";
    												}else{ 
                                                        table += "<td class='hidden-xs'><button class='layui-btn layui-btn-mini layui-btn-radius'>"+thisData[i].status+"</button></td>";
    												}
                                            	table +="<td class='hidden-xs'><button class='layui-btn layui-btn-mini layui-btn-radius' onclick='invoice(""+ id + "",""+ status + "");'>开票</button></td>";
                                            showTable+=table;
                                        }
                                        return showTable;
                                    };

分页在下一篇回讲到  
下面是效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFCdWlsdA_size_16_color_FFFFFF_t_70]

*  到这里带请求头的ajax获取数据，渲染表格就写完了
 *  这种方式 不能使用layui的自动分页，需要使用自定义分页  
    留着下次写了，有问题的可在下方评论~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFCdWlsdA_size_16_color_FFFFFF_t_70]: /images/20220328/884dd2dbc6bf44b2b08d7c0a5e19fd7d.png