[Turn]jquery Easyui custom DataGrid's editor

Original address: http://www.jeasyuicn.com/post-3.html

Official website of the DataGrid Api:http://jquery-easyui.wikidot.com/document:datagrid

First, let's look at the official editor's introduction:

You can see that if we want to customize an editor, we need to implement four methods (Init,getvalue,setvalue,resize).

Here is a datetimebox type that I expanded myself

01	$.extend($.fn.datagrid.defaults.editors, {

02	datetimebox: {//datetimebox就是你要自定义editor的名称

03	init: function(container, options){

04	varinput = $(‘<input class="easyuidatetimebox">‘).appendTo(container);

05	returninput.datetimebox({

06	formatter:function(date){

07	returnnewDate(date).format("yyyy-MM-dd hh:mm:ss");

08

}

09

});

10

},

11	getValue: function(target){

12	return$(target).parent().find(‘input.combo-value‘).val();

13

},

14	setValue: function(target, value){

15	$(target).datetimebox("setValue",value);

16

},

17	resize: function(target, width){

18	varinput = $(target);

19	if($.boxModel == true){

20	input.width(width - (input.outerWidth() - input.width()));

21

} else{

22	input.width(width);

23

}

24

}

25

}

26

});

This is the final result:

How to use:

<th field= "datetime" width= "editor=" Datetimebox ">datetime</th>

Or:

Inside the configuration

{

Field: "Datatime",

Editor: "Datetimebox"

}

Generally we only want to pay attention to Init,getvalue and SetValue these three methods, the most important is the implementation of the Init method. It is important to note that the set and GetValue methods here are for the editor, which sets the value and gets the value of the editor.

The format method involved in the above example:

1 //Time formatting2 Date.prototype.format = function (format) {3     /*4 * eg:format= "Yyyy-mm-dd hh:mm:ss";5      */6 if (!format) {7 format = "Yyyy-mm-dd hh:mm:ss";8     }9 Ten var o = { One "m+": This.getmonth () + 1,//month A "d+": this.getdate (),// Day - "H +": this.gethours (),//hour - "m+": this.getminutes (),//minute the "s+": This.getseconds (),//second - "q+": Math.floor ((This.getmonth () + 3)/3),//Quarter - "S": This.getmilliseconds () - //Millisecond +    }; -  + if (/(y+)/.test (format)) { A format = Format.replace (regexp.$1, (this.getfullyear () + ""). substr (4-regexp.$1.length)); at     } -  - For (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) ); -        } in     } - return format; to};

[Turn]jquery Easyui custom DataGrid's editor