天易30----jquery easy UI 自定义Editor日期控件(日期控件用的my97 date)

先看看最终效果：

代码如下：

1.columns中的代码：

[java]  view plain copy

1.   

[java]  view plain copy

1. {field : 'deliveryDate',title : '交货日期',width : 145,resizable:false,align : 'center',editor:{type:'datetimebox'}  

[java]  view plain copy

1. 其中需要说明的是：type中的datetimebox就是自定义的editor日期控件名称，往后边看。  

[java]  view plain copy

1. 2.自定义日期控件代码：  

[java]  view plain copy

1. function datetimebox() {  
2.     $.extend($.fn.datagrid.defaults.editors, {  
3.         datetimebox : {//datetimebox就是你要自定义editor的名称   
4.             init : function(container, options) {  
5.                 var input = $('<input class="Wdate">')  
6.                         .appendTo(container);  
7.                 return input;  
8.             },  
9.             getValue : function(target) {  
10.                 return $(target).val();  
11.             },  
12.             setValue : function(target, value) {  
13.                 $(target).val(value);  
14.             },  
15.             resize : function(target, width) {  
16.                 var input = $(target);  
17.                 if ($.boxModel == true) {  
18.                     input.width(width  
19.                             - (input.outerWidth() - input.width()));  
20.                 } else {  
21.                     input.width(width);  
22.                 }  
23.             }  
24.         }  
25.     });  
26. }  

[java]  view plain copy

1. 其中，Wdate就是my97date开源日期控件的样式。  

[java]  view plain copy

1. 3.这时候定义好了，怎么加载？如何绑定事件？看下边：  

[java]  view plain copy

1. <pre class="java" name="code">toolbar:[{  
2.                     text:'添加货品记录',  
3.                     iconCls:'icon-add',  
4.                     handler:function(){  
5.                         $('#purchaseOrder').datagrid('endEdit', lastIndex);  
6.                             $('#purchaseOrder').datagrid('appendRow',{  
7.                                 productNo:'',  
8.                                 brandName:'',  
9.                                 standard:'',  
10.                                 amount:'',  
11.                                 unitPrice:'',  
12.                                 subtotal:'',  
13.                                 deliveryDate:''  
14.                             });  
15.                             lastIndex = $('#purchaseOrder').datagrid('getRows').length-1;  
16.                             $('#purchaseOrder').datagrid('selectRow', lastIndex);  
17.                             $('#purchaseOrder').datagrid('beginEdit', lastIndex);  
18.                               
19.                             // 给自定义日期控件绑定事件  
20.                             var editors = $('#purchaseOrder').datagrid('getEditors', lastIndex);  
21.                             var date = editors[6];  
22.                             date.target.bind('click',function() {  
23.                                 var dateStr = WdatePicker({dateFmt:'yyyy-MM-dd'});  
24.                             });  
25.                         }  
26.                     }</pre><br>  
27. 我是在添加一行的时候出发日期控件的onclick事件，WdatePicker({dateFmt:'yyyy-MM-dd'})方法就是打开my97date日期控件的方法。触发的时候因情况和需要而定，希望对大家有用。<br>  
28. <pre></pre>  
29. <p> </p>  
30. <pre></pre>