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, dialog, jqueryTool, locale, pageTable);
	   });
       });

timepickerConfig.js主要是让timePicker插件支持中文, 代码为:

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);
	    }
	}
    };
});

errorReport.js是主要实现，代码为：

/*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', width: '240', sortable: true, align: 'left'}
		       ]
		   };
		   ob.table1.setup("errorTypeTable", cfg, ob.locale, null, null, ob);
	       },

	       configTableVersion: function () {
		   var cfg, ob = this;
		   cfg = {
		       dataType: 'json',
		       width: 'auto',
		       height: 'auto',
		       autoload: true,
		       colModel : [
			   {display: '版本号', name: 'version', width: '240', sortable: true, align: 'left'},
			   {display: '个数', name: 'number', width: '240', sortable: true, align: 'left'}
		       ]
		   };
		   ob.table2.setup("versionTable", cfg, ob.locale, null, null, ob);
	       },


	       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, "\\\"");
		   return jQuery.validator.format(template, 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, i, str, s1, s2, length, r;
		   es = data.version;
		   length = es.length;
		   r = "{\"page\": 1,\"total\": 40,\"rows\":[";
		   for (i = 0; i < length; (i += 1)) {
		       str = this.buildCellVersion(es[i]);
		       r += str;
		       if (i !== (length - 1)) {
			   r += ",";
		       }
		   }
		   r += "]}";
		   return r;
	       },

	       queryData: function() {
		   var data = {
		       start_time: this.t1, 
		       end_time: this.t2,		       
		   };
		   this.ajaxUtility.post("api/error_report", true, data, this.afterLoadPageErrorType, null, 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, dialog, jqueryTool, locale, 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, dateText, inst);
			   }
		       }(self))
		   });
		   $("#date2").datetimepicker({
		       onClose: (function(ob) {
			   return function (dateText, inst) {
			       self.onChangeDate(ob, 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);
	       }
	   };
       });