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)

   });

免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删