Layui用法总结

前言

最近的一个项目使用到了layui，然后就想总结一下使用过的知识吧。

---

一.复选框 

<div class="layui-form-item">
	 <label class="layui-form-label" style="width: auto;">是否单身</label>
			<div class="layui-input-block" style="margin-left: 200px;width: 55%;">
				  <input type="radio" name="single" value="是" title="是">
				  <input type="radio" name="single" value="否" title="否" checked>
			</div>
</div>

 取值：

 $('input[name="single"]:checked').val()

点击事件 ：

layui.form.on('radio(radioName)', function(data){
	if( data.value == '是'){
		......
	}else{
		......
	}
});

---

二.select框

<div class="layui-form-item">
	<label class="layui-form-label" style="width: auto;">文字内容</label>
		  <div class="layui-input-block" style="margin-left: 200px;width: 55%;">
				 <select class="form-control className" id="id" 
                    lay-filter="此处的名称就是下面的点击事件的名称" 
				    data-actions-box="true"  data-live-search="true" 
				    data-live-search-placeholder="请选择xxx" >  
				    <option value="" selected>请选择xxx</option>
				  </select>
	      </div>
</div>

 点击事件：

layui.use("form", function () {
		$ = layui.jquery;
		form = layui.form;
		form.on('select(点击事件的名称)', function(data){
                $('.className').empty();//清空select，不然每点一次都循环添加一遍数据越来越多
                进行具体的操作
		});
});

PS:此处若需要知道select框选中的值是啥，应该用data.value。 

将字段设为未选中状态：

$("#id名称").removeAttr("disabled");
form.render("select");

---

三.异步请求（Get）

此处结合上面的select框一起说明，

// 页面加载时就会发送异步请求
$(document).ready(function() {
// 职业资格
	$.get('url地址','',function(res){
		for (var i=0;i<res.length;i++) {
	    $('.id名称').append('<optionid="'+i+'">'+res[i].name+'</option>')
				}
				renderForm();
		})
});

PS:此处的url地址可以弄成一个配置文件，然后直接引入。 

 渲染函数：

function renderForm(){
		layui.use('form',function(){
		var form = layui.form;
		form.render();
		});
};

---

四.多分录

<div class="layui-form" lay-filter="freshform">
<table class="layui-table" lay-filter="test">
<tbody class="addlists">

      ......填写需要变成多分录的样式......

</tbody>
</table>
</div>

<script src="layui/layui.js"></script>
<script src="js/jquery-2.0.0.js"></script>
<script type="text/javascript">
		$(function () {
				let form = layui.form,
				laydate = layui.laydate,
				laypage = layui.laypage,
				layer = layui.layer,
				table = layui.table;//非模块化加载相应的依赖
			    let i=1;
				$('.layui-icon-addition').click(function () {
					  i++;
					  addstrs1(i);//增加一条内容函数
					  form.render();//每次点击添加按钮就会重新渲染一次
				});
					
				//下面整个是弹出询问框是否删除，
				$('body').on("click",".layui-icon-subtraction",function () {
			    var pre = $(this);//这里获取点击当前行，就是要删除此行把此行的属性交给变量pre
				layer.confirm('确定要删除么？',{
					 btn:['确定','取消']
				},function () {
			    //为什么这个里不能直接用this表示当前行，因为作用域不一样，通过变量传递的方式获取当前行
			     $(pre).parent().parent().remove();//这里是移除当前删除行的内容
				layer.closeAll('dialog');//这里是点击确定删除后关闭整个弹出层
			   })
			});
				
		 //产生随机数函数
		function getRandomNum() {
			return parseInt(Math.random()*50);
		}
		//动态添加表单的函数
		function addstrs1(i) {
			let iNums = getRandomNum();//获取随机数
			let strs1;
			strs1 = '此处填写要变成多分录的内容，注意要在第一个div标签里面加上value="'+i+'"';
		$('.addlists').append(strs1);
							
		//重新渲染
		laydate.render({
			elem: '#getTime'+iNums  //获取时间
			,trigger: 'click' //采用click弹出
			});
		})
</script>

强调 ：这个方法是我之前在网上看到的一遍博客中学到的。

---

五.设置select中的option为选中状态

// 当前的select的id 
$('#id').val('value值');
// 更新全部,不渲染一遍的话不会看到效果，虽然实际上已经赋值了
layui.form.render();

---

六.将控件设为不可编辑（禁用状态）

$("#id名称").attr("disabled", false);
layui.form.render('id名称');

---

七.上传照片

HTML5：

<div class="layui-upload-drag required" id="ongImg">
	<i class="layui-icon"></i>
		<p>点击上传证件照</p>
</div>

JS: 

	// 照片上传功能
	layui.use('upload', function() {
		var upload = layui.upload;
		upload.render({
			elem: '#ongImg',
			url: 'submit',
			auto: false, //是否自动上传
			accept: 'images', //指定允许上传的文件类型
			bindAction: '#submit', //指向一个按钮触发上传
			//选择文件后的回调函数
			choose: function(obj) {
				//将每次选择的文件追加到文件队列
				var files = obj.pushFile();
				//预读本地文件，如果是多文件，则会遍历。
				obj.preview(function(index, file, result) {
					//console.log(index); //得到文件索引
					//console.log(file); //得到文件对象
					//console.log(result); //得到文件base64编码，比如图片
					window["imgNumber"] = result;
					//图片插入到选择框中，
					$("#ongImg").html("<img src = '" + result +
						"' height='150px;' width='130px;' />");
				});
			},
			//上传完成后回调，res为服务器端返回的数据
			done: function(res) {
				//关闭loading
				layer.close(index);
			}
		});
	});