layui table单元格监听事件、layui请求中文乱码解决、layui渲染、layui新建tab页

最近工作中，要自己动手写前端，有必要记录一下自己踩过的坑，中文乱码的过程：

先写了一个layui点击按钮打开新的tab页（layui新建tab页）：

table.on('tool(tableTextile)', function (obj) {

        let data = obj.data;

        switch (obj.event) {

            case 'detatils':

                miniTab.openNewTabByIframe({

                    href: encodeURI("../../page/high/csmb-dept-stock-details.html?deptId="+data.deptId+"&deptName="+data.deptName+"&startTime="+data.startTime+"&endTime="+data.endTime),

                    title:"库存详情",

                });            

                break;

            default:

                break;

        }

    });

------url后面带了参数，有可能是中文（问题导致的起点）

----新页面接收参数

var Request = new Object();

    Request = GetRequest();

-----参数解析，分割函数（重点decodeURI包裹url,解决中文乱码）

 function GetRequest() {

        var url = decodeURI(location.search); //获取url中"?"符后的字串

        var theRequest = new Object();

        if (url.indexOf("?") != -1) {

            var str = url.substr(1);

            strs = str.split("&");

            for(var i = 0; i < strs.length; i ++) {

                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);

            }

        }

        return theRequest;

    }

------发起后端请求的url,deptName中文乱码，（前面没加decodeURI前，刚开始一直以为前后传递时乱码，后面追溯发现是前前传递导致）

var url = g_const.url + "/api/v1/csmbsHighInBox/deptStockDetail?deptId="+Request.deptId+"&deptName="+Request.deptName;

-----layui页面渲染table.render

var tableIns = table.render({

        elem: '#tableTextile',

        url: url,

        method: 'get',

        headers: {

            "Authorization": sessionStorage.getItem(g_const.sessionTokenHeader)

        },

        title: '耗材类别信息表',

        sink: 'line',

        toolbar: '#toolbar', //开启头部工具栏，并为其绑定左侧模板

        defaultToolbar: ['filter', 'exports', 'print'],

        height: 'full-110',

        cols: [

            {

                field: 'classifyName',

                title: '耗材名称',

                align: 'center',

                width: 180,

                event: 'classifyName',

                totalRowText: '合计',

            }, {

                field: 'count',

                title: '设备含有库存量',

                align: 'center',

                totalRow: true,

                style: 'color:red;',

                event: 'count',

                width: 180

            }, {

                field: 'startTime',

                title: '开始时间',

                width: 180,

                event: 'startTime',

                align: 'center'

            }, {

                field: 'endTime',

                title: '结束时间',

                align: 'center',

                event: 'endTime',

                width: 180

            }]

        ],

        even: true, //开启隔行背景

        page: true, //开启分页

        parseData: function (res) {

            return {

                'code': res.code,

                'msg': res.msg,

                'count': res.code == 0 ? res.data.count : 0,

                'data': res.code == 0 ? res.data.records : null

            }

        },

        done: function (res, curr, count) { // 表格渲染完成之后的回调

        }

    });

-----------------------layui table单元格监听事件----------------------------------------------------

table.on('tool(tableTextile)' 监听的elem要和table渲染的elem一样 elem: '#tableTextile',

 // 监听单元格点击事件

    table.on('tool(tableTextile)', function (obj) {

        var data = obj.data;

        var type = '';

        switch(obj.event) {

            case 'orderNum' :

                type = '订单数量';

                break;

            case 'receivedNum':

                type = '入库数量';

                break;

            case 'notReceived':

                type = '未入库数量';

                break;

             case 'startTime':

                type = '开始时间';

                break;

        }

        console.log('你点击的单元格的内容是' + data[obj.event], '------对应的列是' + type)

    });