一，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//返回数据遵循官网指定结构

}

})

});