Layui使用总结及多选方案Xm-select

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