Easyui DataGrid Date column (Datebox) correctly displays the JSON time format

Problem Description:

The front-end uses Easyui, the background uses spring MVC, the database is stored in the time format:2014-06-10, but the background back to the foreground page data is in JSON format, similar to: 1402367297000 form, The date column Datebox is unresolved. Specific example:

oneself is also easyui small white, on-line search data, Daoteng under finally got out, here to do next record.

In general, the date formats we need are: 2014-02-02 or 2014/09/09, so first consider implementing a plugin that adds date formatting.

jquery date Formatting

Add code to your JS to extend jquery with the following code:

Date.prototype.format = function (format) {var o = {"m+": This.getmonth () + 1,//month "d+": this.getdate (),//day "H +": this. GetHours (),//When "m+": this.getminutes (),//Sub "s+": This.getseconds (),//sec "q+": Math.floor ((This.getmonth () + 3)/3), Engraved "S": this.getmilliseconds ()//milliseconds//millisecond}if (/(y+)/.test (format)) format = Format.replace (Regexp.$1, ( This.getfullyear () + ""). substr (4-regexp.$1.length)); (var k in O) if (New RegExp ("(" + K + ")"). Test (format) format = Format.replace (regexp.$1, regexp.$1.length = = 1? O[k]: ("XX" + o[k]). substr (("" + o[k]). length); return format;}

This adds a date-formatted feature to jquery. You can simply try to format the success:

Example code:

Console output Results:
As you can see, the time format has been converted to the format we need.
Formatdatebox
In the example code above, we still need to specify format, where we first abstract a formatdatebox function to display the date.
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"); The format method of the extended date (the plug-in implementation above)        }
Again we are simply tested under:
Console.info (Formatdatebox (1402367297000));
"1402367297000" is the JSON form of the time format, the result of the final output is:2014-06-10. Test passed. 
Datebox Specifying Formatter
Before the preparation work is done, the next step is to apply the Formatdatebox function to the Datebox, very simple, just specify the DataGrid Space column Property Fomatter is the Formatdatebox function.
Here's an example:
Columns: [                {                    field: ' UpdateTime ',                    title: ' Update Time ',                    Formatter:formatdatebox,                    sortable:true,                    Editor: ' Datebox '                }                ]         
you can then see the actual effect as we need it.
But is it far from over? According to the above code also found that we have implemented the line editor, when we double-click a record, the value inside the Datebox is lost, and the format obtained by the date selector is not the same. Well, here we need to rewrite the DataGrid method so that when the DataGrid row is edited, the time format within the date control is displayed correctly, without losing data, the code is as follows:
$.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 ');//Get old value},setvalue:function ( Target, value) {Console.info (Formatdatebox (value)); $ (target). Datebox (' SetValue ', Formatdatebox (value));// Sets the date format of the new value},resize:function (target, width) {$ (target). Datebox (' resize ', width);}});

After the completion of the effect see:
OK, it is probably so much, sorry is not to provide a complete demo, because it involves the background of the interaction, can use static data to simulate the show, but time is not enough, also not much of the interest to achieve again. It's the first place.
Reference: http://www.kuaipao8.com/?p=323
http://blog.csdn.net/j2eevic/article/details/7395290