jQuery EasyUI实现右键菜单变灰不可用效果

实现右键菜单变灰不可用的效果，需要对jQuery EasyUI组件中的menu、menuitem进行操作。下面是具体的步骤：

1.在EasyUI中定义菜单

首先在HTML文件中定义一个菜单：

<div id="myMenu" style="width: 120px;">
    <div id="menu1">菜单项1</div>
    <div id="menu2" class="menu-sep">-</div>
    <div id="menu3">菜单项2</div>
</div>

2.创建右键菜单

使用jQuery的menu方法，将菜单设置为右键菜单：

$('#myDiv').menu({
    onClick: function(item){
        alert('click item id=' + item.id);
    }
});

这里我们设置了点击菜单项时的回调函数，显示选中的菜单项的id。

3.自定义菜单项样式

将菜单项设置为不可用状态，可以通过设置样式来实现。在CSS样式中，设置菜单项的样式：

.menu-item-disabled {
    color: #999;  /*字体颜色设置为灰色*/
    background: #eee;  /*背景色设置为灰色*/
    cursor: default;  /*鼠标指针设置为默认，表示不可用*/
}

4.设置菜单项的状态

在菜单项的onClick回调函数中，判断菜单项是否可用。如果不可用，则设置样式为menu-item-disabled。

$('#myMenu').menu({
    onClick:function(item){
        if (item.name == 'menu1'){
            if (somecondition){
                $('#menu1').removeClass('menu-item-disabled');
            } else {
                $('#menu1').addClass('menu-item-disabled');
            }
        }
    }
});

在这个例子中，我们判断somecondition是否成立，如果不成立，则设置菜单项menu1为不可用状态。

另一种情况是，在初始化时就把菜单项设置为不可用状态。这种情况下，在页面加载完成后，执行以下代码：

$('#menu1').addClass('menu-item-disabled');

这样，菜单项menu1就会一开始就处于不可用状态。

以上就是实现右键菜单变灰不可用效果的完整攻略，以下是具体示例：

示例1：实现右键菜单根据选中的文件类型变灰

$('#myMenu').menu({
    onClick:function(item){
        var fileType = $(this).data('filetype');
        if (item.name == 'delete'){
            if (fileType == 'dir'){
                $('#delete').addClass('menu-item-disabled');
            }
        }
    }
});

$('#myTable').datagrid({
    onRowContextMenu:function(e,index,row){
        $('#myMenu').menu('show',{
            left:e.pageX,
            top:e.pageY
        }).data('filetype', row.fileType); //增加额外的参数
    }
});

在这个例子中，我们在必要时增加了额外的参数，以传递文件的类型（dir表示目录，file表示文件）。此时，当右键菜单打开时，会根据文件类型决定是否将删除菜单项设置为不可用。

示例2：实现右键菜单根据选中区域是否有选中项变灰

$('#myMenu').menu({
    onClick:function(item){
        if (item.name == 'delete'){
            if ($('#myGrid').datagrid('getSelections').length == 0){
                $('#delete').addClass('menu-item-disabled');
            }
        }
    }
});

$('#myGrid').datagrid({
    onRowContextMenu:function(e,index,row){
        $('#myMenu').menu('show',{
            left:e.pageX,
            top:e.pageY
        });

        //点击后取消所有选择状态
        $('#myGrid').datagrid('clearSelections');
        $('#myGrid').datagrid('selectRow', index);
    },
    onClickRow:function(index,row){
        $('#myGrid').datagrid('clearSelections');
        $('#myGrid').datagrid('selectRow', index);
    }
});

在这个例子中，我们通过getSelections方法获取到当前datagrid中选中的项。在右键菜单打开时，根据是否有选中项将删除菜单项设置为不可用。同时，为了防止选择状态的干扰，我们总是选中当前右键点击的行，并清空当前datagrid中的所有选择状态。