Layui项目实战干货总结（精品）

写代码时遇到的知识点拿出来分享。

 

1.layer弹出层显示在top顶层

// 监听工具条
table.on('tool(tb-book)', function (obj) {
var data = obj.data;
// 修改
if (obj.event === 'edit') {
	top.layer.open({
		type: 2,
		offset: '10px',
		title: "修改图书",
		area: ['800px', '660px'],
		content: ['bookEdit/'+data.id]
	});
}
});

 

2.刷新同级iframe中table数据

//监听表单提交
// 修改
form.on('submit(saveBook)', function (data) {
	//layer.alert(JSON.stringify(data.field));
	data.field.categoryName=$("#categoryCode option:selected").text();
	data.field.languageName=$("#languageCode option:selected").text();
	data.field.locationName=$("#locationCode option:selected").text();
	data.field.publisherName=$("#publisherCode option:selected").text();
	$.ajax({
		url: '/api/book/save',
		type: 'POST',
		contentType: "application/json",
		dataType: "json",
		data: JSON.stringify(data.field),
		success: function (result) {
			if (result.code == 200) {
				// layer.msg("修改成功！", {icon: 6});
				cleanForm("#saveBook");
				if (data.field.id.length > 0) {
					layer.closeAll();//关闭所有的弹出层
				}
				$(".layui-show").find("iframe")[0].contentWindow.userTable.reload();
			} else {
				layer.alert(result.message);
			}
		}
	});

	return false;

});

 

3.layui单选框radio的使用

<div class="layui-form-item">
	<label class="layui-form-label">性别</label>
	<div class="layui-input-block">
		<input type="radio"  id="male" name="sex" value="男" title="男">
		<input type="radio"  id="female" name="sex" value="女" title="女">
	</div>
</div>

form.on('radio',function (data) {
	$("input[name='sex']").prop("checked",false);
	$(data.elem).prop("checked",true);
});

 

if(data.sex=='男'){
	$("#male").prop("checked",true);
	$("#female").prop("checked",false);
}
if(data.sex=='女'){
	$("#male").prop("checked",false);
	$("#female").prop("checked",true);
}

form.render(); //更新全部

4.使用日期控件

<div class="layui-inline">
	<label class="layui-form-label">借出日期</label>
	<div class="layui-inline">
		<input type="text" name="borrowDate" id="borrowDate" required lay-verify="required" autocomplete="off"
			   class="layui-input">
	</div>
</div>

 

laydate.render({
	elem: '#borrowDate',
	type: 'date',
	format:"yyyy-MM-dd",
	value: new Date()
});

 

5.表格中格式化日期列

{field: 'borrowDate', title: '借阅日期', width: 120,templet:'<div>{{ layui.util.toDateString(d.borrowDate, "yyyy-MM-dd") }}</div>'}

 

6.日期选择后的事件函数

laydate.render({
	elem: '#borrowDate',
	type: 'date',
	format:"yyyy-MM-dd",
	value: borrowTime,
	done: function(value, date, endDate){
		returnTime=plusDays(new Date(value),30);
		alert(returnTime.Format("yyyy-MM-dd"));
		$("#returnDate").val(returnTime.Format("yyyy-MM-dd"));
	}
});

 

7.表格列不同值设置不同颜色

 

, {field: 'borrowStatus', title: '状态', width: 80,templet:showStatus}

// 借阅状态
function showStatus(data) {
	var status = data.borrowStatus;
	var result;
	if (status == 0) {
		result = '<a class="" style="color:#FF5722">未还</a>';
	}
	if (status == 1) {
		result = '<a class="" style="color:#009688">已还</a>';
	}
	if (status == 2) {
		result = '<a class="" style="color:#FF5722">逾期</a>';
	}
	return result;
}

 

8.控制上传文件类型

这里以控制职能上传xls|xlsx文件为例。

upload.render({
	elem: '#uploadExcel' //绑定元素
	,url: 'api/student/upload' //上传接口
	,accept: 'file' //普通文件
	,acceptMime:'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
	,exts: 'xls|xlsx' //只允许上传xls文件
	,before:function (obj) {
		layer.load(); //上传处理loading
	}
	,done: function(res){
		// 上传完毕回调
		layer.closeAll('loading'); //关闭loading
		if(res.code==200){
			userTable.reload();
			layer.msg("导入成功！");
		}else {
			layer.msg(res.message);
		}
	}
	,error: function(){
		//请求异常回调
		layer.closeAll('loading'); //关闭loading
		layer.msg("导入失败！");
	}
});