easyUIのリストコントロール(datagrid)日付列が正しく表示されない解決方法
6927 ワード
一、出会った問題
EasyUIは比較的軽くて使いやすいJqueryコントロールで、EasyUIでは、彼の表は完璧だと思います.しかし、アメリカでは不足しているのは、使用中に問題が発生したことであり、そのリストコントロールであるdatagridは、日付列を表示する際に、バックグラウンドでページに返されるデータがJson形式であるため、そのうちの1つの日付フィールドは、バックグラウンドでは正常な「2012-11-10 12:18:00」というフォーマットである.フロントページに着くと、/Date(1242357713797+0800)/のようなフォーマットに変換されます.
二、解決策
この問題が発生した後、私はいくつかの解決策を調べて、全体的に2つの種類に分けて、1つはjsonを返す前に、DataTimeタイプをstringタイプに変換して、もう1つの方法は、フロントjsで返されたデータを処理することです.
1、バックグラウンドソリューション:
jsonシーケンス化の前に,クエリした値をviewmodelに複素値し,同時にDataTimeタイプのデータをStringタイプに変換してからjsonシーケンス化する.ただし、タイムスタンプ、またはタイムフィールドがデータベースで空であることが許可されていない場合、この方法は有効です.しかし、あなたのデータは空で、タイプ変換に問題が発生します.コードの例は次のとおりです.
2、フロントの切り替え方法
データ中の時間が空である場合を克服するために,フロントjsを用いて返されたjsonデータを解析することを考慮することができる.
まず、日付列を正常に表示する方法を定義します.jsコードは次のとおりです.
第2歩目、前の方法はコントロールを普通の状態での表示を修正させるだけですが、dataGridコントロールには行編集状態があり、行編集状態では日付が正常に表示されない状況が発生します.この場合、datagrid方法(ここでは書き換え比が適切と言います)を拡張し、datagrid行編集時に日付コントロール内の時間フォーマットを正しく表示させる必要があります.
ステップ3、元のDateタイプにformatを拡張する方法で、日付表示のフォーマットに使用します.
ステップ4、前の準備ができたら、次に前に書いたformatDateboxメソッドをコントロールに適用します.datagridコントロールの列属性には、列の表示方法をカスタマイズするためのformatterメンバーがあります.手順1で定義したformatDateboxメソッド名をこのメンバーに関連付けるとよい.ページ内Jsは以下の通り
まとめ:
第2の方法を使用するときは、前の3つのステップを直接1つのjsに置いて、それからページがこのjsを引用して、あなたの表示の上で、ページjsのコードを書いて、日付のフォーマットを実現することができます.しているうちに、私も多くの人に教えてもらって、多くの方法を試して、もちろん、問題を解決する方法はまだたくさんあります.もしあなたがもっと良い方法があれば、コミュニケーションを歓迎します.
EasyUIは比較的軽くて使いやすいJqueryコントロールで、EasyUIでは、彼の表は完璧だと思います.しかし、アメリカでは不足しているのは、使用中に問題が発生したことであり、そのリストコントロールであるdatagridは、日付列を表示する際に、バックグラウンドでページに返されるデータがJson形式であるため、そのうちの1つの日付フィールドは、バックグラウンドでは正常な「2012-11-10 12:18:00」というフォーマットである.フロントページに着くと、/Date(1242357713797+0800)/のようなフォーマットに変換されます.
二、解決策
この問題が発生した後、私はいくつかの解決策を調べて、全体的に2つの種類に分けて、1つはjsonを返す前に、DataTimeタイプをstringタイプに変換して、もう1つの方法は、フロントjsで返されたデータを処理することです.
1、バックグラウンドソリューション:
jsonシーケンス化の前に,クエリした値をviewmodelに複素値し,同時にDataTimeタイプのデータをStringタイプに変換してからjsonシーケンス化する.ただし、タイムスタンプ、またはタイムフィールドがデータベースで空であることが許可されていない場合、この方法は有効です.しかし、あなたのデータは空で、タイプ変換に問題が発生します.コードの例は次のとおりです.
/// <summary>
///
/// </summary>
/// <returns></returns>
public ActionResult QueryLog()
{
IOperationLogBll operationLogBll = SpringHelper.GetObject<IOperationLogBll>("OperationLogBll");
// ， ，
int pageIndex = Request["page"] == null ? 1 : int.Parse(Request["page"]);
int pageSize = Request["rows"] == null ? 20 : int.Parse(Request["rows"]);
int total = 0;
//
string userId = Request["userId"];
string beforetime = Request["beforetime"];
string lasttime = Request["lasttime"];
List<OperationLogViewModel> listUniversityStd = new List<OperationLogViewModel>();
// ，
if (userId != null && beforetime !="")
{
listUniversityStd = operationLogBll.QueryLog(userId, beforetime, lasttime, pageSize, pageIndex, out total);
}
else if (userId != null && beforetime == "")
{
listUniversityStd = operationLogBll.QueryLog(userId, pageSize, pageIndex, out total);
}
else
{
listUniversityStd = operationLogBll.QueryLog(pageSize, pageIndex, out total);
}
var data = new
{
total,
// ， Tostring
rows = from u in listUniversityStd select new (u.userID,u.userName,beforetime =((DateTime)u.operatorTime).ToString())
//rows = listUniversityStd
};
return Json(data, JsonRequestBehavior.AllowGet);
}2、フロントの切り替え方法
データ中の時間が空である場合を克服するために,フロントjsを用いて返されたjsonデータを解析することを考慮することができる.
まず、日付列を正常に表示する方法を定義します.jsコードは次のとおりです.
function formatDatebox(value) {
if (value == null || value == '') {
return '';
}
var dt;
if (value instanceof Date) {
dt = value;
}
else {
dt = new Date(value);
if (isNaN(dt)) {
value = value.replace(/\/Date\((-?\d+)\)\//, '$1'); // ， JS
dt = new Date();
dt.setTime(value);
}
}
return dt.format("yyyy-MM-dd"); // javascript Date ， ， 3
}第2歩目、前の方法はコントロールを普通の状態での表示を修正させるだけですが、dataGridコントロールには行編集状態があり、行編集状態では日付が正常に表示されない状況が発生します.この場合、datagrid方法(ここでは書き換え比が適切と言います)を拡張し、datagrid行編集時に日付コントロール内の時間フォーマットを正しく表示させる必要があります.
$.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);
}
}
});
ステップ3、元のDateタイプにformatを拡張する方法で、日付表示のフォーマットに使用します.
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;
}ステップ4、前の準備ができたら、次に前に書いたformatDateboxメソッドをコントロールに適用します.datagridコントロールの列属性には、列の表示方法をカスタマイズするためのformatterメンバーがあります.手順1で定義したformatDateboxメソッド名をこのメンバーに関連付けるとよい.ページ内Jsは以下の通り
function initTable(queryData) {
$('#test').datagrid({ // Table ，Table ID test
fitColumns: true,
url: '/OperationLog/QueryLog', // Action Json
title: ' ', //
iconCls: 'icon-save',
height:335,
nowrap: true,
autoRowHeight: false,
striped: true,
collapsible: true,
pagination: true,
rownumbers: true,
//sortName: 'ID', // easyUI
//sortOrder: 'asc',
remoteSort: false,
//idField: 'number',
queryParams: queryData, //
columns: [[
{ title: ' ', field: 'userID',sortable: true,},
{ title: ' ', field: 'operatorType', sortable: true, },
{ title: ' ', field: 'userName', sortable: true, },
{ title: ' ', field: 'operatorTime', formatter: formatDatebox, editor: 'datebox', sortable: true, width: 10, }
]],
});
}
</script>まとめ:
第2の方法を使用するときは、前の3つのステップを直接1つのjsに置いて、それからページがこのjsを引用して、あなたの表示の上で、ページjsのコードを書いて、日付のフォーマットを実現することができます.しているうちに、私も多くの人に教えてもらって、多くの方法を試して、もちろん、問題を解決する方法はまだたくさんあります.もしあなたがもっと良い方法があれば、コミュニケーションを歓迎します.