Layui 手冊

icon-圖標

1：√
2：×
3：問號
4：鎖
5：哭臉
6：笑臉
7：感嘆號

使用layer.msg('提示',{icon:1});  目前只有7種圖標可選，用的適當還是很好看的。 

表格刷新

parent.layui.table.reload('表格的ID', { page: { curr: 1 } });

這種是彈出層頁面刷新父窗體表格數據的慣用手法，但我把這種重載寫成一個方法，父頁面還是可以正常調用。如果在子窗體調用父窗體的這個方法則會出錯。方法和layui.use在同一個script標籤下，方法會失效，只能寫在另一個script標籤裏面。

在IE瀏覽器中進行數據添加後，數據未能正確重載。這是因爲IE瀏覽器在執行請求時，如果url請求參數一致，會默認調用緩存，這樣你的數據依舊是初次加載的數據。

解決措施：在表格重載的條件中加一個時間參數，讓它認爲這是一個新請求就行了，就不會調用緩存。

where: { time:new Date()｝

數據查詢

在對錶格進行查詢等操作時，如果表格使用的是自動渲染，同時頁面中有文本框查詢，下拉框查詢，這樣進行查詢時。如果你上一次使用了下拉框中的條件做了查詢，當你再使用文本框進行查詢時，下拉框的參數還是會攜帶上一次的值，導致查詢結果異常。使用方法級渲染可避免此類問題，二者重載的方式存在差異。當然，有時候爲了更方便的自定義表頭，使用了自動渲染且條件參數相對較少，你可以考慮進行查詢時給其他參數賦空值。

定位當前頁

場景：在操作表格中，對第二頁數據進行了修改操作，當你重載表格時，頁碼會自動跳到第一頁，如何修改完成後，就停留在當前頁呢？

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

這是模擬分頁的那個確定按鈕，我遇到這個問題，在Layui社區搜到的答案。具體請見

https://fly.layui.com/jie/13973/

文件上傳獲取文件名

在官方的文檔選擇文件的回調中有這麼一串代碼，只是我並沒有理解，所以不知道怎麼獲取，後來才知曉file參數所代表的含義。

,choose: function(obj){

//將每次選擇的文件追加到文件隊列

var files = obj.pushFile();

//預讀本地文件，如果是多文件，則會遍歷。(不支持ie8/9)

obj.preview(function(index, file, result){

console.log(index); //得到文件索引

console.log(file); //得到文件對象  這裏已經說了得到了文件對象，那就可以直接file.name直接獲取文件名

console.log(result); //得到文件base64編碼，比如圖片

//obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 開始新增

表格顯示圖片

有時候爲了豐富表格內容，會對一些內容進行特別的樣式編排，比如對某項內容使用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}
  ]]
}); 

但存在缺點，對於圖片的大小控制很難操控，可能是因爲表格的單元格樣式，我很想顯示成一個略縮圖的樣子，但是沒有實現，只是大致設了大小，顯示一塊內容內容，看起來是真的醜。😄

表單元素渲染問題

我想實現一個複選框反選的功能，語法沒問題，但最後就是沒效果，後來才知道運用它的表單元素，得重新渲染才行。　　form.render(); //更新全部

此外，如果表單用了樣式，複選框的點擊事件會失效，原因可能是上了一個皮膚，可能已經不認識它了，你如果不想用既定的樣式，可以在元素樣式中加上lay-ignore，這樣就是原生的了。

日期插件

當一個頁面想調用兩個日期插件時，網上大佬已經給了答案，經測試可以使用。

同時，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>