Easyui的datagrid的editor(行编辑器)如何扩展datetimebox类型

时间:2024-03-04 07:48:07

在easyui的datagrid扩展方法中添加这样的时间日期(datetimebox)代码块

放在   $.extend($.fn.datagrid.defaults.editors,{datetimebox...}方法下

      $.extend($.fn.datagrid.defaults.editors, {
            label: {
                init: function (container, options) {
                    var input = $(\'<div></div>\').appendTo(container);
                    return input;
                },
                destroy: function (target) {

                },
                getValue: function (target) {
                    return $(target).html();
                },
                setValue: function (target, value) {
                    $(target).html(value);
                },
                resize: function (target, width) {

                }
            },
             //扩展dategrid的editors的类型
            datetimebox: {
                init: function (container, options) {
                    var input = $(\'<input type="text" class="easyui-datetimebox">\')
                      .appendTo(container);
                    //编辑框延迟加载
                    window.setTimeout(function () {
                        input.datetimebox($.extend({ editable: false }, options));
                    }, 10);                 
                    return input;
                },
                getValue: function (target) {
                    return $(target).datetimebox(\'getValue\');
                },
                setValue: function (target, value) {
                    $(target).val(value);
                    window.setTimeout(function () {
                        $(target).datetimebox(\'setValue\', value);
                    }, 150);
                },
                resize: function (target, width) {
                    var input = $(target);
                    if ($.boxModel == true) {
                        input.width(width - (input.outerWidth() - input.width()));
                    } else {
                        input.width(width);
                    }
                }
            }
        });    

我是在label下加,找到这方法,在原先扩展下面追加一个datetimebox

页面上就可以使用editor={type=\'datetimebox\'}这样的写法了

 <th field="BirthDate" sortable="true" align="center" width="150" editor="{type:\'datetimebox\',options:{required: true}}" formatter="com.formatTime">出生日期</th>

效果如下图:

Ps:

参考来源网址: http://blog.csdn.net/leiyong0326/article/details/41942955