现在的位置: 首页 > easyui > Menu > contextMenu > 正文
menu组件disableItem方法无效之完善篇
2012年06月06日 contextMenu ⁄ 共 6964字 评论数 3 ⁄ 被围观 15,650 views+
文章目录
[隐藏]

在之前的一篇文章中我提到过menu的disableItem方法并无法阻止对绑定事件的调用,当时的解决方案基于良好的事件绑定方式,也就是事件全部用jQuery绑定。现实总是残酷的,大部分的代码仍然习惯使用onclick方式绑定事件,这样兼容javascript原生的onclick绑定事件的方式就显得很有必要。

前一篇文章中使用的方式是修改源码,这里为了最大限度保持源码的纯洁度,采用直接覆写menu的disableItem和enableItem方法了,在引入easyui核心库后,做以下覆盖定义即可:

实现代码:

  1. /**
  2.  * menu方法扩展
  3.  * @param {Object} jq
  4.  * @param {Object} region
  5.  */
  6. $.extend($.fn.menu.methods, {
  7.         /**
  8.          * 激活选项(覆盖重写)
  9.          * @param {Object} jq
  10.          * @param {Object} itemEl
  11.          */
  12.         enableItem: function(jq, itemEl){
  13.             return jq.each(function(){
  14.                 var t = $(itemEl);
  15.                 var state = t.data('menu.item');
  16.                 if (!state) {
  17.                     t.data('menu.item', {
  18.                         options: {}
  19.                     });
  20.                 }
  21.                 state = t.data('menu.item');
  22.                 if(state.onclickStr){
  23.                     var newclick = new Function(state.onclickStr);
  24.                     t.bind('click',newclick);
  25.                 }else{
  26.                     if (state.onclick) {
  27.                         t.bind('click', state.onclick);
  28.                         state.onclick = null;
  29.                     }
  30.                 }
  31.                 t.removeClass('menu-item-disabled');
  32.             });
  33.         },
  34.         /**
  35.          * 禁用选项(覆盖重写)
  36.          * @param {Object} jq
  37.          * @param {Object} itemEl
  38.          */
  39.         disableItem: function(jq, itemEl){
  40.             return jq.each(function(){
  41.                 var t = $(itemEl);
  42.                 var state = t.data('menu.item');
  43.                 if (!state) {
  44.                     t.data('menu.item', {
  45.                         options: {}
  46.                     });
  47.                 }
  48.                 state = t.data('menu.item');
  49.                 var onclickStr = t.attr("onclick");
  50.                 if(onclickStr && onclickStr != ""){
  51.                     state.onclickStr = onclickStr;
  52.                     t.attr("onclick","");
  53.                 }else{
  54.                     t.addClass('menu-item-disabled');
  55.                     if (t.data("events")["click"]) {
  56.                         var eventData = t.data("events")["click"];
  57.                         for (var i = 0; i < eventData.length; i++) {
  58.                             if (eventData[i].namespace != "menu") {
  59.                                 state.onclick = eventData[i]["handler"];
  60.                                 t.unbind('click', eventData[i]["handler"]);
  61.                             }
  62.                         }
  63.                     }
  64.                 }
  65.                 t.addClass('menu-item-disabled');
  66.             });
  67.         }}
  68. );

效果演示:

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

更新日志:

2012-12-19:

因为jQuery1.8.0版本开始调整$.data函数功能,故代码要稍作变成改动后的代码如下:

  1. /**
  2.  * menu方法扩展
  3.  * @param {Object} jq
  4.  * @param {Object} itemEl
  5.  */
  6. $.extend($.fn.menu.methods, {
  7.     /**
  8.      * 激活选项(覆盖重写)
  9.      * @param {Object} jq
  10.      * @param {Object} itemEl
  11.      */
  12.     enableItem : function(jq, itemEl) {
  13.         return jq.each(function(){
  14.             var jqElements = $(itemEl);
  15.             var state = $.data(this, 'menu');
  16.             if (jqElements.length > 0) {
  17.                 jqElements.each(function(){
  18.                     if ($(this).hasClass('menu-item-disabled')) {
  19.                         for(var i=0; i<state._eventsStore.length; i++){
  20.                             var itemData = state._eventsStore[i];
  21.                             if(itemData.target == this){
  22.                                 //恢复超链接
  23.                                 if (itemData.href) {
  24.                                     $(this).attr("href", itemData.href);
  25.                                 }
  26.                                 //回复点击事件
  27.                                 if (itemData.onclicks) {
  28.                                     for (var j = 0; j < itemData.onclicks.length; j++) {
  29.                                         $(this).bind('click', itemData.onclicks[j]);
  30.                                     }
  31.                                 }
  32.                                 //设置target为null,清空存储的事件处理程序
  33.                                 itemData.target = null;
  34.                                 itemData.onclicks = [];
  35.                                 $(this).removeClass('menu-item-disabled');
  36.                             }
  37.                         }
  38.                     }
  39.                 });
  40.             }
  41.         });
  42.     },
  43.     /**
  44.      * 禁用选项(覆盖重写)
  45.      * @param {Object} jq
  46.      * @param {Object} itemEl
  47.      */
  48.     disableItem : function(jq, itemEl) {
  49.         return jq.each(function() {
  50.             var jqElements = $(itemEl);
  51.             var state = $.data(this,'menu');
  52.             if (jqElements.length > 0) {
  53.                 if (!state._eventsStore)
  54.                     state._eventsStore = [];
  55.                 jqElements.each(function(){
  56.                     if (!$(this).hasClass('menu-item-disabled')) {
  57.                         var backStore = {};
  58.                         backStore.target = this;
  59.                         backStore.onclicks = [];
  60.                         //处理超链接
  61.                         var strHref = $(this).attr("href");
  62.                         if (strHref) {
  63.                             backStore.href = strHref;
  64.                             $(this).attr("href""javascript:void(0)");
  65.                         }
  66.                         //处理直接耦合绑定到onclick属性上的事件
  67.                         var onclickStr = $(this).attr("onclick");
  68.                         if (onclickStr && onclickStr != "") {
  69.                             backStore.onclicks[backStore.onclicks.length] = new Function(onclickStr);
  70.                             $(this).attr("onclick""");
  71.                         }
  72.                         //处理使用jquery绑定的事件
  73.                         var eventDatas = $(this).data("events") || $._data(this, 'events');
  74.                         if (eventDatas["click"]) {
  75.                             var eventData = eventDatas["click"];
  76.                             for (var i = 0; i < eventData.length; i++) {
  77.                                 if (eventData[i].namespace != "menu") {
  78.                                     backStore.onclicks[backStore.onclicks.length] = eventData[i]["handler"];
  79.                                     $(this).unbind('click', eventData[i]["handler"]);
  80.                                     i--;
  81.                                 }
  82.                             }
  83.                         }
  84.                         //遍历_eventsStore数组,如果有target为null的元素,则利用起来
  85.                         var isStored = false;
  86.                         for(var j=0; j<state._eventsStore.length; j++){
  87.                             var itemData = state._eventsStore[j];
  88.                             if(itemData.target==null){
  89.                                 isStored = true;
  90.                                 state._eventsStore[j] = backStore;
  91.                             }
  92.                         }
  93.                         //没有现成的,则push进去
  94.                         if(isStored==false){
  95.                             state._eventsStore[state._eventsStore.length] = backStore;
  96.                         }
  97.                         $(this).addClass('menu-item-disabled');
  98.                     }
  99.                 });
  100.             }
  101.         });
  102.     }
  103. });

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

  1. : 2015年03月03日16:08:47  -49楼 @回复 回复

    itemEl指的是item.target!!

    var menu = $(“#sub_menu_div”);

    var create_order_item = menu.menu(“findItem”,”创建服务”);
    var stop_order_item = menu.menu(“findItem”,”结束服务”);

    menu.menu(“enableItem”,create_order_item);
    menu.menu(“enableItem”,stop_order_item);
    if(parentRow.isStart!=”service_in”){
    //menu.enableItem()
    menu.menu(“disableItem”,create_order_item.target);
    menu.menu(“disableItem”,stop_order_item.target);
    }
    测试可以使用

给我留言

留言无头像?


×