现在的位置: 首页 > easyui > Menu > contextMenu > 正文
easyui菜单disableItem无效的解决方法
2012年02月08日 contextMenu ⁄ 共 2425字 评论数 2 ⁄ 被围观 9,222 views+
文章目录
[隐藏]

Bug描述:

在jQuery easyui 1.2.5版本中menu组件提供了disableItem和enableItem方法,用于设置菜单按钮中某个item是否可用,入参是某个item的selector。遗憾的是这两个方法基本都用不起来,分析了一下代码,这两个接口的实现写的真是太粗糙太糟糕了:

  1. /**
  2.  * 
  3.  * @param {Object} _2d6 jQuery对象
  4.  * @param {Object} _2d7 字符串 item的选择器描述
  5.  * @param {Object} _2d8 布尔型 用于设置是设为可用还是设为不可用
  6.  */
  7. function _2d5(_2d6, _2d7, _2d8){
  8.     var t = $(_2d7);
  9.     if (_2d8) {
  10.         t.addClass("menu-item-disabled");
  11.         //常态下_2d7咋的可能有onclick属性
  12.         if (_2d7.onclick) {
  13.             _2d7.onclick1 = _2d7.onclick;
  14.             _2d7.onclick = null;
  15.         }
  16.     }
  17.     else {
  18.         t.removeClass("menu-item-disabled");
  19.         //企图用_2d7的onclick1属性备份item的事件函数?显然不能达到目的。
  20.         if (_2d7.onclick1) {
  21.             _2d7.onclick = _2d7.onclick1;
  22.             _2d7.onclick1 = null;
  23.         }
  24.     }
  25. };

解决方案:

很多人可能会想,jQuery里面不就可以通过attr函数设置元素的disabled属性吗?可惜在w3c的标准中,只有button,select等Form元素才有这个属性,其它元素其实是没有的,即使你设置了其它元素的disabled属性为true,你也无法阻止点击他们时他们的响应事件。而easyui的menu显然不是通过button实现的,所以这招不是很有效果。

对于Dom元素上的事情绑定,又分为两种情况:

  1. javascript自身的onclick属性绑定js语句或者函数
  2. 使用jQuery里面的事件绑定机制将event绑定到Dom上

如果easyui menu 的disableItem和enableItem接口同时要处理这两种情况,那就较为复杂了,对于第一种情况,有同学可能想到利用jQuery的attr函数动态设置Dom元素的onclick属性值,但是不争气的是IE的处理机制跟别的浏览器不太一样,即便是设置了Dom元素的onclick属性值,也得不到相应调用。

个人觉得,既然使用了jQuery框架就应该让代码更符合jQuery的规范,在事件处理机制上,jQuery应该是优于原生机制的,onclick方式绑定事件耦合度较高,不够灵活,在使用了jQuery的前提下就不提倡使用了,如果抛开onclick方式绑定事件,实现disableItem和enableItem就较为简单了:

  1. 将原先绑定的用户事件备份到Dom元素中,用于enableItem的时候恢复。
  2. disable的时候解除命名空间不为 'menu'的click事件的绑定,不能全部解除
  3. enableItem的时候重新将备份的事件绑定到Dom上就可以了。

代码简述:

  1. function setDisabled(target, itemEl, disabled){
  2.     var t = $(itemEl);
  3.     var state = t.data('menu.item');
  4.     if (!state) {
  5.         t.data('menu.item', {
  6.             options: {}
  7.         });
  8.     }
  9.     state = t.data('menu.item');
  10.     if (disabled) {
  11.         t.addClass('menu-item-disabled');
  12.         if (t.data("events")["click"]) {
  13.             var eventData = t.data("events")["click"];
  14.             for (var i = 0; i < eventData.length; i++) {
  15.                 if (eventData[i].namespace != "menu") {
  16.                     state.onclick = eventData[i]["handler"];
  17.                     t.unbind('click', eventData[i]["handler"]);
  18.                 }
  19.             }
  20.         }
  21.     }
  22.     else {
  23.         t.removeClass('menu-item-disabled');
  24.         if (state.onclick) {
  25.             t.bind('click', state.onclick);
  26.             state.onclick = null;
  27.         }
  28.     }
  29. };

效果演示:

http://www.easyui.info/easyui/demo/menu/menu_bug_1.html

更新日志:

2012-06-05更新:

增加对原生javascript使用onclick方式绑定事件的支持,详细内容参见《menu组件disableItem方法无效之完善篇》

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

  1. 白小白 : 2014年07月22日17:18:30  -49楼 @回复 回复

    大神,谢谢了!有帮助。

给我留言

留言无头像?


×