现在的位置: 首页 > easyui > Form > form > 正文
My97DatePicker与easyui共用问题
2012年02月15日 form, My97 ⁄ 共 1281字 评论数 4 ⁄ 被围观 18,918 views+

首先My97DatePicker与jQuery easyui是没有冲突的,不过easyui有自己的datebox插件,可编辑grid等实用的日期框也是基于easyui自己的日期插件。

所以My97DatePicker与easyui共用主要用途是在表单上面,为什么要用My97DatePicker,我想用过两者的人应该就知道easyui自身的日期插件功能较为单调,用起来不是很方便,具体的可以自己去体验。

1.2.5版本的easyui在和My97DatePicker共用时存在一个问题:对表单使用easyui的form插件进行验证时(日期框已经在手动点击下弹出过),不管你My97DatePicker是使用onfocus还是onclick触发,都会自动弹出日期框。

要是弹出的日期框确实是没有填值元素对应的日期框倒无所谓了,每次弹出的日期框都是表单元素中第一个日期型INPUT的,即便是这个INPUT已经符合验证标准(有值且符合规则)了,见下图:

bug图示

主要原因很简单:My97DatePicker的日期框不管你页面上使用了多少绑定WdatePicker函数的输入框,日期框其实只有一个,而且一旦页面生成了这个日期框(可能是隐藏状态),就不会销毁掉,而且onfocus的时候也会触发它的显示。

而1.2.5的easyui form验证功能恰恰是把表单的每个元素都先获得焦点再失去焦点,这样一来肯定会触发My97DatePicker日期框的显示,看easyui form validate接口的源码:

function _347(_34b){
    if ($.fn.validatebox) {
        var box = $(".validatebox-text", _34b);
        if (box.length) {
            box.validatebox("validate");
            box.trigger("focus");
            box.trigger("blur");
            var _34c = $(".validatebox-invalid:first", _34b).focus();
            return _34c.length == 0;
        }
    }
    return true;
};

box是表单中样式包含validatebox-text的jQuery对象,box.trigger("focus");先获得焦点,box.trigger("blur");再失去焦点,主要就是为了触发输入框绑定的onfocus事件。

而在onfocus事件内部,将每隔200毫秒调用一次校验,整个form进行校验的时候,每个输入框校验一次就足够了,这跟用户自己将焦点放入input不一样,用户自己将焦点放入input,onfocus只能触发一次,所以在onfocus内部就要实现定时校验(起到用户输入值改变时监听的效果)。

根据上面的分析,box.trigger("focus");在验证整个form的时候完全可以去掉,去掉这行代码就可以解决问题,该方案只有validate接口使用,不对其它接口造成影响,修改应该是安全的。有趣的是1.2.4版本的easyui中本来就没有这行代码,后面版本才加进去的。

目前有 4 条留言 其中:访客:2 条, 博主:1 条 引用: 1

  1. 深海中的影子 : 2012年08月16日19:52:18  -49楼 @回复 回复

    你好,关于这个修改的问题,不知道具体改那个地方的代码?我用的是easyui1.3的,能给一份这个版本的修改版吗?


  2. 管理员
    世纪之光 : 2012年08月17日14:42:59  -48楼 @回复 回复

    @深海中的影子
    1.3版本中你搜索“_39f(_3a3)”关键字就行了,_39f(_3a3)这个函数其实就是本文写出1.2.5版本的_347(_34b)函数,只不过每次压缩javascript的时候,这些内部函数都是随机压缩命名。
    顺便补一句,如果你想更清楚原理的话,建议你看看浅谈validatebox组件校验的实现方案这篇文章。

    • haiyang8355 : 2014年03月15日04:14:59  地下1层 @回复 回复

      其实不用 onfocus 事件,用 onclick 事件触 mydate97 就好了

给我留言

留言无头像?


×