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

实现右键菜单变灰不可用效果需要用到EasyUI的上下文菜单组件(menu组件)，并且需要使用jQuery来操作菜单。

以下是具体步骤：

步骤1：在HTML文件中引入jQuery和EasyUI的CSS和JS文件。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.19/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.19/themes/icon.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.19/jquery.easyui.min.js"></script>

步骤2：在HTML文件中定义右键菜单。

<div id="mm" class="easyui-menu">
    <div data-id="copy">复制</div>
    <div data-id="paste">粘贴</div>
    <div data-id="delete">删除</div>
</div>

步骤3：在JS文件中使用menu组件创建右键菜单，并且为菜单项绑定click事件。

// 1. 创建右键菜单
$('#datagrid').menu({
    onClick:function(item) {
        // 处理点击事件
    },
    onShow:function() {
        // 处理菜单显示前的事件
        // 将不符合要求的菜单项变灰不可用
        var rows = $('#datagrid').datagrid('getSelections');
        if (rows.length > 1) {
            $('#mm [data-id="copy"]').linkbutton('disable');
        } else {
            $('#mm [data-id="copy"]').linkbutton('enable');
        }
        if (rows.length <= 0) {
            $('#mm [data-id="copy"],#mm [data-id="delete"]').linkbutton('disable');
        } else {
            $('#mm [data-id="delete"]').linkbutton('enable');
        }
    }
});

在上面的代码中，我们通过menu组件的onShow事件获取当前选择的行，然后判断选中行的个数，若选中多个行，则将复制菜单项变灰不可用；若一个都没选中，则将复制和删除菜单项变灰不可用。

步骤4：在click事件中处理菜单点击事件。

// 2. 处理点击事件
if (item.dataId == 'copy') {
    // 复制内容
} else if (item.dataId == 'paste') {
    // 粘贴内容
} else if (item.dataId == 'delete') {
    // 删除内容
}

在上面的代码中，我们首先获取菜单项的data-id属性，然后根据不同的属性值处理相应的逻辑代码。

示例1：给EasyUI的DataGrid设置右键菜单

// 1. 创建DataGrid
$('#datagrid').datagrid({
    url: 'data.json',
    columns: [[
        {field:'id',title:'ID',width:100},
        {field:'name',title:'Name',width:100},
        {field:'price',title:'Price',width:100}
    ]],
    striped: true,
    singleSelect: false,
    fitColumns: true,
    rownumbers: true,
    pagination: true,
    pageSize: 10,
    pageList: [10,20,50],
    toolbar: [{
        text:'添加',
        iconCls:'icon-add',
        handler:function(){
            // 添加数据
        }
    },'-',{
        text:'删除',
        iconCls:'icon-remove',
        handler:function(){
            // 删除数据
        }
    }]
});

// 2. 创建右键菜单
$('#datagrid').datagrid('options').onRowContextMenu = function(e, rowIndex, rowData) {
    e.preventDefault();

    $('#mm').menu('show', {
        left: e.pageX,
        top: e.pageY
    });

    $('#datagrid').datagrid('selectRow', rowIndex);
} 

在上面的代码中，我们创建了一个DataGrid，并向其添加了一个添加按钮和一个删除按钮。我们还使用onRowContextMenu事件在DataGrid的行上创建了一个右键菜单，并且在菜单显示前，我们通过onShow事件处理了每个菜单项的灰不可用状态。

示例2：给EasyUI的TreeGrid设置右键菜单

$('#treegrid').treegrid({
    url: 'data.json',
    idField:'id',
    treeField:'name',
    fitColumns: true,
    rownumbers: true,
    striped: true,
    singleSelect: false,
    pagination: true,
    pageSize: 10,
    pageList: [10,20,50],
    toolbar: [{
        text:'添加',
        iconCls:'icon-add',
        handler:function(){
            // 添加数据
        }
    },'-',{
        text:'删除',
        iconCls:'icon-remove',
        handler:function(){
            // 删除数据
        }
    }]
});

$('#treegrid').datagrid('options').onRowContextMenu = function(e, rowIndex, rowData) {
    e.preventDefault();

    $('#mm').menu('show', {
        left: e.pageX,
        top: e.pageY
    });

    $('#treegrid').treegrid('select', rowData.id);
} 

在上面的代码中，我们创建了一个TreeGrid，并向其添加了一个添加按钮和一个删除按钮。我们还使用onRowContextMenu事件在TreeGrid的行上创建了一个右键菜单，并且在菜单显示前，我们通过onShow事件处理了每个菜单项的灰不可用状态。注意，在处理onRowContextMenu事件时，我们使用了treegrid的select方法来选中当前展开的行。