jQueryEasyUI重寫datagrid的datetimebox編輯型別

天空夜空星發表於2018-08-25

datagrid的編輯框可以為datatimebox或者為datebox如下:

示例如下:

{ field: `makeDate`, title: `編制日期`, width: 45,
                    editor:{  
                        type:`datebox` ,   
                        options:{  
                            editable:false   
                        }  
                    }
                }

$.extend($.fn.datagrid.defaults.editors, { 
    datebox : {  
        init : function(container, options) {  
            var box = $(`<input />`).appendTo(container);  
            options.onSelect=function(){
                var val = box.datebox(`getValue`);
                //執行相關操作
            }
            box.datebox(options); 
            
            return box;  
        },  
        getValue : function(target) {  
            return $(target).datebox(`getValue`);  
        },  
        setValue : function(target, value) {  
            $(target).datebox(`setValue`, value); 
        },  
        resize : function(target, width) {  
            var box = $(target);  
            box.datebox(`resize`, width);  
        },  
        destroy : function(target) {  
            $(target).datebox(`destroy`);  
        },
    }  
});  

$.extend($.fn.datagrid.defaults.editors, {  
    datetimebox : {  
        init : function(container, options) {  
            var box = $(`<input />`).appendTo(container);  
            box.datetimebox(options);  
            return box;  
        },  
        getValue : function(target) {  
            return $(target).datetimebox(`getValue`);  
        },  
        setValue : function(target, value) {  
            $(target).datetimebox(`setValue`, value); 
        },  
        resize : function(target, width) {  
            var box = $(target);  
            box.datetimebox(`resize`, width);  
        },  
        destroy : function(target) {  
            $(target).datetimebox(`destroy`);  
        },
    }  
});


相關文章