(function($){
if(!$){
throw 'cron-selector : JQuery is needed'
}
var timeTypes = ['second','minute','hour','day','month','week','year'],
timeNames = ['秒','分','时','日/月','月','日/周','年'],
timeValues = ['0-59','0-59','0-23','1-31','1-12','1-7','1970-2099'],
localWeekSequence = ['2','3','4','5','6','7','1'],
weekChar = ['/','-','*',',','?','L','C','#'],
typeSelectorClass = 'typeSelector',
valueCheckBoxClass = 'valueCheckBox',
startInputClass = 'start',
endInputClass = 'end',
distanceInputClass = 'distance',
defaultOptions = {
containerClass:'',
locatedWeek:false
},
selectorTypeEnum = {
period:'period',
assign:'assign',
empty:'empty',
};
var typeToName = function (timeType) {
return timeNames[timeTypes.indexOf(timeType)];
};
var typeToValueScope = function (timeType) {
var timeValue = timeValues[timeTypes.indexOf(timeType)];
return timeValue ? timeValue.split('-') : timeValue;
};
$.cronSelector = function(options){
var options = this.options = $.extend(defaultOptions,options);
var container = this.container = $('<div class="pb-tag-box ' + this.options['containerClass'] + '"></div>').appendTo($(options['container']));
//初始化时间类型切换html
var renderTabHtml = function(){
var tabHtml = ['<div class="pb-tag">'];
var tabItemHtml = ['<div class="pb-tag-body">'];
for(var i = 0 ; i < timeTypes.length ; i++){
tabHtml.push('<div class="pb-tag-item" tabCode="'+timeTypes[i]+'">'+timeNames[i]+'</div>');
tabItemHtml.push('<div class="pb-tag-body-item" tabItemCode="'+timeTypes[i]+'" style="display: none"></div>');
}
tabHtml.push('</div>');
tabItemHtml.push('</div>');
container.append(tabHtml.join(''));
return container.append(tabItemHtml.join(''));
};
var getTimeItemContainer = function(timeType){
return $('div[tabItemCode='+timeType+']',container);
};
//初始化周期时间类型选择器
var renderPeriodHtml = function(timeType){
var timeContainer = getTimeItemContainer(timeType);
var typeName = typeToName(timeType);
var valueScope = typeToValueScope(timeType) || ['',''];
var min = valueScope[0];
var max = valueScope[1];
$(timeContainer).append('<div class="pb-form-item">\n' +
' <input class="'+typeSelectorClass+' pb-form-check" type="checkbox" name="'+selectorTypeEnum.period+'"> 从<input class="pb-form-input '+startInputClass+'" type="number" min="'+min+'" max="'+max+'">'+typeName+'开始,\n' +
' 到<input class="pb-form-input '+endInputClass+'" type="number" min="'+min+'" max="'+max+'">'+typeName+'结束,\n' +
' 每<input class="pb-form-input '+distanceInputClass+'" type="number" min="0" max="'+(max-min)+'">'+typeName+'执行一次\n' +
' </div>');
};
//初始化指定时间类型选择器
var renderAssignHtml = function(timeType){
var timeContainer = getTimeItemContainer(timeType);
var valueScope = typeToValueScope(timeType);
if(valueScope){
var timeValues = ['<div class="assignInput">\n' +
' <span class="pb-form-item">\n' +
' <input class="'+typeSelectorClass+' pb-form-check" type="checkbox" name="'+selectorTypeEnum.assign+'">指定时间' +
' </span>'];
for(var i = valueScope[0];i <= valueScope[1];i++){
timeValues.push('<span class="pb-form-item">\n' +
' <input class="pb-form-check '+valueCheckBoxClass+'" type="checkbox" value="'+i+'">' + i +
' </span>');
}
timeValues.push('</div>');
$(timeContainer).append(timeValues.join(''));
}
}
//初始化时间类型选择器
var renderTimeItemHtml = function(){
for(var i= 0;i<timeTypes.length;i++){
renderPeriodHtml(timeTypes[i]);
renderAssignHtml(timeTypes[i]);
}
};
//初始化html
var renderHtml = function(){
var tabItemContainer = renderTabHtml(container);
renderTimeItemHtml(tabItemContainer);
};
//初始化时间类型切换事件
var initTabChooseEvent = function(){
$('[tabcode]').click(function(){
var code = $(this).attr('tabcode');
$(this).addClass('active').siblings().removeClass('active');
$('div[tabitemcode=' + code + ']').show().siblings().hide();
});
};
//清空该时间类型下的所有输入
var clearInput = function(timeType){
var timeContainer = getTimeItemContainer(timeType);
timeContainer.find("input").prop("checked", false);
};
//初始化时间选择类型互斥事件
var initMutualEvent = function(){
$('div[tabItemCode]',container).each(function(){
var _this = $(this);
var timeType = $(this).attr('tabItemCode');
$('input.'+typeSelectorClass,_this).on('change',function(){
if($(this).prop('checked')) {
$('input.'+typeSelectorClass,_this).not($(this)).prop('checked',false);
if(timeType == 'week'){
clearInput('day');
}
if(timeType == 'day'){
clearInput('week');
}
}
});
});
};
//获得指定时间类型的值
var getTimeValue = function(timeType){
var checkedSelect = getTimeItemContainer(timeType).find('input.'+typeSelectorClass+':checked');
var selectorType = checkedSelect.length>0 ? checkedSelect.attr('name') : selectorTypeEnum.empty;
if(selectorType == selectorTypeEnum.period){
return getPeriodValue(timeType);
}else if(selectorType == selectorTypeEnum.assign){
return getAssignValue(timeType);
}else if(selectorType == selectorTypeEnum.empty){
return getEmptyValue(timeType);
}
};
//获得周期时间选择器的值
var getPeriodValue = function(timeType){
var timeContainer = getTimeItemContainer(timeType)
var start = $('input.'+startInputClass,timeContainer).val();
var end = $('input.'+endInputClass,timeContainer).val();
var distance = $('input.'+distanceInputClass,timeContainer).val();
var value = start || '';
if(end && start){
value += ('-' + end)
}
if(distance){
value += ('/' + distance);
}
return value || '*';
};
//获得指定时间选择器的值
var getAssignValue = function(timeType){
var timeContainer = getTimeItemContainer(timeType);
var selectedValues = [];
$('input.'+valueCheckBoxClass+':checked',timeContainer).each(function () {
selectedValues.push($(this).attr("value"));
});
return selectedValues.join(',') || '0';
};
//是否将日/周本地化
var translateWeek = function(weekTime,reverse){
if(!weekTime){
return weekTime;
}
var weekDays = weekTime.split('');
for(var i = 0;i < weekDays.length;i++){
if(weekChar.indexOf(weekDays[i]) == -1){
if(reverse){
weekDays[i] = localWeekSequence.indexOf(weekDays[i]) + 1;
}else {
weekDays[i] = localWeekSequence[parseInt(weekDays[i]) - 1];
}
}
}
return weekDays.join('');
}
//获得空值
var getEmptyValue = function(timeType){
if(timeType == 'week' || timeType == 'day'){
return '?'
}
return "*"
};
var isNumber = function(value){
var re = /^[0-9]+.?[0-9]*$/;
return re.test(value)
};
//根据值获取对应选择器类型
var getTimeValueSelectorType = function(value){
if(!value || value == '*' || value == '?'){
return selectorTypeEnum.empty;
}
if(value.indexOf('/') != -1 || value.indexOf('-') != -1){
return selectorTypeEnum.period;
}
if(value.indexOf(',') != -1 || isNumber(value)){
return selectorTypeEnum.assign;
}
};
//初始化周期时间
var initPeriodValue = function(value,timeType){
var timeContainer = getTimeItemContainer(timeType);
$('input[name="'+selectorTypeEnum.period+'"]',timeContainer).prop("checked",true);
var values = value.split('/');
var startAndEnd = values[0].split('-');
if(startAndEnd != '*') {
$('input.'+startInputClass, timeContainer).val(startAndEnd[0]);
if(startAndEnd.length > 1) {
$('input.'+endInputClass, timeContainer).val(startAndEnd[1]);
}
}
if(values.length > 1) {
var period = values[1];
$('input.'+distanceInputClass, timeContainer).val(period);
}
};
//初始化指定时间
var initAssignValue = function(value,timeType){
var timeContainer = getTimeItemContainer(timeType);
$('input[name="'+selectorTypeEnum.assign+'"]',timeContainer).prop("checked",true);
var selectedValues = value.split(',');
for(var i = 0;i < selectedValues.length;i++){
$('input[value='+selectedValues[i]+'].'+valueCheckBoxClass,timeContainer).prop('checked',true);
}
};
var initEvent = function(){
initTabChooseEvent();
initMutualEvent();
};
var init = function(){
renderHtml();
initEvent();
};
init();
this.val = function(){
var values = [];
for(var i = 0;i < timeTypes.length;i++){
values.push(getTimeValue(timeTypes[i]));
}
var weekValue = values[timeTypes.indexOf('week')];
if(weekValue == '?' && values[timeTypes.indexOf('day')] == '?'){
values[timeTypes.indexOf('day')] = '*'
}
if(this.options['locatedWeek']){
values[timeTypes.indexOf('week')] = translateWeek(weekValue);
}
return values.join(' ');
};
this.parseVal = function(value){
var timeValues = value.split(' ');
timeValues[timeTypes.indexOf("week")] = translateWeek(timeValues[timeTypes.indexOf("week")],true);
for(var i = 0;i < timeValues.length;i++){
var timeValue = timeValues[i];
var timeType = timeTypes[i];
var selectorType = getTimeValueSelectorType(timeValue);
if(selectorType == selectorTypeEnum.assign){
initAssignValue(timeValue,timeType);
}else if(selectorType == selectorTypeEnum.period){
initPeriodValue(timeValue,timeType);
}
}
};
return this;
}
})($)基于Jquery实现一个cron表达式选择器
猜你喜欢
转载自blog.csdn.net/qq_35488769/article/details/91044899
今日推荐
周排行