easyUI的datagrid控制元件日期列格式化

轉自：https://blog.csdn.net/idoiknow/article/details/8136093

EasyUI是一套比較輕巧易用的Jquery控制元件，在使用過程中遇到一個問題，它的列表控制元件——datagrid，在顯示日期列的時候，由於後臺返回給頁面的資料是Json格式的，其中的日期欄位，在後臺是正常的“2012-11-10 12:18:00”這樣的格式，json序列化後返回到前臺頁面就被轉換成一個像 /Date(1419264000000)/的格式，導致easyUI無法解析這個欄位。經過一番研究，自己搗鼓出來一個解決方案：

（以下所有程式碼都是前臺頁面的JS程式碼）

1.定義方法使日期列的顯示符合閱讀習慣：

[javascript]

view plain copy

function formatDatebox(value) {
if (value == null || value == '') {
return'';
}
var dt = parseToDate(value);//關鍵程式碼，將那個長字串的日期值轉換成正常的JS日期格式
return dt.format("yyyy-MM-dd"); //這裡用到一個javascript的Date型別的拓展方法，這個是自己新增的拓展方法，在後面的步驟3定義
}
/*帶時間*/
function formatDateBoxFull(value) {
if (value == null || value == '') {
return'';
}
var dt = parseToDate(value);
return dt.format("yyyy-MM-dd hh:mm:ss");
}

2.上面用到的日期處理方法

[javascript] view plain copy

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);
}
elseif (value.indexOf('/Date') > -1) {
value = value.replace(/\/Date(−?\d+)\//, '$1');
dt = new Date();
dt.setTime(value);
} elseif (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;
};

3.步驟1定義的方法讓控制元件在閱讀狀態下的顯示得到糾正，但dataGrid控制元件還有行編輯狀態，行編輯狀態下還是會出現日期不能正常顯示的狀況，

此時需要拓展datagrid方法(這裡說成重寫比較貼切)，使datagrid行編輯時，日期控制元件內的時間格式正確顯示：

[javascript] view plain copy

$.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) {
$(target).datebox('setValue', formatDatebox(value));
},
resize: function (target, width) {
$(target).datebox('resize', width);
}
},
datetimebox:{
init: function (container, options) {
var input = $('<input type="text">').appendTo(container);
input.datetimebox(options);
return input;
},
destroy: function (target) {
$(target).datetimebox('destroy');
},
getValue:

相關推薦

easyUI的datagrid控制元件日期列格式化

轉自：https://blog.csdn.net/idoiknow/article/details/8136093EasyUI是一套比較輕巧易用的Jquery控制元件，在使用過程中遇到一個問題，它的列表控制元件——datagrid，在顯示日期列的時候，由於後臺返回給頁面的資

infragistics's ultragrid 控制元件顯示列與實際列的關係

彈出列選擇器視窗： ultraGrid1.ShowColumnChooser(); 通過列選擇器，可以使某些列不可見。如果隱藏了某些列，同時又拖拽改變了列順序，比如原來是   1   2   3   4 現在是 3   1 對於某一行，想按照現在的順序依次輸出列值

如何固定列表控制元件當中列的寬度

這個問題的解決方法比較簡單，但是也找了很久，還是記錄一下比較好。 OnInitDialog()裡面加//固定表頭的寬度CHeaderCtrl*   pHeaderCtrl   =   (CHead

DateTimePicker控制元件(日期時間選擇器)《筆記5》

DateTimePicker控制元件使用筆記如何取年限，時間的資料? 關鍵詞(Value) #region Value顯示模式 label5.Text = "年限：" + dateTimePicker4.Value.Ye

DatePicker控制元件/日期控制元件，只顯示年月/隱藏日

datePicker = (DatePicker) dateTimeLayout.findViewById(R.id.date_picker); ((ViewGroup)((ViewGroup) d

Pyqt4 QTableWidget 控制元件修改列的寬度

最近在做三個課設，狗日的！在做計算機網路課設的是由需要用到QTableWidget使用pyqt設計師拖出來的介面發現不能字適應，然後谷歌了好久，才找到這個下面的程式碼，不繫統的學，在做專案的時候果然要浪

自定義EasyUI的datetimebox控制元件日期時間的顯示格式

工作中遇到的問題，在此記錄一下。需求：前臺頁面使用了EasyUI框架，在某一個html頁面中要求datetimebox顯示格式為年月日和小時，如圖所示：嘗試過兩種方法，分別如下：第一種方法： datetimebox 依賴 datebox和t

繼續聊WPF——用Blend自定義Listview控制元件的列表頭

然後，我們到屬性面板中找GridView的ColumnHeaderContainerStyle屬性，結果你發現，就算你在高階選項選單中把它轉換為本地資源，你會發現它沒有反應，切換到XAML檢視也沒看到生成的程式碼。

專案實戰：流水線影象顯示控制元件（列重新整理、1ms一次、縮放、拽拖、拽拖預覽、效能優化、支援OpenGL GPU加速）

需求流水線影象掃描採集控制元件（帶模擬資料測試）效能需求 1.需至少滿足可1ms接收一次列資料，而不丟包（接收後可不必立馬顯示） 2.圖片重新整理率可達30HZ；限制需求 1.圖片高度最小隻能縮小為控制元件在介面顯的高度 2.控制元件在介面顯示的大小可任意調整，圖片可自適應控

Struts2裡面 s:textfield標籤 Date型別的格式化以及日期時間控制元件使用

1：引入：WdatePicker.js 2：<div > <label>發貨時間:</label> <s:textfield id="shipmentsTime" name="shipmentsTime" onfocus="Wda

My97DatePicker（WdatePicker）日期控制元件用法

WdatePicker[html] view plain copy print? <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <input type="text" class="form-control" name="keyword" onClick="WdatePicker()" placeholder="開始日期" /> <input type="text"

selenium之時間日期控制元件的處理（轉）

我們不去搞時間日期空間，我們把它當成一個普通的input框處理就好了！但是，很多此型別input框都是禁止手動輸入的，怎麼辦？很簡單，用js把禁止輸入的readonly屬性幹掉就好了。來吧，看一下示例：示例網址：http://www.sucaijiayuan.com/api/demo.php?

【BootStrap】——Table控制元件將時間戳更改為日期格式

前言      小編最近一直在公司積分系統的bug海洋中，bug天天有，程式碼天天敲啊，這不，又出現了新的問題，獲取時間的方法當經過json序列化後資料就變成了時間戳格式，別急，別急，我就是猴子請來的救兵，看我怎麼解決掉你~~ 正文

easyUI給日期控制元件增加清空按鈕

var buttons = $.extend([], $.fn.datebox.defaults.buttons); buttons.splice(1, 0, { text: '清空',

easyui日期控制元件重寫，只返回年月。

僅適用於easyui，如果是其他日期控制元件，需要使用瀏覽器的開發者工具檢視封裝的dom元素結構，然後進行相應的修改。 $('#cblist_bxny').datebox({ //顯示日趨選擇物件後再觸發彈出月份層的事件，初始化時沒有生成月份層 onSho

miniui通過身份證號碼給Calendar 日期控制元件賦值，獲取使用者出生日期

mniui Calendar 日期控制元件省份證號碼提取出生日期 1.html: <table> <tr> <td><input class="mini-textbox" name="idcardNo"

機房系統（八）——【日期控制元件DTPicker、比較日期大小】

"寧可讓程式（員）多幹活，也不能讓使用者多做"。本著為使用者著想、給使用者以方便的原則，系統中用選代替填，給使用者減少很多不必要的麻煩。在機房系統裡遇到了填寫日期的問題。VB中已經為我們提供了專門的日期控制元件，設

DataGridView控制元件設定某一列單元格的小數點位數

方法一：遍歷你的datagridview所要設定的列，用Match.Round(數值,2)for (int i = 0; i < dvData.Rows.Count; i++) {   dvData[列, i].Value = Math.Round(Co

DevExpress控制元件cxGrid實現多列模糊匹配輸入的完美解決方案

本方案不需要修改控制元件原始碼，是完美解決cxgrid或TcxDBExtLookupComboBox支援多列模糊匹配快速輸入的最佳方案！！小哥摸索多日，終於搞定cxgrid和TcxDBExtLookupComboBox可以支援多列模糊查詢輸入了！縱觀網上的方案，不是

easyUI的datagrid控制元件日期列格式化

相關推薦