web前端：easyui-datetimebox 控件绑定双击事件实现自动选中当前日期时间

作者:伟宇凌风更新于： 2020-03-05 11:45:04

　　控件是指对数据和方法的封装。控件可以有自己的属性和方法，其中属性是控件数据的简单访问者，方法则是控件的一些简单而可见的功能、控件创建过程包括设计、开发、调试(就是所谓的3Ds开发流程,即Design、Develop、debug)工作，然后是控件的使用。

　　本方法是在不改变原js的情况下，通过扩展方法来实现本目的

　　首先在datetimebox控件中扩展一个绑定双击事件的方法

　　具体的编程语言如下所示：

　　$.extend($.fn.datetimebox.methods,{

　　//绑定双击事件方法

　　bindDblClick:function(jq){

　　varpanel=$(jq).combo("panel");

　　panel.find(".datebox-calendar-inner").off("dblclick").on("dblclick",function(e){

　　varcalendar=$(jq).datetimebox("calendar");

　　varspinner=$(jq).datetimebox("spinner");

　　varcurrent=calendar.calendar("options").current;

　　varyear=current.getFullYear();

　　varmonth=current.getMonth()+1;

　　vardate=current.getDate();

　　vartime=spinner.spinner("getValue");

　　vardatetime=year+"-"+month+"-"+date+""+time;

　　$(jq).datetimebox("setValue",datetime);

　　$(jq).combo("hidePanel");

　　});

　　}

　　});

　　然后在datetimebox控件中的onShowPanel事件中进行绑定双击事件

　　1$.extend($.fn.datetimebox.defaults,{

　　2onShowPanel:function(){

　　3$(this).datetimebox("bindDblClick");

　　4}

　　5});

　　注意：上述两个扩展必须放在加载datetimebox控件之前。

　　该方法是在easyui-1.7.0版本的基础上开发出来的。

　　设计控件是一项繁重的工作。自行开发控件与使用控件进行可视化程序开发存在着极大的不同，要求程序员精通面向对象程序设计。创建控件的最大意义在于封装重复的工作，其次是可以扩充现有控件的功能。