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("导入失败!");
}
});