jQuery EasyUI自定义DataGrid的Editor【转】

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

 

官网datagrid的api：http://jquery-easyui.wikidot.com/document:datagrid

首先，先看看官方的editor的介绍：

可以看到如果我们要自定义一个editor，需要实现四个方法（init，getValue,setValue,resize)。

下面是我自己扩展的一个datetimebox类型

 

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

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

03	init: function(container, options){

04	var input = $('<input class="easyuidatetimebox">').appendTo(container);

05	return input.datetimebox({

06	formatter:function(date){

07	return new Date(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	var input = $(target);

19	if ($.boxModel == true){

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

21

} else {

22	input.width(width);

23

}

24

}

25

}

26

});

 

 

 

这是最终出来的效果：

使用方法：

<th field="datetime" width="150" editor="datetimebox">datetime</th>

或者:

在配置里面

{

field:"dataTime",

editor:"datetimebox"

}

一般我们只许要注意init，getValue和setValue这三个方法，最主要的还是init的方法的实现。需要注意的是，这里的set和getValue方法都是针对于editor的，是给editor设值和获取值的。

 

上面例子中涉及到的format方法：

 

01

//时间格式化

02	Date.prototype.format = function(format){

03

/*

04	* eg:format="yyyy-MM-dd hh:mm:ss";

05

*/

06	if(!format){

07	format = "yyyy-MM-dd hh:mm:ss";

08

}

09

10

var o = {

11	"M+": this.getMonth() + 1, // month

12	"d+": this.getDate(), // day

13	"h+": this.getHours(), // hour

14	"m+": this.getMinutes(), // minute

15	"s+": this.getSeconds(), // second

16	"q+": Math.floor((this.getMonth() + 3) / 3), // quarter

17	"S": this.getMilliseconds()

18	// millisecond

19

};

20

21	if (/(y+)/.test(format)) {

22	format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));

23

}

24

25	for (var k in o) {

26	if (new RegExp("(" + k + ")").test(format)) {

27	format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" +o[k]).length));

28

}

29

}

30	return format;

31

};