在内联编辑后和保存数据前检查单元格值时遇到问题。我的ColModel的一部分是(没有任何不必要的代码):
{name:'event_start_date',index:'event_start_date',width:75,align:'center',editable:true,edittype:'text',editoptions:{size:'10',maxlength:'10',
dataInit:function(el){
$(el).mask('9999-99-99');
$(el).datepicker({dateFormat:'yy-mm-dd',
beforeShow: function(input, instance){instance.dpDiv.css({marginTop: '1px'});}})
}}
},
{name:'event_start_time',index:'event_start_time',width:70,align:'center',editable:true,edittype:'text',editoptions:{size:'8',maxlength:'8',
dataInit:function(el){$(el).mask('99:99:99');}}
},
{name:'event_end_date',index:'event_end_date',width:75,align:'center',editable:true,edittype:'text',editoptions:{size:'10',maxlength:'10',
dataInit:function(el){
$(el).mask('9999-99-99');
$(el).datepicker({dateFormat:'yy-mm-dd',
beforeShow: function(input, instance){instance.dpDiv.css({marginTop: '1 px'});}})
}}
},
{name:'event_end_time',index:'event_end_time',width:70,align:'center',editable:true,edittype:'text',editoptions:{size:'8',maxlength:'8',
dataInit:function(el){$(el).mask('99:99:99');}}
},
{name:'event_dur_calc',index:'event_dur_calc',width:90,align:'center',editable:false,edittype:'text',sorttype:'date',editoptions:{size:'10',maxlength:'10'}
}
我使用双击来获得内联编辑模式。在用户对日期/时间字段进行一些更改后,为单元格"event_dur_calc"计算的新值:
$('#'+rowId+'_event_start_date').focusout(function(){recalc_dur(rowId);});
$('#'+rowId+'_event_start_time').focusout(function(){recalc_dur(rowId);});
$('#'+rowId+'_event_end_date').focusout(function(){recalc_dur(rowId);});
$('#'+rowId+'_event_endt_time').focusout(function(){recalc_dur(rowId);});
计算新时间的功能:
function mktime(){
var i = 0, d = new Date(), argv = arguments, argc = argv.length;
var dateManip = {
0: function(tt){ return d.setHours(tt); },
1: function(tt){ return d.setMinutes(tt); },
2: function(tt){ return d.setSeconds(tt); },
3: function(tt){ return d.setMonth(parseInt(tt)-1); },
4: function(tt){ return d.setDate(tt); },
5: function(tt){ return d.setYear(tt); }
};
for( i = 0; i < argc; i++ ){
if(argv[i] && isNaN(argv[i])){
return false;
} else if(argv[i]){
if(!dateManip[i](argv[i])){
return false;
}
}
}
return Math.floor(d.getTime()/1000);
};
function recalc_dur(rowId){
var event_start_date_txt = $('#'+rowId+'_event_start_date').val();
var event_start_time_txt = $('#'+rowId+'_event_start_time').val();
var event_end_date_txt = $('#'+rowId+'_event_end_date').val();
var event_end_time_txt = $('#'+rowId+'_event_end_time').val();
if (event_end_date_txt=='0000-00-00'){
$('#'+rowId+'_event_dur_calc').val('0000:00:00');
}else{
var start_d_pices = event_start_date_txt.split('-');
var start_t_pices = event_start_time_txt.split(':');
var end_d_pices = event_end_date_txt.split('-');
var end_t_pices = event_end_time_txt.split(':');
var start_time = mktime(start_t_pices[0], start_t_pices[1], start_t_pices[2], start_d_pices[1], start_d_pices[2], start_d_pices[0]);
var end_time = mktime(end_t_pices[0], end_t_pices[1], end_t_pices[2], end_d_pices[1], end_d_pices[2], end_d_pices[0]);
var delta = end_time-start_time;
var secs = delta % 60;
delta = (delta - secs) / 60;
if (secs.toString().length==1) var new_dur = ':0'+secs; else var new_dur = ':'+secs;
var mins = delta % 60;
delta = (delta - mins) / 60;
if (mins.toString().length==1) new_dur = ':0'+mins+new_dur; else new_dur = ':'+mins+new_dur;
var hours = delta;
if (hours.toString().length==1){new_dur = '000'+hours+new_dur;
}else if (hours.toString().length==2){new_dur = '00'+hours+new_dur;
}else if (hours.toString().length==3){new_dur = '0'+hours+new_dur;
}else new_dur = hours+new_dur;
$('tr[id="'+rowId+'"] > td[aria-describedby="dfr_event_dur_calc"]').html(new_dur);
}
}
如果新的计算时间将低于零(当开始日期/时间大于结束日期/时间时),则显示带有警报消息的模式窗口,并且数据无法保存和发布在服务器上。
在内联编辑模式下,是否有任何事件在发布数据之前触发,我可以用来检查新的计算值,以防止保存不正确的数据?
github上jqGrid的当前代码包含beforeSaveRow
回调函数,该函数将在保存前调用。这些更改是在发布jqGrid 4.5.2之后进行的,但该功能将存在于jqGrid的下一个版本(>4.5.2)中。因此,如果你不想使用github的开发人员源代码,你可以使用标准的验证方式:使用带有custom: true
和custom_func的editrules进行验证。