共计 1956 个字符,预计需要花费 5 分钟才能阅读完成。
上效果图:
参考教程 1
参考教程 2
<div id="work_div" class="open-form layui-form" bind_id="0" style="display: none;">
<div id="test2" ></div>
</div>
var work_detail = function(e){var data_id = $(e.srcElement).attr("id");
var bind_id = $('#work_div').attr('bind_id');
if(bind_id != data_id){var week_day = $(e.srcElement).attr("week_day")?$(e.srcElement).attr("week_day").split(','):[]; // 下发数据是 "0,1,3" 0 是周天
var rest_date = $(e.srcElement).attr("rest_date")?$(e.srcElement).attr("rest_date").split(','):[]; // 下发数据是 "2020-11-9,2020-11-10,2020-11-11," 数据格式要和 laydate 定义统一,下发解决 format(Y-n-j),月日不补零
var work_name = '早班';
var work_time = '00:02 01:00-05:00';
var mark_class = '';
week_day.forEach(function (val, index) {mark_class += '.layui-laydate-content td:nth-child('+val+'),'
});
mark_class = mark_class.substring(0, mark_class.length-1)
$('#work_div').attr('bind_id', data_id)
$('#work_div').html('<div id="test2"></div>' +
'<div><div> 班次详情 </div><div>'+work_name+''+work_time+'</div></div>');
layui.use('laydate', function(){
var laydate = layui.laydate;
laydate.render({
elem: '#test2'
,position: 'static'
,showBottom: false
,change: function(value, date){ // 监听日期被切换
if(week_day.length>0){var choosedate = $(mark_class).addClass('work_date');// 选中所有显示日期的 td
choosedate.each(function (index,elem) {if(rest_date.indexOf($(this).attr('lay-ymd'))!=-1){$(this).removeClass('work_date');
}
})
$('.work_date').append("<div class="layui-elip work-mark">"+work_name+"</div>");// 在选中的 td 中退出显示价价格的 div
}
}
,ready: function(date){if(week_day.length>0){var choosedate = $(mark_class).addClass('work_date');// 选中所有显示日期的 td
choosedate.each(function (index,elem) {if(rest_date.indexOf($(this).attr('lay-ymd'))!=-1){$(this).removeClass('work_date');
}
})
$('.work_date').append("<div class="layui-elip work-mark">"+work_name+"</div>");// 在选中的 td 中退出显示价价格的 div
}
}
});
});
}
layer.open({
type: 1
,title: "排班详情"
,area: '650px'
,shade: [0.8, '#393D49']
,shadeClose:true
,maxmin: true
,content: "#work_div"
,btn: [确定,勾销]
,zIndex:999
,yes: function(index){ }
,btn2: function(){layer.closeAll();
}
,success: function(layero,index){ }
,end: function(){}
});
};
正文完