datagrid扩展editor

最新推荐文章于 2017-12-06 20:16:00 发布

原创最新推荐文章于 2017-12-06 20:16:00 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #ViewUI

easyui学习专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何为 EasyUI 1.2.4 的 datagrid 扩展自定义的 DateTimeBox 编辑器，提供了完整的代码示例，帮助开发者实现更灵活的数据编辑功能。

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

$.extend($.fn.datagrid.defaults.editors, {
     datetimebox: {//datetimebox就是你要自定义editor的名称
         init: function(container, options){
             var input = $('<input class="easyuidatetimebox">').appendTo(container);
             return input.datetimebox({
                 formatter:function(date){
                     return new Date(date).format("yyyy-MM-dd hh:mm:ss");
                 }
             });
         },
         getValue: function(target){
             return $(target).parent().find('input.combo-value').val();
         },
         setValue: function(target, value){
             $(target).datetimebox("setValue",value);
         },
        resize: function(target, width){
             var input = $(target);
             if ($.boxModel == true){
                 input.width(width - (input.outerWidth() - input.width()));
             } else {
                 input.width(width);
             }
         }
     }

 });

自己测试过的代码

$.extend($.fn.datagrid.defaults.editors, {   
			datetimebox :{   
				init: function(container, options){   
					var input = $('<input class="easyuidatetimebox">').appendTo(container);
					 return input.datetimebox();  
				},   
				getValue: function(target){   
					return $(target).datetimebox("getValue");   
				},   
				setValue: function(target, value){   
					$(target).datetimebox("setValue",value);
				},   
				resize: function(target, width){   
					var input = $(target);   
					if ($.boxModel == true){   
						input.width(width - (input.outerWidth() - input.width()));   
					} else {   
						input.width(width);   
					}   
				}   
			}   
		});