文章介绍了在使用layui前端框架时遇到的时间控件设置和无刷新弹框编辑的两个常见问题。对于时间控件，强调了动态传参与控件类型的匹配性，避免日期重复；对于无刷新弹框编辑，展示了html和js代码实现，包括表单数据填充和提交处理。
个人工作中前端遇到的问题总结，希望记录也能帮到看到帖子的你少走弯路！
------layui时间控件重复一定要检查动态传参是否与控件的类型一致（layui日期重复）
var laydate = layui.laydate;
var curDate = new Date();
var endDate = (curDate.getFullYear()+1).toString() + '-' + (curDate.getMonth() + 1).toString() + '-' + curDate.getDate().toString();
var startDate = (curDate.getFullYear()).toString() + '-' + (curDate.getMonth()+1 ).toString() + '-' + curDate.getDate().toString();
// //日期组件
var dateInstance =laydate.render({
elem: '#validityPeriod',
type: 'datetime',//类型要一定要相匹配
min: startDate,
max: endDate
});
----------layui无刷新式弹框编辑
---------------html部分
<!-- 测试1 -->
<script type="text/html" id="edit_form">
<div class="layui-col-md10" style="margin-left: 35px;margin-top: 20px">
<form class="layui-form layui-form-pane" lay-filter="edit_form" action="">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="user_name" required lay-verify="required" placeholder="请输入新的用户名"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" name="mail_address" required lay-verify="required" placeholder="请输入新的邮箱"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮件类型</label>
<div class="layui-input-block">
<select name="mail_type" lay-verify="required" lay-filter="mail_type">
<option value="">请选择</option>
<option value="注册邮件">注册邮件</option>
<option value="报名邮件">报名邮件</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">验证日期</label>
<div class="layui-input-inline">
<input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item" style="margin-top: 20px">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</script>
<!-- 测试 2-->
<form class="layui-form" action="" id="formStaff" lay-filter="form-data" style="display: none;">
<div class="layui-row layui-col-space10">
<div class="layui-col-md8 layui-col-xs8">
<div class="layui-form-item">
<label class="layui-form-label">员工姓名<span style="color:red;"> * </span></label>
<div class="layui-input-block">
<input type="text" id="employeeName" name="employeeName" required
lay-verify="required|employeeName" placeholder="请输入员工姓名" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">职业<span style="color:red;"> * </span></label>
<div class="layui-input-block">
<select name="type" lay-verify="required">
<option value="">请选择</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">身份<span style="color:red;"> * </span></label>
<div class="layui-input-block">
<select name="status" lay-verify="required">
<option value="">请选择</option>
</select>
</div>
</div>
</div>
<div class="layui-col-md4 layui-col-xs4" style="text-align: center;">
<img class="layui-upload-img" id="logo"
style="border:1px solid #CCC; padding:2px; vertical-align: middle;">
<input type="file" id="inputFile" class="layui-hide">
</div>
<div class="layui-form-item">
<label class="layui-form-label ">性别<span style="color:red;"> * </span></label>
<div class="layui-input-inline">
<select name="gender" lay-verify="required">
<option value="">请选择</option>
</select>
</div>
<label class="layui-form-label">VIP特权</label>
<div class="layui-input-inline">
<input type="checkbox" name="isVip" lay-skin="switch" lay-text="ON|OFF">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">员工卡号<span style="color:red;"> * </span></label>
<div class="layui-input-inline">
<input type="text" id="cardId" name="cardId" placeholder="请输入卡号" required lay-verify="required|cardId" autocomplete="off" class="layui-input" style="width: 190px;">
</div>
<div class="layui-inline">
<label class="layui-form-label">卡号有效期<span style="color:red;"> * </span></label>
<div class="layui-input-inline" id="monthDate">
<input type="text" name="validityPeriod" id="validityPeriod" lay-verify="validityPeriod" required placeholder="yyyy-MM-dd" class="layui-input" style="width: 190px;" autocomplete="off">
</div>
</div>
</div>
<div class="layui-form-item" style="height: 48px;margin-top: -30px;">
<label class="layui-form-label required">联系电话</label>
<div class="layui-input-inline">
<input type="text" name="phoneNumber" placeholder="请输入联系电话" autocomplete="off" lay-verify="telphone"
class="layui-input">
</div>
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input type="text" name="email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text" style="margin-top: -10px;">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<textarea name="remark" placeholder="请输入内容" autocomplete="off" rows="3" class="layui-textarea"
style="resize: none; min-height:30px; height: auto !important"></textarea>
</div>
</div>
</div>
</form>
-------------js部分
//监听头部工具条
table.on('toolbar(tableStaff)', function (obj) {
switch (obj.event) {
case 'btn-add':
addStaff();
break;
case 'btn-test':
test();
break;
default:
break;
}
});
//测试写法一
function test() {
layer.open({
title:'修改用户信息',
type:1,
area:['420px','330px'],
content:$('#edit_form').html(),
})
form.render()//更新渲染表单
laydate.render({
elem: '#date'
});
form.val('edit_form',{
//填充表单
user_name:"zhangsan",
mail_address:"新疆",
date:"2023-06-23"
})
//提交编辑表单
form.on('submit(formDemo)',function(messge){
console.log(messge.field);
console.log(obj.data);
$.ajax({
url:"{:url('EmailManagement/edit_form')}",
method:"POST",
// traditional:true,
data: {
id:obj.data.id,
old_meeting_register_id:obj.data.meeting_register_id,
old_mail_address:obj.data.mail_address,
old_mail_type:obj.data.mail_type,
new_meeting_register_id:messge.field.user_name,
new_mail_address:messge.field.mail_address,
new_mail_type:messge.field.mail_type
},
success:function (msg) {
console.log(msg);
// var returnCode = msg.returnValue//取得返回数据（Sting类型的字符串）的信息进行取值判断
if (msg) {
layer.closeAll('loading');
layer.load(2);
layer.msg("修改成功", {icon: 6});
setTimeout(function () {
obj.update({
meeting_register_id: messge.field.user_name,
mail_address: messge.field.mail_address,
mail_type: messge.field.mail_type
});//修改成功修改表格数据不进行跳转
layer.closeAll();//关闭所有的弹出层
}, 1000);
// 加载层 - 风格
} else {
layer.msg("修改失败", {icon: 5});
}
}
})
return false;//阻止表单跳转,网页url不显示提交的参数。
})
}
//测试写法二
//编辑员工
function editStaff(data) {
$("#cardId").addClass("layui-disabled");
$("#cardId").attr("readonly", "readonly");
$("#cardId").attr("lay-verify", "");
data.isVip ? $(":input[name='isVip']").attr("checked","") : $(":input[name='isVip']").removeAttr("checked");
$("#formStaff")[0].reset();
$("#logo").attr("src", g_const.url + data.avatar);
form.val('form-data', data);
form.render();
layer.open({
type: 1,
area: '700px',
title: '编辑员工',
content: $("#formStaff"),
shade: 0,
scrollbar: true,
btn: ['确定', '取消'],
yes: function (index, layero) {
if (!layui.form.check("formStaff")) {
return;
}
let staff = form.val("form-data");
let formData = new FormData();
for (let item in staff) {
formData.append(item, staff[item]);
};
$.ajax({
type: "put",
url: g_const.orb_url
dataType: "json",
cache: false, //上传文件无需缓存
processData: false, // 使数据不做处理
contentType: false, // 不要设置Content-Type请求头
data: formData,
success: function (res) {
layer.msg(res.msg, {
icon: res.code == 0 ? 1 : 2,
time: 2000
});
if (res.code == 0) {
$('#btnSearch').click();
layer.close(index);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
layer.msg("Error: status " + textStatus + "," + errorThrown);
},
complete: function (xhr, textStatus) {
}
})
},
success: function (result, textStatus) {
}
});
}
扫一扫
5179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
