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

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

前情提要：

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

言归正传：

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

var table = layui.table
            ,form = layui.form;
    layui.use('table', function () {  // 引入 table模块
        table.render({
            id:"dataTable",//
            elem: '#layui_table_id',//指定表格元素
            url: '/menu/menuList.ajax',  //请求路径
            cellMinWidth: 20 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,skin: 'line ' //表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）
          　//,even: true    //隔行换色
            ,page: true  //开启分页
            ,limits: [10,20,50]  //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
            ,limit: 10 //每页默认显示的数量
            ,method:'post'  //提交方式
         　　,cols: [[
                {type:'checkbox'}, //开启多选框
                {
                    field: 'menuId', //json对应的key
                    title: 'ID',   //列名
                    sort: true   // 默认为 false,true为开启排序
                }
            ]]
        });
    });    

只有一个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(&quot;"+ id + "&quot;,&quot;"+ status + "&quot;);'>开票</button></td>";
                                        showTable+=table;
                                    }
                                    return showTable;
                                };

分页在下一篇回讲到
下面是效果

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