layui,是一款採用自身模塊規範編寫的前端 UI 框架,遵循原生 HTML/CSS/JS 的書寫與組織形式,門檻極低,拿來即用。其外在極簡,卻又不失飽滿的內在,體積輕盈,組件豐盈,從核心代碼到 API 的每一處細節都經過精心雕琢,非常適合界面的快速開發。
最近公司開始全面的更改前端的框架,由bootstrap更改為layui'框架,在嘗試使用layui編寫前臺邏輯時,遇到了很多的坑,在此做一些常用坑的解決辦法的總結。主要包含:
1、點擊按鈕,將父頁面數據傳遞到子頁面的問題
2、關閉子頁面刷新父頁面問題
3、動態地為form表單中的select添加option不顯示問題
4、form表單提交獲取表單數據問題
5、表格的初始化請求分頁參數、搜索重載表格以及表格內時間格式化問題
以上問題並不是有多難,只是在初步使用layui框架時,會有點摸不著頭腦而已。
彈出框
(1)彈出層父頁面給子頁面傳值
type 為 1的傳值:直接通過$(子頁面元素id).val(),本質上,子頁面與父頁面同屬一個window層
(2)關閉彈出層刷新父頁面表格
點擊事件
form表單中select動態添加option
form表單提交獲取數據
表格使用
表格基本配置
搜索重載表格
表格時間格式化
設置cols時,添加紅字部分代碼
{field: 'create_time', width: 180, title: '創建時間', align: "center",templet:'<div>{{ layui.util.toDateString(d.createDate, "yyyy-MM-dd HH:mm:ss") }}</div>',}