一，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模塊

layui.config({

base: '../../layuiadmin/' //你存模塊的目錄，默認是module下

}).extend({//設定擴展模塊所在的目錄

index: 'lib/index' //相對于上述 base目錄，同理以下相對于本目錄

,sample2: '../../views/home/mysample' //加載mysample.js

}).use(['index', 'sample2']); //使用sample2模塊

圖例：

二，Xm-select

參考：Xm-select官網

始于 layui 的一個多選解決方案。前身 formSelects, 由于渲染速度慢, 代碼冗余, 被放棄了

1.普通多選形式

//多選下拉框渲染對象

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//返回數據遵循官網指定結構

}

})

});

總結

以上是生活随笔為你收集整理的xmselect重新渲染_Layui使用总结及多选方案Xm-select的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。