2021-7-9-layui学习

小白上手layui看一个五小时的视频，推荐边看边上手。

视频推荐推荐哔哩哔哩：倜傥的雷哥。看完基本就可以做项目上手了。

以下为学习笔记：

使用 JSON.stringify

JSON.stringify是把js的对象转变为字符串，数据在传输的过程中只能传输字符串。

exports 函数

它接受两个参数，第1个参数为模块名，第2个参数为模块接口
/** demo.js **/
layui.define(function(exports){
//do something

exports('demo’模块名, {msg: ‘Hello Demo’} 模块接口 );
});

加载模块

方法：layui.use([mods], callback)

//例子
layui.use('form',function(){ 
	//引用模块
	var form=layui-form;
})

参数 mods：如果填写，必须是一个 layui 合法的模块名（不能包含目录）。
从 layui 2.6 开始，若 mods 不填，只传一个 callback 参数，则表示引用所有内置模块。
参数 callback：即为模块加载完毕的回调函数。
从 layui 2.6 开始，该回调会在 html 文档加载完毕后再执行，确保你的代码在任何地方都能对元素进行操作。

引用模块

//引用指定模块
layui.use(['layer', 'laydate'], function(){
  var layer = layui.layer
  ,laydate = layui.laydate;
  
  //do something
});
 
//引用所有模块（layui 2.6 开始支持）
layui.use(function(){
  var layer = layui.layer
  ,laydate = layui.laydate
  ,table = layui.table;
  //…
  
  //do something
});
      

layui.data 方法为例：

//【增】：向 test 表单插入一个 nickname 字段，如果该表不存在，则自动建立。
//其中‘test’代表的是表单的名字，在layui当中，利用lay-filter=“test”来给元素命名。
//其实向<form lay-filter="test"></form>的表单加入字段nickname,值为‘闲心’。
layui.data('test', {
  key: 'nickname'
  ,value: '贤心'
});

//【删】：删除 test 表的 nickname 字段
layui.data(‘test’, {
key: ‘nickname’
,remove: true
});
layui.data(‘test’, null); //删除test表

//【改】：同【增】，会覆盖已经存储的数据

//【查】：向 test 表读取全部的数据
var localTest = layui.data(‘test’);
console.log(localTest.nickname); //获得“贤心”

布局

1.采用 layui-row 来定义行，如：

2.采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：

• 变量md 代表的是不同屏幕下的标记（可选值见下文）
• 变量* 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12
• 如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。
• required：注册浏览器所规定的必填字段 lay-verify：
• 注册form模块需要验证的类型
• class=“layui-input”：layui.css提供的通用CSS类

监听tabel的头部工具栏事件

tableIns.reload(options, deep) 参数同下
tableIns 可通过 var tableIns = table.render() 得到
tableIns.reload(url:’’);

table.on('toolbar(userTable)',function(obj){
	switch(obj.event){
		case:'add':
			layer.msg('添加')；
		break;
		case:'Delete':
			layer.msg('删除');
		break;
		case'getselect':
			var checkStatus = table.checkStatus('userTable');
		case'reloadTable':
			table.reload(userTable, {
				url:'';
				});
	};
})

监听复选框

table.on('checkbox(userTabel)',function(obj){
		//do something
		 
})

监听编辑事件

table.on('edit(userTabel)',function(obj){
		//发送post，请求更新数据
		 $.post("url"+obj.field+"&id="+obj.data.id,function(json){});
})

监听行事件

按钮上需要加lay-event=“delete”

相关方法–表格重载