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

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

    

  1.  $.extend($.fn.datagrid.defaults.editors,
  2.  { datetimebox: {  
  3. //datetimebox就是你要自定义editor的名称
  4. init: function(container, options){   
  5.   var input = $('<input class="easyuidatetimebox">').appendTo(container); 
  6. return input.datetimebox({
  7. formatter:function(date){ 
  8. return new Date(date).format("yyyy-MM-dd hh:mm:ss"); 
  9. } }); 
  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. } } });  

这是最终出来的效果:

jQuery EasyUI自定义DataGrid的Editor_easyui datagridjQuery EasyUI自定义DataGrid的Editor_easyui datagrid_02

使用方法:
 

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

或者:

在配置里面

 

  1. {  
  2. field:"dataTime",  
  3. editor:"datetimebox" 
  4. }  
  5.  

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

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

 //时间格式化 Date.prototype.format = function(format){ if(!format){ format = "yyyy-MM-dd hh:mm:ss"; } 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; };