timepicker与flexigrid

先看效果图：

点击页面上任一个输入框会出现日期和时间选项，　底下图为flexigrid表格展示．

errorReportPage.js主要负责加载需要的模块，　代码如下：

/*global window,document */
require.config({
    paths: {
	"jquery": "../thirdParty/jquery-1.8.0.min","ajaxUtility": "./ajaxUtility","jquery.artDialog": "../../plugin/artDialog4.1.6/jquery.artDialog","jquery.sha256": "../thirdParty/jquery.sha256","validate": "../../plugin/jquery-validation-1.9.0/jquery.validate.min","flexigrid": "../../plugin/flexigrid-1.1/js/flexigrid","flexigrid.pack": "../../plugin/flexigrid-1.1/js/flexigrid.pack","pageTable": "./pageTable","dialog": "./dialog"
    },shim: {
	"jquery.artDialog": {
	    deps: ["jquery"],exports: "artDialog"
	},"validate": {
	    deps: ["jquery"],exports: "validate"
	},"flexigrid": {
	    deps: ["jquery"]
	},"flexigrid.pack": {
	    deps: ["jquery"]
	},"jquery.sha256": {
	    deps: ["jquery"]
	}
    }

});


define(["jquery","ajaxUtility","dialog","jqueryTool","validate","error","pageTable"],function ($,ajaxUtility,dialog,jqueryTool,validate,error,pageTable) {
	   'use strict';
	   $(document).ready(function () {
	       var locale = "en_US";
	       ajaxUtility.init(locale);
	       dialog.init(locale);
	       error.init(ajaxUtility,locale,pageTable);
	   });
       });

define(["jquery","jquery.ui"],function ($) {
    'use strict';
    return {
	init: function (locale) {
	    if (locale === "cn") {
		var j = {
		    clearText: '清除',clearStatus: '清除已选日期',closeText: '关闭',closeStatus: '不改变当前选择',prevText: '<上月',prevStatus: '显示上月',prevBigText: '<<',prevBigStatus: '显示上一年',nextText: '下月>',nextStatus: '显示下月',nextBigText: '>>',nextBigStatus: '显示下一年',currentStatus: '显示本月',monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],monthNamesShort: ['一','二','三','四','五','六','七','八','九','十','十一','十二'],monthStatus: '选择月份',yearStatus: '选择年份',weekHeader: '周',weekStatus: '年内周次',dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],dayNamesMin: ['日','一','六'],dayStatus: '设置 DD 为一周起始',dateStatus: '选择 m月 d日,DD',dateFormat: 'yy-mm-dd',firstDay: 1,initStatus: '请选择日期',currentText: '现在',isRTL: false,timeText: '时间',hourText: '小时',minuteText: '分钟'
		};
		
		$.timepicker.setDefaults(j);
	    }
	}
    };
});

/*global window,document,alert,jQuery,$ */

define(["jquery","jquery.sha256"],function ($) {
	   'use strict';

	   return {
	       language: "",afterLoadPageErrorType: function (self,data) {
		   var v,d1,d2,errors,total;
		   if (data.status === 0) {
		       total = JSON.stringify(data.value.total);
		       $("#total").html("总数:" + total);
		       d1 = self.convertErrorType(data.value);
		       d2 = self.convertVersion(data.value);
		       self.table1.setData(jQuery.parseJSON(d1));
		       self.table2.setData(jQuery.parseJSON(d2));
		   } else {
		       if (self.locale === "cn") {
			   self.artDialog.error('加载数据失败:' + data.message);
		       } else {
			   self.dialog.error('Failed to load data:' + data.res.message);
		       }
		   }
	       },configTableErrorType: function () {
		   var cfg,ob = this;
		   cfg = {
		       dataType: 'json',width: 'auto',height: 'auto',autoload: true,colModel : [
			   {display: '错误类型',name: 'errorType',width: '240',sortable: true,align: 'left'},{display: '个数',name: 'number',align: 'left'}
		       ]
		   };
		   ob.table1.setup("errorTypeTable",cfg,ob.locale,null,ob);
	       },configTableVersion: function () {
		   var cfg,colModel : [
			   {display: '版本号',name: 'version',align: 'left'}
		       ]
		   };
		   ob.table2.setup("versionTable",buildCellErrorType: function (errorType) {
		   var template,errorType_str;
		   template = "{"cell":["{0}","{1}"]}";
		   errorType_str = JSON.stringify(errorType);
		   errorType_str = errorType_str.replace(/"/g,""");
		   return jQuery.validator.format(template,errorType.error_type,errorType.count);
	       },buildCellVersion: function (version) {
		   var template,version_str;
		   template = "{"cell":["{0}","{1}"]}";
		   version_str = JSON.stringify(version);
		   version_str = version_str.replace(/"/g,version.version,version.count);
	       },convertErrorType : function (data) {
		   var es,i,str,s1,s2,length,r;
		   es = data.error_type;
		   length = es.length;
		   r = "{"page": 1,"total": 40,"rows":[";
		   for (i = 0; i < length; (i += 1)) {
		       str = this.buildCellErrorType(es[i]);
		       r += str;
		       if (i !== (length - 1)) {
			   r += ",";
		       }
		   }
		   r += "]}";
		   return r;
	       },convertVersion : function (data) {
		   var es,r;
		   es = data.version;
		   length = es.length;
		   r = "{"page": 1,"rows":[";
		   for (i = 0; i < length; (i += 1)) {
		       str = this.buildCellVersion(es[i]);
		       r += str;
		       if (i !== (length - 1)) {
			   r += ",queryData: function() {
		   var data = {
		       start_time: this.t1,end_time: this.t2,};
		   this.ajaxUtility.post("api/error_report",true,data,this.afterLoadPageErrorType,this);			     
	       },checkFilters: function () {
		   this.t1 = $("#date1").datetimepicker("getDate").getTime(); 
		   this.t2 = $("#date2").datetimepicker("getDate").getTime(); 
		   if (this.t1 > this.t2) {
		       this.dialog.error("The first date is later than second");
		       return;
		   }
	       },onChangeDate: function(self,dateText,inst) {
		   self.checkFilters();
		   self.queryData();	    
	       },init: function (ajaxUtility,table1,table2) {
		   this.ajaxUtility = ajaxUtility;
		   this.dialog = dialog;
		   this.jqueryTool = jqueryTool;
		   this.locale = locale;
		   this.table1 = table1;
		   this.table2 = table2;
		   this.configTableErrorType();
                   this.configTableVersion();
		   var self = this;
		   $("#date1").datetimepicker({
		       onClose: (function(ob) {
			   return function (dateText,inst) {
			       self.onChangeDate(ob,inst);
			   }
		       }(self))
		   });
		   $("#date2").datetimepicker({
		       onClose: (function(ob) {
			   return function (dateText,inst);
			   }
		       }(self))
		   });

		   var t2 = new Date();
		   var h = t2.getHours();
		   if (h < 23) {
		       t2.setHours(h);
		   }
		   var t1 = new Date();
		   t1.setHours(0);
		   t1.setMinutes(0);
		   t1.setSeconds(0);
		   $("#date1").datetimepicker("setDate",t1);
		   $("#date2").datetimepicker("setDate",t2);
	       }
	   };
       });