爱威尔-easyui datagrid 的行编辑模式下的日期my97应用和保存后台接受数据格式对rowData的处理

首先引入easyui对My97日期控件的扩展(夏季版)：


	 

<pre class="prettyprint lang-js">(function ($) {
	$.fn.my97 = function (options, params) {
		if (typeof options == "string") {
			return $.fn.my97.methods[options](this, params);
		}
		options = options || {};
		if (!WdatePicker) {
			alert("未引入My97js包！");
			return;
		}
		return this.each(function () {
			var data = $.data(this, "my97");
			var newOptions;
			if (data) {
				newOptions = $.extend(data.options, options);
				data.opts = newOptions;
			} else {
				newOptions = $.extend({}, $.fn.my97.defaults, $.fn.my97.parseOptions(this), options);
				$.data(this, "my97", {
					options : newOptions
				});
			}
			$(this).addClass('Wdate').click(function () {
				WdatePicker(newOptions);
			});
		});
	};
	$.fn.my97.methods = {
		setValue : function (target, params) {
			target.val(params);
		},
		getValue : function (target) {
			return target.val();
		},
		clearValue : function (target) {
			target.val('');
		}
	};
	$.fn.my97.parseOptions = function (target) {
		return $.extend({}, $.parser.parseOptions(target, ["el", "vel", "weekMethod", "lang", "skin", "dateFmt", "realDateFmt", "realTimeFmt", "realFullFmt", "minDate", "maxDate", "startDate", {
						doubleCalendar : "boolean",
						enableKeyboard : "boolean",
						enableInputMask : "boolean",
						autoUpdateOnChanged : "boolean",
						firstDayOfWeek : "number",
						isShowWeek : "boolean",
						highLineWeekDay : "boolean",
						isShowClear : "boolean",
						isShowToday : "boolean",
						isShowOthers : "boolean",
						readOnly : "boolean",
						errDealMode : "boolean",
						autoPickDate : "boolean",
						qsEnabled : "boolean",
						autoShowQS : "boolean",
						opposite : "boolean"
					}
				]));
	};
	$.fn.my97.defaults = {
		dateFmt : 'yyyy-MM-dd HH:mm:ss'
	};

$.parser.plugins.push('my97');
})(jQuery);</pre>
下面是datagrid在编辑模式下对日期格式的扩展(我改造了一下，可完美对my97日期进行调用)：

	 


	 

<pre class="prettyprint lang-js">$.extend(
 $.fn.datagrid.defaults.editors, {
 datebox: {
 init: function (container, options) {
 var input = $('').appendTo(container);
 input.datebox(options);
 return input;
 },
 destroy: function (target) {
 $(target).datebox('destroy');
 },
 getValue: function (target) {
 return $(target).datebox('getValue');
 },
 setValue: function (target, value) {
 $(target).datebox('setValue', formatDatebox(value));
 },
 resize: function (target, width) {
 $(target).datebox('resize', width);
 }
 },
 datetimebox:{
 init: function (container, options) {
 var input = $('').appendTo(container);
 input.datetimebox(options);
 return input;
 },
 destroy: function (target) {
 $(target).datetimebox('destroy');
 },
 getValue: function (target) {
 return $(target).datetimebox('getValue');
 },
 setValue: function (target, value) {
 $(target).datetimebox('setValue', formatDateBoxFull(value));
 },
 resize: function (target, width) {
 $(target).datetimebox('resize', width);
 }
 },
 my97DateTime : {
 		init : function(container, options) {
 			var input = $('').appendTo(container);
 			input.my97(options);
 			return input;
 		},
 		getValue : function(target) {
 			return $(target).my97('getValue');
 		},
 		setValue : function(target, value) {
 			$(target).my97('setValue', formatDateBoxFull(value));
 		},
 		resize : function(target, width) {
 			var input = $(target);
 			if ($.boxModel == true) {
 				input.width(width - (input.outerWidth() - input.width()));
 			} else {
 				input.width(width);
 			}
 		}
 	},
 my97Date : {
 		init : function(container, options) {
 			var input = $('').appendTo(container);
 			input.my97(options);
 			return input;
 		},
 		getValue : function(target) {
 			return $(target).my97('getValue');
 		},
 		setValue : function(target, value) {
 			$(target).my97('setValue', formatDatebox(value));
 		},
 		resize : function(target, width) {
 			var input = $(target);
 			if ($.boxModel == true) {
 				input.width(width - (input.outerWidth() - input.width()));
 			} else {
 				input.width(width);
 			}
 		}
 	}
 });
</pre>
注意这里的写法：

	 


	my97DateTime 和 my97Date 的写法 
这两个是对my97日期控件的扩展。


	 


	下面看看datagrid 怎么调用他们：


	 


	{ 
field : 'packPlanDate', 
title : '包装计划日期', 
width : 100, 
formatter: formatDatebox, 
editor:{ 
 type:'my97Date', 
 options:{ 
 editable:false 
 } 
 } 
} 
红色部分就是调用的my97，，还有一个深绿色的formatter: formatDatebox，这个又是什么？


	 


	这也是对日期格式的过滤，有时候日期从后台放到页面上时会出现日期是long类型，大家都知道是后台的json转换工具的问题，日期格式需要单独处理，基本现在的json插件都是这样处理的，当然可以在后台直接处理了。但是如果没有在后台处理那么返回前台就是long类型的数字了，所以就自己在前台用 js 把long类型的日期再转换成yyyy-MM--dd 的格式：


	 

<pre class="prettyprint lang-js">function formatDatebox(value) {
 if (value == null || value == '') {
 return '';
 }
 var dt = parseToDate(value);
 return dt.format("yyyy-MM-dd");
}

/*转换日期字符串为带时间的格式*/
function formatDateBoxFull(value) {
    if (value == null || value == '') {
        return '';
    }
    var dt = parseToDate(value);
    return dt.format("yyyy-MM-dd hh:mm:ss");
}

//辅助方法(转换日期)
function parseToDate(value) {
    if (value == null || value == '') {
        return undefined; 
    }

var dt;
    if (value instanceof Date) {
        dt = value;
    }
    else {
        if (!isNaN(value)) {
            dt = new Date(value);
        }
        else if (value.indexOf('/Date') > -1) {
            value = value.replace(/\/Date$(-?\d+)$\//, '$1');
            dt = new Date();
            dt.setTime(value);
        } else if (value.indexOf('/') > -1) {
            dt = new Date(Date.parse(value.replace(/-/g, '/')));
        } else {
            dt = new Date(value);
        }
    }
    return dt;
}

//为Date类型拓展一个format方法，用于格式化日期
Date.prototype.format = function (format) //author: meizz 
{
 var o = {
 "M+": this.getMonth() + 1, //month 
 "d+": this.getDate(), //day 
 "h+": this.getHours(), //hour 
 "m+": this.getMinutes(), //minute 
 "s+": this.getSeconds(), //second 
 "q+": Math.floor((this.getMonth() + 3) / 3), //quarter 
 "S": this.getMilliseconds() //millisecond 
 };
 if (/(y+)/.test(format))
 format = format.replace(RegExp.$1,
 (this.getFullYear() + "").substr(4 - RegExp.$1.length));
 for (var k in o)
 if (new RegExp("(" + k + ")").test(format))
 format = format.replace(RegExp.$1,
 RegExp.$1.length == 1 ? o[k] :
 ("00" + o[k]).substr(("" + o[k]).length));
 return format;
};</pre>
这也是我在网上找的写好的。

	 


	这样组合在一起就可以让my97日期控件完美的显示出来，为什么强调完美是因为目前只有这样组合才不会出现什么问题。


	那么在前台修改添加好的数据怎么传到后台呢？因为这里是datagrid的行编辑模式，所以最好就是直接获取到编辑哪一行的所有数据传到后台，这里可以一条一条的往后台传，也可以批量传。我这里使用的单独一条一条的传。


	 


	onAfterEdit:function(rowIndex, rowData, changes){} 这个事件应该不陌生，对就是他，我们只需要拿到rowData就ok了，将rowData传到后台就是我们编辑的所有数据了，这里我用的是夏季写的一个方式：


	 


	var data = new Object(); 
data["rowData"] = JSON.stringify(rowData); 
 
$.post('${pageContext.request.contextPath}/umMrpSchedulingDtl/edit', data, function(j) { 
parent.$.messager.show({ 
title : '提示', 
msg : j.msg, 
timeout : 5000, 
showType : 'slide' 
}); 
}, 'json');


	这样用post方式传到后台，我用的是springmvc 所以后台就可以这样接受：


	<a class="header" href="eclipse-javadoc:%E2%98%82=twq1.0/D:%5C/Workspaces%5C/twq1.0%5C/WebRoot%5C/WEB-INF%5C/lib%5C/fastjson-1.2.3.jar%3Ccom">com</a>.<a class="header" href="eclipse-javadoc:%E2%98%82=twq1.0/D:%5C/Workspaces%5C/twq1.0%5C/WebRoot%5C/WEB-INF%5C/lib%5C/fastjson-1.2.3.jar%3Ccom.alibaba">alibaba</a>.<a class="header" href="eclipse-javadoc:%E2%98%82=twq1.0/D:%5C/Workspaces%5C/twq1.0%5C/WebRoot%5C/WEB-INF%5C/lib%5C/fastjson-1.2.3.jar%3Ccom.alibaba.fastjson">fastjson</a>.JSON; 


	 
 


	public Json edit(String rowData) {


	UmMrpSchedulingDtl uDtl = JSON.parseObject(rowData, UmMrpSchedulingDtl.class);


	}


	到此就可以正确的接受前台数据。


	 


	补充：


	之前说过用 onAfterEdit:function(rowIndex, rowData, changes){} 来直接提交数据到后台，后来我用测试了一下才发现这样做还会出现问题：我的意图是双击修改完之后随便点击一下其他地方直接异步的提交数据，这个没问题，可问题是当我再次点击其他的地方时还会继续的在后台异步提交数据，也就是这种实时提交的方式是有问题的，后来我只能改成批量的提交：


	
<pre class="prettyprint lang-js">function allSave(){
	if (endEditing()) {
		if (planDataGrid.datagrid('getChanges').length) {
			parent.$.messager.progress({
				title : '提示',
				text : '数据处理中，请稍后....'
			});
			var up = planDataGrid.datagrid('getChanges','updated');
			var data = new Object();
			data["rowData"] = JSON.stringify(up);
			$.post('${pageContext.request.contextPath}/umMrpSchedulingDtl/edit', data, function(j) {
				if (j.success) {
					planDataGrid.datagrid('acceptChanges');
				}else{
					planDataGrid.datagrid('rejectChanges');
					editIndex = undefined;
				}
				planDataGrid.datagrid('unselectAll');
				parent.$.messager.show({
					title : '提示',
					msg : j.msg,
					timeout : 5000,
					showType : 'slide'
				});
				parent.$.messager.progress('close');
			}, 'json');
		}
	}
}</pre>
这样做就没问题了，如果不想提交后台还可以撤销操作：


	
<pre class="prettyprint lang-js">function allReject(){
	planDataGrid.datagrid('rejectChanges');
	planDataGrid.datagrid('unselectAll');
	editIndex = undefined;
}</pre>