標籤：des http 使用 os io 資料 for ar
問題描述:
前端使用EasyUI,後台使用Spring MVC, 資料庫裡面儲存的時間格式為:2014-06-10,但是後台返回給前台頁面的資料是json格式的,類似於:1402367297000的形式,日期列datebox是無法解析的。具體如:
自己也是EasyUI小白,網上查查資料,倒騰下總算搞出來了,這裡做下記錄。
一般情況下我們所需的日期格式都是:2014-02-02或者2014/09/09形式的,因此首先要考慮實現一個添加日期格式化的外掛程式。
jQuery日期格式化在自己的js中添加代碼來擴充jQuery,代碼如下:
Date.prototype.format = function(format) {var o = {"M+" : this.getMonth() + 1, // 月"d+" : this.getDate(), // 天"h+" : this.getHours(), // 時"m+" : this.getMinutes(), // 分"s+" : this.getSeconds(), // 秒"q+" : Math.floor((this.getMonth() + 3) / 3), // 刻"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;}
這樣,就為jQuery添加上了日期格式化的功能了。可以簡單的試試能否格式化成功:
範例程式碼:
<html><script> Date.prototype.format = function(format) { 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; }</script><body> <script> var date = new Date();console.info(date); console.info(date.format("yyyy-MM-dd hh:mm")); </script></body></html>
控制台輸出結果:
可以看見的是,時間格式已經轉換為我們需要的格式了。
formatDatebox上述範例程式碼中,我們還是需要指定format,這裡先抽象出一個formatDatebox函數,用於顯示日期.
function formatDatebox(value) { if (value == null || value == ‘‘) { return ‘‘; } var dt; if (value instanceof Date) { dt = value; } else { dt = new Date(value); } return dt.format("yyyy-MM-dd"); //擴充的Date的format方法(上述外掛程式實現) }
同樣我們簡單的測試下:
console.info(formatDatebox(1402367297000));
"1402367297000"是時間格式的json形式,最後輸出的結果為:2014-06-10。測試通過。
datebox指定formatter前面的準備工作做完了,接下來就是將formatDatebox函數運用到datebox中去了,很簡單,只需指定datagrid空間的列屬性的fomatter為formatDatebox函數即可。
如下例子:
columns: [ { field: ‘updateTime‘, title: ‘更新時間‘, formatter: formatDatebox, sortable: true, editor: ‘datebox‘ } ] ]
之後即可看見現實效果為我們所需效果。
不過,還遠遠沒有結束呢?根據上面的代碼也發現了,我們可是是實現了行編輯的,當我們雙擊一條記錄的時候,datebox裡面的值丟失,而且通過日期選取器擷取的格式也不一樣。呵呵,這裡我們就需要重寫datagrid方法,使得datagrid行編輯時,日期控制項內的時間格式正確顯示,且不遺失資料,代碼如下:
$.extend($.fn.datagrid.defaults.editors, {datebox : {init : function(container, options) {var input = $(‘<input type="text">‘).appendTo(container);input.datebox(options);return input;},destroy : function(target) {$(target).datebox(‘destroy‘);},getValue : function(target) {return $(target).datebox(‘getValue‘);//獲得舊值},setValue : function(target, value) {console.info(formatDatebox(value));$(target).datebox(‘setValue‘, formatDatebox(value));//設定新值的日期格式},resize : function(target, width) {$(target).datebox(‘resize‘, width);}}});
完成之後的效果見:
OK,大概就是這麼多了,抱歉的是這裡沒有提供一個完整的demo,因為涉及到背景互動,本來可以使用待用資料來類比展示,但是時間不夠,也沒多大的興緻再去實現一遍了。先就到這兒了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
