# 必填、校验
lay-verify="required"
lay-verify="required|number"
# 事件过滤器
lay-filter="leaveType"
# 关闭自动填充
autocomplete="off"
# select多选
multiple=""o.prop('checked', true);
o.val('xx');<select id="leaveType" name="leaveType" lay-verify="required" lay-filter="leaveType">
<option value="">请选择</option>
<option value="带薪假">带薪假</option>
<option value="其他">其他</option>
</select>form.on('select(searchByClass)', function(data) {
search.classId = data.value;
init({data:JSON.stringify(search)});
});
form.on('radio(gride)', function(obj){
selData = obj.data;
});
form.on('checkbox(gride)', function(data){
selData = data.value; // boolean
});form.on('submit(save)', function(data) {
if (data.field.type == '') {
data.field.type = 0;
}
$.post("${rc.contextPath}/iot/broadcastResource/save", data.field, function success(data) {
if (data.success) {
closeForm();
initTable();
} else {
layer.alert(data.msg);
}
}, "json");
return false;
});使用ajax方式提交需要在最后return false
若提交事件中途报错也会直接提交
// 方法1：元素选择器
$('#jld option[value="' + $('#jld').val() + '"]').html()
// 方法2：在下拉选择事件中的回调方法参数中寻找<table class="layui-table" lay-data="{id:'gride1',cellMinWidth: 80, page: true, limit:10}" lay-filter="gride1">
<thead>
<tr>
<th lay-data="{type:'checkbox'}"></th>
<th lay-data="{field:'title', width:250}">标题</th>
<th lay-data="{templet: '#operaTpl', width:120}">操作</th>
<th lay-data="{templet: '#contentTpl', width:200}">内容</th>
<th lay-data="{templet: '#phasesTpl', width:170}">适用学段</th>
<th lay-data="{field:'sort'}">排序</th>
</tr>
</thead>
</table><th lay-data="{templet: '#operaTpl', width:120}">操作</th><script type="text/html" id="operaTpl">
{{# if(d.type === 1){ }}
<a class="layui-btn layui-btn-xs" onclick="send('{{d.resourceUrl}}');" lay-event="edit">播放</a>
<a class="layui-btn layui-btn-xs" onclick="stop();" lay-event="edit">暂停</a>
{{# }}}
</script>var data = tableIns.config.data
function initTable(){
tableIns = layui.table.reload('gride', {
url:'${rc.contextPath}/teacher/leave/list',
where: {data:JSON.stringify(searchObj)},
done: function(res, curr, count){
pageCurr = curr;
}
});
layui.table.render(dataTable.config);
}table.checkStatus('gride');layui table 隐藏列
done: function(res, curr, count){
$("[data-field='id']").css('display','none');
// $("[data-field='id']").css('pointer-events','none');
}
强制显示 并不可编辑
done: function(res, curr, count){
if(search.postId == 0){
$("td[data-field='weight'] div").html('-');
$("td[data-field='weight']").css('pointer-events', 'none');
}
}
权限控制可使用列控制
$(".layui-laypage-btn").click();<input type="text" id="overTime" name="overTime" lay-verify="required" class="layui-input input-text" placeholder="预计归还日期" autocomplete="off">laydate.render({
elem: '#overTime',
type: 'datetime',
format: 'yyyy-MM-dd HH:mm'
});// 动态添加laydate mark
// 我的日程
var schedule = laydate.render({
elem: '#rc',
showBottom: false,
position: 'static',
done: function(value, date) {
if ($('#scheduleDiv td[lay-ymd="' + date.year + '-' + date.month + '-' + date.date + '"] span').length > 0) {
layer.open({
type: 1,
title: '日程',
area: ['540px', '420px'],
content: $('#rcList'),
btn: ['知道了'],
btnAlign: 'c'
});
initScheduleList(date);
}
},
ready: function(date) {
initDateMark(date);
},
change: function(value, date, endDate) {
if (lastMonth.year != date.year || lastMonth.month != date.month) {
lastMonth.year = date.year;
lastMonth.month = date.month;
initDateMark(date);
}
}
});
//获取相邻月的含有日程的日期（通过修改laydate的config对象和界面元素实现）
function initDateMark(date) {
$.ajax({
url: "${rc.contextPath}/hr/schedule/dayList/" + date.year + '-' + (date.month < 10 ? '0' : '') + date.month + '-' + (date.date < 10 ? '0' : '') + date.date,
dataType: "json",
success: function(data) {
$.each(data.data, function(index, item) {
var day = item.replace(/-0/g, '-');
var elem = $('#scheduleDiv td[lay-ymd="' + day + '"]');
if (elem.find('span').length == 0) {
schedule.config.mark[day] = '';
elem.html('<span class="laydate-day-mark">' + elem.html() + '</span>');
}
})
}
});
}模板渲染
laytpl(coursesTmp.innerHTML).render(data, function(html){
$('#list').html(html);
})uploadLoading = layer.msg('正在上传附件...', {
time: 0,
icon: 16,
shade: 0.01 // 阴影透明度
});layer.open({
type:2 // 2：打开url
,shade: 0.1
,content:['${rc.contextPath}/iot/workAndRest']
,area: ['600px', '540px']
,title: '添加作息时间'
,skin: 'demo-class'
,btnAlign: 'c'
,btn: ['确定', '取消']
});index = layer.open({
type: 2
,title:false
,closeBtn: 0
,area: ['100%', '100%']
,content: '${rc.contextPath}/oa/shouwen/shouwenForm?id=' + curObj.relationSwId
,anim: 5
,isOutAnim: false
});
layer.full(index);layer.close(loadingLayer);
layer.closeAll();layer.alert("请选择记录");layer.confirm('确认删除选中项?', {
icon: 3,
title: '提示'
}, function(index) {
...
layer.close(index);
});var parentWin = layero.find('iframe')[0].contentWindow;
var data = parentWin.getData();parent.xxx
parent.$("#id").val()
parent.table.reload('grideJob', {
url: '${rc.contextPath}/safe/emergencyJobList'
,where: {data:JSON.stringify(parent.search)}
});初始化
layui.element.init();element内容重新渲染后需要调用初始化方法才能正常显示
upload.render({
elem: '#addFile'
,accept: 'file' //允许上传的文件类型
,exts:'doc|docx|ppt|pptx|xls|xlsx|pdf|png|jpeg|jpg|mp3|wav|mp4|swf'
,size: 256000 //最大允许上传的文件大小
,url: '${rc.contextPath}/upload/file2PdfLimited'
,data: {
type: "doc",
// 动态参数
arg1: function() {
return $('.arg1').val()
}
}
,before: function(obj){
uploadLoading = layer.msg('正在上传附件...', {
time: 0,
icon: 16,
shade: 0.01
});
}
,done: function(res){
layer.close(uploadLoading);
if(!res.success){
return layer.msg(res.data.msg);
}else{
$("#title").val(res.data.title);
$("#filePath").val(res.data.src);
$("#fileSize").val(res.data.size);
}
}
});data: {
type: function(){
return $('#type').html()
}
}html标签改为
<!DOCTYPE html>查看是否添加lay-filter属性
.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
top: 50%;
transform: translateY(-50%);
}