开发者社区> 天空夜空星> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery EasyUI 重写datagrid的datetimebox编辑类型

简介: jQuery EasyUI 重写datagrid的datetimebox编辑类型
+关注继续查看

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');  
        },
    }  
});

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
EasyUI的相关操作与DataGrid基本属性
easyui是基于jQuery、Angular.、Vue和React的用户界面组件的集合。 easyui提供了构建现代交互式javascript应用程序的基本功能。 使用easyui,您不需要编写许多javascript代码,通常通过编写一些HTML标记来定义用户界面。 完整的HTML5网页框架。 使用easyui开发你的产品时可以大量节省你的时间和规模。 easyui使用非常简单但功能非常强大。
0 0
多种方式解决EasyUI—DataGrid中DateTime的格式化问题
多种方式解决EasyUI—DataGrid中DateTime的格式化问题
0 0
EasyUI-- datagrid分页详解
分页的英文是pagination,记住这个单词,因为会经常遇见。 在EasyUI框架下,datagrid使用分页简单到令人发指,只需要2点: 1,为table启用class=“easyui-datagrid”,这样table就成为了一个数据网格。 2,为table启用pagination=“true”,表示表格启用分页功能。
0 0
EasyUI–表格datagrid详解
具体解释都写在文字描述里面了,先看示意图:
0 0
easyUI跨tab刷新datagrid
easyUI跨tab刷新datagrid
1302 0
【easyui】关于easyui Datagrid一些样式记录
此篇文章主要记录在使用datagrid中常见的修改样式方式以及样式效果配图!!!!  一丶存在选中框的时候标题栏合并显示序号字段。       代码展示:                    1 onLoadSuccess: function (data) { 2 ...
1733 0
easyui中datagrid自适应浏览器大小
因为datagrid的fitColumns只有在初次加载数据的时候生效,所以在加载完数据后再改变浏览器大小,datagrid是不会改变大小的,只能保持在加载数据的时候的浏览器大小 解决方法就...
1482 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载