datagrid扩展editor

中关村村草

datagrid扩展editor

easyui1.2.4支持了数据编辑功能，但提供的东西有限，所以需要自己进行扩展。下面是扩展一个datetimebox的编辑器。

Js代码

1. 1.$.extend($.fn.datagrid.defaults.editors, {   
   
2. 2.     datetimebox: {//datetimebox就是你要自定义editor的名称   
   
3. 3.         init: function(container, options){   
   
4. 4.             var input = $('<input class="easyuidatetimebox">').appendTo(container);   
   
5. 5.             return input.datetimebox({   
   
6. 6.                 formatter:function(date){   
   
7. 7.                     return new Date(date).format("yyyy-MM-dd hh:mm:ss");   
   
8. 8.                 }   
   
9. 9.             });   
   
10. 10.         },   
    
11. 11.         getValue: function(target){   
    
12. 12.             return $(target).parent().find('input.combo-value').val();   
    
13. 13.         },   
    
14. 14.         setValue: function(target, value){   
    
15. 15.             $(target).datetimebox("setValue",value);   
    
16. 16.         },   
    
17. 17.        resize: function(target, width){   
    
18. 18.             var input = $(target);   
    
19. 19.             if ($.boxModel == true){   
    
20. 20.                 input.width(width - (input.outerWidth() - input.width()));   
    
21. 21.             } else {   
    
22. 22.                 input.width(width);   
    
23. 23.             }   
    
24. 24.         }   
    
25. 25.     }   
    
26. 26.  
    
27. 27. });  
    
28. $.extend($.fn.datagrid.defaults.editors, {
    
29.      datetimebox: {//datetimebox就是你要自定义editor的名称
    
30.          init: function(container, options){
    
31.              var input = $('<input class="easyuidatetimebox">').appendTo(container);
    
32.              return input.datetimebox({
    
33.                  formatter:function(date){
    
34.                      return new Date(date).format("yyyy-MM-dd hh:mm:ss");
    
35.                  }
    
36.              });
    
37.          },
    
38.          getValue: function(target){
    
39.              return $(target).parent().find('input.combo-value').val();
    
40.          },
    
41.          setValue: function(target, value){
    
42.              $(target).datetimebox("setValue",value);
    
43.          },
    
44.         resize: function(target, width){
    
45.              var input = $(target);
    
46.              if ($.boxModel == true){
    
47.                  input.width(width - (input.outerWidth() - input.width()));
    
48.              } else {
    
49.                  input.width(width);
    
50.              }
    
51.          }
    
52.      }
    
53. 
    
54. });

复制代码

自己测试过的代码

Js代码

1. 1.$.extend($.fn.datagrid.defaults.editors, {      
   
2. 2.            datetimebox :{      
   
3. 3.                init: function(container, options){      
   
4. 4.                    var input = $('<input class="easyuidatetimebox">').appendTo(container);   
   
5. 5.                     return input.datetimebox();     
   
6. 6.                },      
   
7. 7.                getValue: function(target){      
   
8. 8.                    return $(target).datetimebox("getValue");      
   
9. 9.                },      
   
10. 10.                setValue: function(target, value){      
    
11. 11.                    $(target).datetimebox("setValue",value);   
    
12. 12.                },      
    
13. 13.                resize: function(target, width){      
    
14. 14.                    var input = $(target);      
    
15. 15.                    if ($.boxModel == true){      
    
16. 16.                        input.width(width - (input.outerWidth() - input.width()));      
    
17. 17.                    } else {      
    
18. 18.                        input.width(width);      
    
19. 19.                    }      
    
20. 20.                }      
    
21. 21.            }      
    
22. 22.        });   

复制代码