一，Layui使用
官網參考：Layui官網
后台示例：LayUI后台管理與綜合示例
1.基礎說明
加載所需模塊：layui 的內置模塊並非默認就加載的，他必須在你執行該方法后才會加載
layui.use(['form', 'laydate'], function(){
var form= layui.form
,laydate= layui.laydate;
//do something
});
- 本地存儲：對 localStorage 和 sessionStorage 的友好封裝，可更方便地管理本地數據。
- localStorage 持久化存儲：layui.data(table, settings)，數據會永久存在，除非物理刪除。
- sessionStorage 會話性存儲：layui.sessionData(table, settings)，頁面關閉后即失效。注：layui 2.2.5 新增
//本地存儲存入：參數1.調用的值 2.所要存入的數據
//【增】：向 remind_obj 表插入一個 字符串 字段，如果該表不存在，則自動建立。
var obj = {
workId: workId,//工作類型
workName: $('#workId').attr('data-name'),
typeId: typeId,//2級類型
taskTypeName: $('#typeId').attr('data-name'),//2級類型
};
localStorage.setItem("remind_obj", JSON.stringify(obj));
//【查】：向 remind_obj 表讀取全部的數據
var localTest = localStorage.getItem("remind_obj");
//!$.isEmptyObject()如果不是空對象”{}“
if (localTest!=null && !$.isEmptyObject(localTest)) {
var obj = JSON.parse(localTest);
//提醒類型
$('#workId').attr( 'data-val', obj.workId );
$('#workId').val( obj.workName );
$('#typeId').attr( 'data-val', obj.typeId );
$('#typeId').val( obj.taskTypeName );
}
2.laydate
//常規用法
laydate.render({
elem: '#dayDate'
,trigger: 'click'
});
//同時綁定多個
lay('.test-item').each(function(){
laydate.render({
elem: this
,trigger: 'click'
,type: 'time'
});
});
3.Layui上傳大文件游覽器巨慢或者崩潰問題
4.擴展一個模塊並使用
/**
mysample.js里擴展一個sample2模塊
**/
layui.define(function(exports){
//todoing
//輸出sample2接口
exports('sample2', {});
});
// 在homepage2.html里使用sample2模塊
<script>
layui.config({
base: '../../layuiadmin/' //你存模塊的目錄，默認是module下
}).extend({//設定擴展模塊所在的目錄
index: 'lib/index' //相對於上述 base目錄，同理以下相對於本目錄
,sample2: '../../views/home/mysample' //加載mysample.js
}).use(['index', 'sample2']); //使用sample2模塊
</script>
圖例：
二，Xm-select
參考：Xm-select官網
始於 layui 的一個多選解決方案。前身 formSelects, 由於渲染速度慢, 代碼冗余, 被放棄了
1.普通多選形式
<div id="demo1" style="width: 190px;"></div>
//多選下拉框渲染對象
var dataTypes = null;
dataTypes = xmSelect.render({
el: '#dataTypes',
language: 'zn',
//工具欄
toolbar: {
show: true
},
filterable: true,//過濾搜索
paging: true,//分頁
pageSize: 10,//每頁條數
height: '500px',
//autoRow: true,//自動換行
data: arr
})
//獲取value字符串逗號分割
var valueStr = dataTypes.getValue('valueStr');
//給多選賦值(value方式)
dataTypes.setValue( [ 1,2 ] );
//搜索input框失去焦點模擬：選擇完畢關閉監聽
$dataTypes = $('#dataTypes')
$dataTypes.on('blur', '.xm-search-input', function() {
//hasClass() 方法檢查被選元素是否包含指定的 class。
setTimeout(() => {
if($dataTypes.find('.xm-body').hasClass('dis')) {
var valueStr = dataTypes.getValue('valueStr');
console.log(valueStr);
}
}, 300);
});
1.1 搜索input框失去焦點事件：模擬選擇完畢關閉監聽
//搜索input框失去焦點模擬：選擇完畢關閉監聽
$dataTypes = $('#xmDataTypes')
$dataTypes.on('blur', '.xm-search-input', function() {
//hasClass() 方法檢查被選元素是否包含指定的 class
setTimeout(() => {
if($dataTypes.find('.xm-body').hasClass('dis')) {
//todo
}
}, 300);
});
2.拓展下拉樹
賦值與取值與普通多選一致
//多選下拉框渲染對象
var run_class_users = null;
//加載下拉框數據： 執行用戶
$.get(ajaxPath+"action/share/getUserToSelect"
,function(data){
run_class_users = xmSelect.render({
el: '#run_class_users',
toolbar: {
show: true,//是否展示工具條
},
direction: 'down',
autoRow: true,
filterable: true,
tree: {
//是否顯示樹狀結構
show: true,
//是否展示三角圖標
showFolderIcon: true,
//是否顯示虛線
showLine: false,
//間距
indent: 20,
//默認展開節點的數組,默認展開新東盛8006
expandedKeys: [8006],
//是否嚴格遵守父子模式
strict: true,
},
filterable: true,
height: 'auto',
data(){
return data.treeDate//返回數據遵循官網指定結構
}
})
});
原文：https://blog.csdn.net/qq_42687916/article/details/104011488