Layui使用问题二

标签： Layui 分类： Javascript 创建时间：2020-06-30 07:53:34 更新时间：2024-11-15 10:49:43

1.layui tabel表头自动换行

官网上很多人提出了相应的问题，但是没有一个人回答的。于是我经过艰苦卓绝的探索，找打了相应的方法。
(1) 定义表头

 var history=table.render({
    elem: '#history_table'
    ,url: '' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
        {field: 'id', title: 'ID', width:60, align:'center',sort: true, fixed: 'left'}
        ,{field: 'recordTime',width:180, align:'center',title: '记录时间',sort: true,fixed: 'left'}
        ,{field: 'flowMass', width:120,align:'center',title: '瞬时流量<br>(t/h)',sort: true}
        ]]
        ,data:data
        ,toolbar: true
        ,defaultToolbar:["print","exports"]
    });               
});

(2) 修改表头的样式

1
2
3

.layui-table-cell{
    height: 50px;
}

(3) 显示效果

参考文章：
1.layui table表头标题的title属性换行问题
2.TABLE的表头如何换行
3.layui的静态表格，表头如何自动换行，而不是显示为…？

4.修改表头的样式

layui(layui-v2.5.6)的table有一个缺点，除了不能自定义表头样式以为，也不支持给单独的表头增加一个类，通过表头的style是修改的整一列的数据，而不是单独的一个表头的样式。目前只能通过css的属性选择器来修改某列表头的样式。

.analysis_dialog .layui-table-header tr th[data-field='id'] .layui-table-cell,
.analysis_dialog .layui-table-header tr th[data-field='recordTime'] .layui-table-cell,
.analysis_dialog .layui-table-header tr th[data-field='overHeat1'] .layui-table-cell,
.analysis_dialog .layui-table-header tr th[data-field='overHeat2'] .layui-table-cell{
    line-height: 55px;
}

表头的设置

layui.use(['table'], function(){
    var table = layui.table;
    //第一个实例
    var history=table.render({
        elem: '#history_table'
        ,url: '' //数据接口
        ,page: true //开启分页
        ,cols: [[ //表头
        {field: 'id', title: 'ID', width:60, align:'center',sort: true, fixed: 'left'}
        ,{field: 'recordTime',width:180, align:'center',title: '记录时间',fixed: 'left'}
        ,{field: 'overHeat1', width:120,align:'center',title: '测点过热度',sort: true}
        ,{field: 'overHeat2', width:120,align:'center',title: '站点过热度',sort: true}
        ]]
        ,data:data
        ,toolbar: true
        ,defaultToolbar:["print","exports"]
    });               
});

参考文章：
1.layui中table表头样式修改

5.嵌套dialog中表格无法自适应

我有两个弹出框，在第一个弹出窗口我创建了一个表格，然后点击这个表格的某一行，再弹出一个layer，在最后这个layer上，我创建了一个表格，但是出现了表格内容和表格头无法相适应的问题。无论我怎么改变表头的宽度，都无法影响下面的内容。

我尝试了在面板打开的时候，重新对表格进行大小缩放，调用table.resize()方法，但是没有作用。

解决方法就是使用 table.reload(‘id’) 方法代替 table.resize() 方法,进行表格的重新加载。

参考文章：
1.Layui数据表格不能自适应大小问题

6.使用layer.msg模拟加载中

使用layer.loading()进行加载中显示，如果请求时间过长的话，其他的页面就无法点击了，所以就使用了 layer.msg 模拟加载中，这样就可以显示加载中的同时还能点击其他地方。

1	var loadingDialog = layer.msg('正在加载', {icon: 16, time:0});

参考文章：
1.layui正在加载遮罩层

往期推荐

文章目录

微信公众号

广告位

诚心邀请广大金主爸爸洽谈合作

每日一省

isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

每日二省

为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

每日三省

== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

每日英语

Happiness is time precipitation, smile is the lonely sad.

幸福是年华的沉淀，微笑是寂寞的悲伤。