JQGrid 在格式化时显示错误的日期
JQGrid displaying wrong date when formatted
我有一个使用 jsonReader 构建的 JQGrid,带有一个名为 quote_date 的字段。
当此字段未格式化时,它显示值“19/04/2020 00:00:00”
未格式化字段的代码
name: 'quote_date', index: 'quote_date', width: 100, editable: true
但是,当我尝试使用 JQGrid 格式化程序(我试图删除试验零)时,网格中的日期值显示为“10-10-2024”!
这是我用来格式化字段的代码
name: 'quote_date', formatter: 'date', datefmt: "d-M-Y", editoptions: { dataInit: initDateEdit }, formatoptions: { srcformat: "ISO8601Long", newformat: "d-m-Y" }, index: 'quote_date', width: 100, editable: true
预期结果是“19/04/2020”
我检查了返回的 JSON 结果,如下所示是正确的。
这是我提供一些上下文的完整代码。
构建网格的代码
function LoadGrid() {
jQuery("#jqquotes").jqGrid({
url: '../WebService1.asmx/getDataQuotes',
datatype: "json",
mtype: 'POST',
ajaxGridOptions: { contentType: "application/json" },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: {
root: function (obj) {
return typeof obj.d === "string" ? $.parseJSON(obj.d) : obj.d;
},
repeatitems: false
},
loadComplete: function () {
//alert("OK");
},
loadError: function (jqXHR, textStatus, errorThrown) {
alert('HTTP status code: ' + jqXHR.status + '\n' +
'textStatus: ' + textStatus + '\n' +
'errorThrown: ' + errorThrown);
alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
},
onSelectRow: showDetailsGrid,
height: 'auto',
//autowidth: true,
rowNum: 30,
rowList: [10, 20, 30],
colNames: ['Doc ID', 'Quote #', 'Date', 'Customer'],
colModel: [
{ name: 'docid', key: true, index: 'docid', width: 55, editable: true },
{ name: 'quote_number', index: 'quote_number', width: 90, editable: true },
{
name: 'quote_date', formatter: 'date', datefmt: "d-M-Y", editoptions: { dataInit: initDateEdit },
formatoptions: { srcformat: "ISO8601Long", newformat: "d-m-Y" }, index: 'quote_date', width: 100, editable: true
//name: 'quote_date', index: 'quote_date', width: 100, editable: true
},
{
name: 'cust_name', index: 'cust_name', width: 80, align: "left", editable: true, edittype: "select",
editoptions: {
value: {}
}
}
],
pager: "#jqquotesPager",
viewrecords: true,
caption: "Quotes",
gridview: true,
loadonce: false, //Important - Doesn't work without - might need server side paging?
}).navGrid('#jqquotesPager', { edit: true, add: true, del: true }, // options
{
url: '../WebService1.asmx/modifyDataQuotes',
closeAfterEdit: true,
beforeShowForm: function (form) {
$('#docid', form).attr("disabled", true);
},
ajaxEditOptions: { contentType: "application/json" },
recreateForm: true,
serializeEditData: function (postData) {
if (postData.exercise_value === undefined) { postData.exercise_value = null; }
return JSON.stringify(postData);
}
}, // edit options
{
url: "../WebService1.asmx/addDataQuotes",
closeAfterAdd: true,
beforeShowForm: function (form) {
$('#docid', form).attr("disabled", true);
},
ajaxEditOptions: { contentType: "application/json" },
recreateForm: true,
serializeEditData: function (postData) {
if (postData.exercise_value === undefined) { postData.exercise_value = null; }
return JSON.stringify(postData);
}
}, // add options
{
url: "../WebService1.asmx/deleteDataQuotes",
ajaxDelOptions: { contentType: "application/json" },
serializeDelData: function (postData) {
if (postData.exercise_value === undefined) { postData.exercise_value = null; }
return JSON.stringify(postData);
}
}, //del options
{
multipleSearch: true,
recreateFilter: true,
closeOnEscape: true,
overlay: false
}, // search options
);
}
日期选择器代码
//Define Datepicker
$grid = $("#jqquotes"),
initDateEdit = function (elem) {
$(elem).datepicker({
dateFormat: "dd-mm-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
},
initDateSearch = function (elem) {
var $self = $(this);
setTimeout(function () {
$(elem).datepicker({
dateFormat: "dd-mm-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showWeek: true,
showButtonPanel: true,
onSelect: function () {
if (this.id.substr(0, 3) === "gs_") {
// call triggerToolbar only in case of searching toolbar
setTimeout(function () {
$self[0].triggerToolbar();
}, 100);
}
}
});
}, 100);
},
numberTemplate = {
formatter: "number", align: "right", sorttype: "number",
editrules: { number: true, required: true },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }
};
我已经在这上面花了大约半天时间,但我无法弄清楚发生了什么。
非常感谢任何帮助。
srcformat 和来自数据源的实际格式设置不正确。根据定义,ISO8601Long 被描述为:
ISO8601Long:"Y-m-d H:i:s",
见here
你的源数据格式是d/m/YH:i:s,差别很大。为了让它起作用,请像这样设置它:
...
{
name: 'quote_date', formatter: 'date', datefmt: "d-m-Y", editoptions: { dataInit: initDateEdit },
formatoptions: { srcformat: "d/m/Y H:i:s", newformat: "d-m-Y" }, index: 'quote_date', width: 100, editable: true
},
请注意,我已经更改了 datefmt 和 newformat,以防您要删除尾随零。这将与您的日期选择器设置兼容
我有一个使用 jsonReader 构建的 JQGrid,带有一个名为 quote_date 的字段。
当此字段未格式化时,它显示值“19/04/2020 00:00:00”
未格式化字段的代码
name: 'quote_date', index: 'quote_date', width: 100, editable: true
但是,当我尝试使用 JQGrid 格式化程序(我试图删除试验零)时,网格中的日期值显示为“10-10-2024”!
这是我用来格式化字段的代码
name: 'quote_date', formatter: 'date', datefmt: "d-M-Y", editoptions: { dataInit: initDateEdit }, formatoptions: { srcformat: "ISO8601Long", newformat: "d-m-Y" }, index: 'quote_date', width: 100, editable: true
预期结果是“19/04/2020”
我检查了返回的 JSON 结果,如下所示是正确的。
这是我提供一些上下文的完整代码。
构建网格的代码
function LoadGrid() {
jQuery("#jqquotes").jqGrid({
url: '../WebService1.asmx/getDataQuotes',
datatype: "json",
mtype: 'POST',
ajaxGridOptions: { contentType: "application/json" },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: {
root: function (obj) {
return typeof obj.d === "string" ? $.parseJSON(obj.d) : obj.d;
},
repeatitems: false
},
loadComplete: function () {
//alert("OK");
},
loadError: function (jqXHR, textStatus, errorThrown) {
alert('HTTP status code: ' + jqXHR.status + '\n' +
'textStatus: ' + textStatus + '\n' +
'errorThrown: ' + errorThrown);
alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
},
onSelectRow: showDetailsGrid,
height: 'auto',
//autowidth: true,
rowNum: 30,
rowList: [10, 20, 30],
colNames: ['Doc ID', 'Quote #', 'Date', 'Customer'],
colModel: [
{ name: 'docid', key: true, index: 'docid', width: 55, editable: true },
{ name: 'quote_number', index: 'quote_number', width: 90, editable: true },
{
name: 'quote_date', formatter: 'date', datefmt: "d-M-Y", editoptions: { dataInit: initDateEdit },
formatoptions: { srcformat: "ISO8601Long", newformat: "d-m-Y" }, index: 'quote_date', width: 100, editable: true
//name: 'quote_date', index: 'quote_date', width: 100, editable: true
},
{
name: 'cust_name', index: 'cust_name', width: 80, align: "left", editable: true, edittype: "select",
editoptions: {
value: {}
}
}
],
pager: "#jqquotesPager",
viewrecords: true,
caption: "Quotes",
gridview: true,
loadonce: false, //Important - Doesn't work without - might need server side paging?
}).navGrid('#jqquotesPager', { edit: true, add: true, del: true }, // options
{
url: '../WebService1.asmx/modifyDataQuotes',
closeAfterEdit: true,
beforeShowForm: function (form) {
$('#docid', form).attr("disabled", true);
},
ajaxEditOptions: { contentType: "application/json" },
recreateForm: true,
serializeEditData: function (postData) {
if (postData.exercise_value === undefined) { postData.exercise_value = null; }
return JSON.stringify(postData);
}
}, // edit options
{
url: "../WebService1.asmx/addDataQuotes",
closeAfterAdd: true,
beforeShowForm: function (form) {
$('#docid', form).attr("disabled", true);
},
ajaxEditOptions: { contentType: "application/json" },
recreateForm: true,
serializeEditData: function (postData) {
if (postData.exercise_value === undefined) { postData.exercise_value = null; }
return JSON.stringify(postData);
}
}, // add options
{
url: "../WebService1.asmx/deleteDataQuotes",
ajaxDelOptions: { contentType: "application/json" },
serializeDelData: function (postData) {
if (postData.exercise_value === undefined) { postData.exercise_value = null; }
return JSON.stringify(postData);
}
}, //del options
{
multipleSearch: true,
recreateFilter: true,
closeOnEscape: true,
overlay: false
}, // search options
);
}
日期选择器代码
//Define Datepicker
$grid = $("#jqquotes"),
initDateEdit = function (elem) {
$(elem).datepicker({
dateFormat: "dd-mm-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
},
initDateSearch = function (elem) {
var $self = $(this);
setTimeout(function () {
$(elem).datepicker({
dateFormat: "dd-mm-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showWeek: true,
showButtonPanel: true,
onSelect: function () {
if (this.id.substr(0, 3) === "gs_") {
// call triggerToolbar only in case of searching toolbar
setTimeout(function () {
$self[0].triggerToolbar();
}, 100);
}
}
});
}, 100);
},
numberTemplate = {
formatter: "number", align: "right", sorttype: "number",
editrules: { number: true, required: true },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }
};
我已经在这上面花了大约半天时间,但我无法弄清楚发生了什么。
非常感谢任何帮助。
srcformat 和来自数据源的实际格式设置不正确。根据定义,ISO8601Long 被描述为:
ISO8601Long:"Y-m-d H:i:s",
见here
你的源数据格式是d/m/YH:i:s,差别很大。为了让它起作用,请像这样设置它:
...
{
name: 'quote_date', formatter: 'date', datefmt: "d-m-Y", editoptions: { dataInit: initDateEdit },
formatoptions: { srcformat: "d/m/Y H:i:s", newformat: "d-m-Y" }, index: 'quote_date', width: 100, editable: true
},
请注意,我已经更改了 datefmt 和 newformat,以防您要删除尾随零。这将与您的日期选择器设置兼容