Layui 手册

一、icon-图标

1：√
2：×
3：问号
4：锁
5：哭脸
6：笑脸
7：感叹号

使用layer.msg('提示',{icon:1});  目前只有7种图标可选，用的适当还是很好看的。 

二、数据表格

1）数据重载

  在IE浏览器中进行数据添加后，数据没有显示。这是因为IE浏览器在执行请求时，如果url请求参数一致，会默认调用缓存，这样你的数据依旧是初次加载的数据。

  解决措施：

  ①在表格重载的条件中加一个时间参数，让它认为这是一个新请求就行了，就不会调用缓存。where: { time:new Date()｝

  ②可以将表格的请求方式设置为POST，表格默认是以get方式。method: 'post'

  如果表格使用的是自动渲染，同时页面中有文本框查询，下拉框查询，这样进行查询时。如果你上一次使用了下拉框中的条件做了查询，当你再使用文本框进行查询时，下拉框的参数还是会携带上一次的值，导致查询条件串联。

  解决措施：

  使用方法级渲染可避免此类问题，二者重载的方式存在差异。你也可以考虑进行查询时给其他参数赋空值。

2）定位当前页

  场景：在操作表格中，对第二页数据进行了修改操作，当你重载表格时，页码会自动跳到第一页，如何修改完成后，就停留在当前页呢？

$(".layui-laypage-btn")[0].click(); 

  这是模拟分页的那个确定按钮，我遇到这个问题，在Layui社区搜到的答案。如果你的表格没有使用分页或者第一次加载数据为空，在IE中会提示错误，它找不到该按钮的点击事件。

具体请见https://fly.layui.com/jie/13973/

3）表格显示图片

  有时候为了丰富表格内容，会对一些内容进行特别的样式编排，比如对某项内容使用a标签跳转，使用表单元素如checkbox来展示状态，这些都可以用templet模版来实现。那如何显示图片呢，下面就来说说实现方式，官方文档给出了三种templet语法方式，这里所使用的的是函数转义的方式。但存在缺点，对于图片的大小控制很难操控，可能是因为表格的单元格样式，我很想显示成一个略缩图的样子，但是没有实现。只是大致设了大小，撑开表格，显示了图片的一部分内容，看起来是真的丑，这个只能勉强实现，但远没有达到实际效果。

  templet:function (d) { return '<div><img src='+d.PrizeImg+'></div>' }

  官方栗子：

table.render({
  cols: [[
    {field:'title', title: '文章标题', width: 200
      ,templet: function(d){
        return 'ID：'+ d.id +'，标题：<span style="color: #c00;">'+ d.title +'</span>'
      }
    }
    ,{field:'id', title:'ID', width:100}
  ]]
}); 

4) done 数据渲染完的回调

  通过这个函数你可以做很多事情，比如设置表头样式，设置表格隔行背景颜色，针对一些特别需求，在这里可以完成。

5）修改表格行高 

  #id + .layui-table-view tbody > tr > td > .layui-table-cell {height: 15px;line-height: 15px;}

  给上表格id，在页面上添加此样式，就可以覆盖layui中对于表格行高的样式

三、form表单

1）元素渲染问题

  我想实现一个复选框反选的功能，语法没问题，但最后就是没效果，后来才知道运用它的表单元素，得重新渲染才行。　　form.render(); //更新全部

此外，如果表单用了样式，复选框的点击事件会失效，原因可能是上了一个皮肤，可能已经不认识它了，你如果不想用既定的样式，可以在元素样式中加上lay-ignore，这样就是原生的了。

2）日期插件

  当一个页面想调用两个日期插件时，网上大佬已经给了答案，经测试可以使用。同时，trigger: 'click'  也是解决时间插件闪屏的方法。

<script>
    function useLayDateMultiple(cls) {
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            lay('#' + cls).each(function () {
                laydate.render({
                    elem: this,
                    type: 'datetime',
                    trigger: 'click'
                });
            });
        });
    }
    useLayDateMultiple('第一个元素ID');
    useLayDateMultiple('第二个元素ID');
</script>