Jquery EasyUI Datagrid右键菜单实现方法

在使用 Jquery EasyUI Datagrid 时，我们经常会需要通过右键菜单来实现一些操作，比如删除、编辑等。在本攻略中，我将介绍如何使用 Jquery EasyUI 自带的 contextmenu 插件来实现 Datagrid 的右键菜单功能。

1. 引入必需的文件

在使用 Jquery EasyUI 的 contextmenu 插件之前，我们需要先引入必需的文件。具体来说，需要在 HTML 文件中引入如下几个文件：

<!-- 引入 Jquery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<!-- 引入 Jquery EasyUI -->
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

<!-- 引入 Jquery EasyUI 的 contextmenu 插件 -->
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.contextmenu.js"></script>

2. 添加右键菜单

在引入必需的文件之后，我们需要给 Datagrid 绑定右键菜单。通过调用 contextmenu 方法，可以实现添加右键菜单的功能。具体来说，我们需要给 Datagrid 的 options 属性中添加如下代码：

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

以上代码实现了右键菜单的显示，但我们还需要在 HTML 中添加菜单的内容。可以在 HTML 文件中添加如下代码：

<div id="menu" class="easyui-menu" style="width:120px;">
    <div id="delete">Delete</div>
    <div id="edit">Edit</div>
</div>

以上代码中，通过声明一个 id 为 menu 的 div 元素，然后添加两个子元素（Delete 和 Edit），实现了添加右键菜单的功能。

3. 绑定菜单点击事件

现在，我们已经成功地添加了一个带有 Delete 和 Edit 两个选项的右键菜单。但是，当用户点击菜单选项时，我们还需要进行相应的操作。为此，我们需要对右键菜单的每个选项进行点击事件的绑定。

具体来说，我们需要在初始化右键菜单时，为每个菜单选项绑定一个点击事件。可以通过如下代码实现：

$('#menu').menu({
    onClick: function(item){
        switch(item.id){
            case 'delete':
                // 删除操作
                break;
            case 'edit':
                // 编辑操作
                break;
        }
    }
});

以上代码中，我们首先选择了 id 为 menu 的 div 元素，然后调用了 menu 方法，为其中的每个选项绑定了一个 onClick 事件。这个事件会在用户点击任意选项时触发，我们可以根据 item 的 id 来判断用户选择了哪个选项，然后进行相应的操作。

示例1：删除选中行

以下示例演示了如何在用户选择 Delete 选项时，删除 Datagrid 中所选中的行：

$('#menu').menu({
    onClick: function(item){
        switch(item.id){
            case 'delete':
                // 获取选中的行
                var selectedRows = $('#dg').datagrid('getSelections');
                if(selectedRows.length > 0){
                    // 删除选中行
                    $.messager.confirm('Confirm','Are you sure you want to delete these records?',function(r){
                        if (r){
                            var rows = [];
                            for(var i=0; i<selectedRows.length; i++){
                                rows.push(selectedRows[i].id);
                            }
                            $.ajax({
                                url: 'delete.php',
                                type: 'POST',
                                data: {
                                    ids: rows.join(',')
                                },
                                success: function(){
                                    $('#dg').datagrid('reload');
                                }
                            });
                        }
                    });
                }
                break;
        }
    }
});

在以上代码中，我们首先调用了 datagrid 方法的 getSelections 函数，获取了 Datagrid 中当前所选中的行。如果当前没有选中行，则不做任何操作；否则，我们会弹出一个确认框，询问用户是否确定要删除所选中的行。如果用户确认删除，则会发送一个 ajax 请求到 delete.php 文件，删除行的数据，并且重新加载数据表格。

示例2：修改选中行

以下示例演示了如何在用户选择 Edit 选项时，修改 Datagrid 中所选中的行：

$('#menu').menu({
    onClick: function(item){
        switch(item.id){
            case 'edit':
                // 获取选中的行
                var selectedRow = $('#dg').datagrid('getSelected');
                if(selectedRow){
                    // 显示编辑对话框
                    $('#dlg').dialog('open').dialog('setTitle','Edit Record');
                    $('#fm').form('load',selectedRow);
                    url = 'update.php?id='+selectedRow.id;
                }
                break;
        }
    }
});

在以上代码中，我们首先调用了 datagrid 方法的 getSelected 函数，获取了 Datagrid 中当前所选中的行。如果当前没有选中行，则不做任何操作；否则，我们会弹出一个编辑对话框，将该行的数据填充到对话框中，并且将 url 变量赋值为 'update.php?id='+selectedRow.id。当用户点击 Save 按钮来保存修改后的数据时，我们会将数据发送到该 url 中，从而完成对数据的更新操作。