xmselect重新渲染_Layui使用总结及多选方案Xm-select
一，Layui使用
1.基礎(chǔ)說(shuō)明
加載所需模塊：layui 的內(nèi)置模塊并非默認(rèn)就加載的，他必須在你執(zhí)行該方法后才會(huì)加載
layui.use(['form', 'laydate'], function(){
var form= layui.form
,laydate= layui.laydate;
//do something
});
本地存儲(chǔ)：對(duì) localStorage 和 sessionStorage 的友好封裝，可更方便地管理本地?cái)?shù)據(jù)。
localStorage 持久化存儲(chǔ)：layui.data(table, settings)，數(shù)據(jù)會(huì)永久存在，除非物理刪除。
sessionStorage 會(huì)話性存儲(chǔ)：layui.sessionData(table, settings)，頁(yè)面關(guān)閉后即失效。注：layui 2.2.5 新增
//本地存儲(chǔ)存入：參數(shù)1.調(diào)用的值 2.所要存入的數(shù)據(jù)
//【增】：向 remind_obj 表插入一個(gè) 字符串 字段，如果該表不存在，則自動(dòng)建立。
var obj = {
workId: workId,//工作類型
workName: $('#workId').attr('data-name'),
typeId: typeId,//2級(jí)類型
taskTypeName: $('#typeId').attr('data-name'),//2級(jí)類型
};
localStorage.setItem("remind_obj", JSON.stringify(obj));
//【查】：向 remind_obj 表讀取全部的數(shù)據(jù)
var localTest = localStorage.getItem("remind_obj");
//!$.isEmptyObject()如果不是空對(duì)象”{}“
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
//常規(guī)用法
laydate.render({
elem: '#dayDate'
,trigger: 'click'
});
//同時(shí)綁定多個(gè)
lay('.test-item').each(function(){
laydate.render({
elem: this
,trigger: 'click'
,type: 'time'
});
});
3.Layui上傳大文件游覽器巨慢或者崩潰問(wèn)題
4.擴(kuò)展一個(gè)模塊并使用
/**
mysample.js里擴(kuò)展一個(gè)sample2模塊
**/
layui.define(function(exports){
//todoing
//輸出sample2接口
exports('sample2', {});
});
// 在homepage2.html里使用sample2模塊
layui.config({
base: '../../layuiadmin/' //你存模塊的目錄，默認(rèn)是module下
}).extend({//設(shè)定擴(kuò)展模塊所在的目錄
index: 'lib/index' //相對(duì)于上述 base目錄，同理以下相對(duì)于本目錄
,sample2: '../../views/home/mysample' //加載mysample.js
}).use(['index', 'sample2']); //使用sample2模塊
圖例：
二，Xm-select
參考：Xm-select官網(wǎng)
始于 layui 的一個(gè)多選解決方案。前身 formSelects, 由于渲染速度慢, 代碼冗余, 被放棄了
1.普通多選形式
//多選下拉框渲染對(duì)象
var dataTypes = null;
dataTypes = xmSelect.render({
el: '#dataTypes',
language: 'zn',
//工具欄
toolbar: {
show: true
},
filterable: true,//過(guò)濾搜索
paging: true,//分頁(yè)
pageSize: 10,//每頁(yè)條數(shù)
height: '500px',
//autoRow: true,//自動(dòng)換行
data: arr
})
//獲取value字符串逗號(hào)分割
var valueStr = dataTypes.getValue('valueStr');
//給多選賦值(value方式)
dataTypes.setValue( [ 1,2 ] );
//搜索input框失去焦點(diǎn)模擬：選擇完畢關(guān)閉監(jiān)聽(tīng)
$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框失去焦點(diǎn)事件：模擬選擇完畢關(guān)閉監(jiān)聽(tīng)
//搜索input框失去焦點(diǎn)模擬：選擇完畢關(guān)閉監(jiān)聽(tīng)
$dataTypes = $('#xmDataTypes')
$dataTypes.on('blur', '.xm-search-input', function() {
//hasClass() 方法檢查被選元素是否包含指定的 class
setTimeout(() => {
if($dataTypes.find('.xm-body').hasClass('dis')) {
//todo
}
}, 300);
});
2.拓展下拉樹(shù)
賦值與取值與普通多選一致
//多選下拉框渲染對(duì)象
var run_class_users = null;
//加載下拉框數(shù)據(jù)： 執(zhí)行用戶
$.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: {
//是否顯示樹(shù)狀結(jié)構(gòu)
show: true,
//是否展示三角圖標(biāo)
showFolderIcon: true,
//是否顯示虛線
showLine: false,
//間距
indent: 20,
//默認(rèn)展開(kāi)節(jié)點(diǎn)的數(shù)組,默認(rèn)展開(kāi)新東盛8006
expandedKeys: [8006],
//是否嚴(yán)格遵守父子模式
strict: true,
},
filterable: true,
height: 'auto',
data(){
return data.treeDate//返回?cái)?shù)據(jù)遵循官網(wǎng)指定結(jié)構(gòu)
}
})
});
總結(jié)
以上是生活随笔為你收集整理的xmselect重新渲染_Layui使用总结及多选方案Xm-select的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 移动端 c++ 开发_这 10 点值得移
- 下一篇： 限制tomcat带宽_必看的Tomcat