分类 前端 下的文章

现在有个需求，弹窗打开时，监听窗口大小变化，并动态调整弹窗大小，避免弹窗比窗口还大，导致弹窗无法操作。弹窗关闭后，移除监听 resize。因为执行时需要有参数，所以 removeEventListener 并不是很适用。

- 阅读剩余部分 -

layui 的表格头部工具栏左侧图标只有筛选列、导出和打印，功能有点少。经过查阅源代码和手册，找到了全局添加自定义工具的方法，在此记录一下。

头部工具栏左侧图标配置

查阅手册，配置头部工具栏左侧图标配置，的方式如下：

layui.table.render({ //其它参数在此省略      
  defaultToolbar: ['filter', 'print', 'exports', {
    title: '提示' //标题
    ,layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
    ,icon: 'layui-icon-tips' //图标类名
  }]
});

字符串的工具是默认自带的，如果是自定义，需要用对象。参照示例，我在这里加一个刷新工具。

layui.table.render({ //其它参数在此省略      
  defaultToolbar: ['filter', 'print', 'exports', {
    title: '刷新'
    ,layEvent: 'LAYTABLE_REFRESH'
    ,icon: 'layui-icon-refresh'
  }]
});

在layui.table.render()里定义只适用于单个表格，而我想的是全局默认都有。再经过一番研究，找到设置全局项方法layui.table.set()，可以在全局公共文件里去设置默认的defaultToolbar。

layui.use('table', () => {
  layui.table.set({     
    defaultToolbar: [
      'filter', 'print', 'exports'
      , {title: '刷新', layEvent: 'LAYTABLE_REFRESH', icon: 'layui-icon-refresh'}
    ]
  })
})

监听工具栏事件

工具图标加上去了，接下来就是监听刷新按钮的事件了。Layui的底层API提供了layui.onevent()方法，用于监听事件。

layui.onevent('table', 'toolbar()', obj => {
  // 判断是否是刷新事件(LAYTABLE_REFRESH)
  if ("LAYTABLE_REFRESH" === obj.event) {
    // 刷新当前表格
    layui.table.reload(obj.config.id);
  }
})

完整代码

到此，自定义工具已搞定，以下是完整代码：

layui.use('table', () => {
  // 设置默认表格头部工具栏左侧图标
  layui.table.set({
    defaultToolbar: [
      'filter', 'print', 'exports'
      , {title: '刷新', layEvent: 'LAYTABLE_REFRESH', icon: 'layui-icon-refresh'}
    ]
  })

  // 监听表格头部工具栏事件
  layui.onevent('table', 'toolbar()', obj => {
    // 判断是否是刷新事件(LAYTABLE_REFRESH)
    if ("LAYTABLE_REFRESH" === obj.event) {
      // 刷新当前表格
      layui.table.reload(obj.config.id);
    }
  })
})

layui的数据表格用起来的确很方便，开发时能节省很多时间。但是，在投入使用后，导出的表格却是能收到很多反馈，说内容不对。不对的地方主要体现在身份证号码之类的比较长数值，用Excel软件打开后，15位以后的数值会丢失，导致身份证号码不完整。Layui最近一两年的更新力度越来越小了，经常跳票，也不知道能活多久，只能先自己动手吧~

首先，我们用文本查看工具查看导出的内容，可以确定，导出的身份证号码是完整，但用Excel软件打开之后，就出问题了。为此，我百度了下Excel的处理机制，得知，Excel显示数字时，如果数字大于12位，它会自动转化为科学计数法，如果数字大于15位，它不仅用于科学技术法表示，还会只保留高15位，其他位都变0。

如果要解决这个问题，目前只想到一个解决方法，让Excel处理这个数据的时候，不识别它为数值。这要怎么做呢？

首先，我们先前往github下载未压缩过的代码，搜索table.exportFile = function
这个方法的原始代码如下

//表格导出
table.exportFile = function(id, data, type){
    var that = this;

    data = data || table.clearCacheKey(table.cache[id]);
    type = type || 'csv';

    var config = thisTable.config[id] || {}
        ,textType = ({
        csv: 'text/csv'
        ,xls: 'application/vnd.ms-excel'
    })[type]
        ,alink = document.createElement("a");

    if(device.ie) return hint.error('IE_NOT_SUPPORT_EXPORTS');

    alink.href = 'data:'+ textType +';charset=utf-8,\ufeff'+ encodeURIComponent(function(){
        var dataTitle = [], dataMain = [], dataTotal = [];

        //表头和表体
        layui.each(data, function(i1, item1){
            var vals = [];
            if(typeof id === 'object'){ //如果 id 参数直接为表头数据
                layui.each(id, function(i, item){
                    i1 == 0 && dataTitle.push(item || '');
                });
                layui.each(table.clearCacheKey(item1), function(i2, item2){
                    vals.push('"'+ (item2 || '') +'"');
                });
            } else {
                table.eachCols(id, function(i3, item3){
                    if(item3.field && item3.type == 'normal' && !item3.hide){
                        var content = item1[item3.field];
                        if(content === undefined || content === null) content = '';

                        i1 == 0 && dataTitle.push(item3.title || '');
                        vals.push('"'+ parseTempData(item3, content, item1, 'text') + '"');
                    }
                });
            }
            dataMain.push(vals.join(','));
        });

        //表合计
        layui.each(that.dataTotal, function(key, value){
            dataTotal.push(value);
        });

        return dataTitle.join(',') + '\r\n' + dataMain.join('\r\n') + '\r\n' + dataTotal.join(',');
    }());

    alink.download = (config.title || 'table_'+ (config.index || '')) + '.' + type;
    document.body.appendChild(alink);
    alink.click();
    document.body.removeChild(alink);
};

然后将里面的

vals.push('"'+ parseTempData(item3, content, item1, 'text') + '"');

替换成

content = parseTempData(item3, content, item1, 'text').replace(/(^\s*)|(\s*$)/g, "");
if (/^\d+$/.test(content) && content.length > 15 && type == 'xls') {
    vals.push('="'+ content + '"');
} else {
    vals.push('"'+ content + '"');
}

显示问题解决了，但不适合用于数据运算，但办公室的Excel大神们应该有办法吧。反正我能让他正常显示就行了，其它我不管，哈哈。

哦，对了，差点忘了标题。上面只是解决了数值大于15位会丢失尾数的问题，并没有解决科学计数法的问题。如果想不显示科学计数法，将里面的代码替换下即可。其实推荐使用上面的代码就可以了，科学计数法问题可以设置单元格格式来解决。

vals.push('"'+ parseTempData(item3, content, item1, 'text') + '"');

替换成

content = parseTempData(item3, content, item1, 'text').replace(/(^\s*)|(\s*$)/g, "");
if (/^\d+$/.test(content) && content.length > 12 && type == 'xls') {
    vals.push('="'+ content + '"');
} else {
    vals.push('"'+ content + '"');
}
  1. 1
  2. 2