基于Jquery实现一个cron表达式选择器
(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 = $('').appendTo($(options['container']));
//初始化时间类型切换html
var renderTabHtml = function(){
var tabHtml = [''];
var tabItemHtml = [''];
for(var i = 0 ; i < timeTypes.length ; i++){
tabHtml.push(''+timeNames[i]+'');
tabItemHtml.push('');
}
tabHtml.push('');
tabItemHtml.push('');
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('\n' +
' 从'+typeName+'开始,\n' +
' 到'+typeName+'结束,\n' +
' 每'+typeName+'执行一次\n' +
' ');
};
//初始化指定时间类型选择器
var renderAssignHtml = function(timeType){
var timeContainer = getTimeItemContainer(timeType);
var valueScope = typeToValueScope(timeType);
if(valueScope){
var timeValues = ['\n' +
' \n' +
' 指定时间' +
' '];
for(var i = valueScope[0];i <= valueScope[1];i++){
timeValues.push('\n' +
' ' + i +
' ');
}
timeValues.push('');
$(timeContainer).append(timeValues.join(''));
}
}
//初始化时间类型选择器
var renderTimeItemHtml = function(){
for(var i= 0;i0 ? 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;
}
})($) 源码地址