文章目錄

• 一，Layui使用
• 1.基礎說明
• 2.laydate
• 3.Layui上傳大檔案遊覽器巨慢或者崩潰問題
• 4.擴充套件一個模組並使用
• 二，Xm-select
• 1.普通多選形式
• 2.拓展下拉樹

一，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上傳大檔案遊覽器巨慢或者崩潰問題

參考：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