Easyui笔记2：实现datagrid多行删除的示例代码

下面是关于“Easyui笔记2：实现datagrid多行删除的示例代码”的完整攻略：

一、背景介绍

在 EasyUI 的 Datagrid 中，如果需要删除多行数据，通常需要勾选多个行，并在点击删除按钮时进行批量删除。下面将介绍如何通过示例代码实现这一功能。

二、实现步骤

1.首先，在网页头部引入 EasyUI 的相关文件：

<link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
<script type="text/javascript" src="../easyui/jquery.min.js"></script>
<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>

2.然后，我们需要在页面中添加一个 Datagrid，用来展示具体的数据，并添加一个按钮来触发多行删除操作。示例代码如下：

<table id="dg" class="easyui-datagrid" style="height:400px" pagination="true"
    toolbar="#toolbar" url="datagrid_data.json" rownumbers="true" fitColumns="true" singleSelect="false">
    <thead>
        <tr>
            <th field="itemid" width="50" checkbox="true"></th>
            <th field="productid" width="80">Product ID</th>
            <th field="productname" width="100">Product Name</th>
            <th field="listprice" width="80" align="right">List Price</th>
            <th field="unitcost" width="80" align="right">Unit Cost</th>
            <th field="attr1" width="150">Attribute</th>
        </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteRows()">Delete</a>
</div>

通过以上代码，我们创建了一个 Datagrid，并在该 Datagrid 中添加了复选框，同时通过 singleSelect="false" 的方式来允许用户可以选中多行数据。

此外，在 Datagrid 的 <thead> 中定义了表格的列名，并在 toolbar 中添加了一个“删除”按钮，该按钮的跳转链接是“#”，并通过 onclick 事件来触发 JavaScript 函数 deleteRows()。

3.接下来，我们需要完成 deleteRows() 函数的实现。在该函数中，通过获取 Datagrid 中已被选中的行来进行批量删除操作。示例代码如下：

function deleteRows() {
    var rows = $('#dg').datagrid('getSelections');
    if (rows.length == 0) {
        $.messager.alert('Hint', 'Please select at least one row to delete!', 'info');
        return;
    }
    $.messager.confirm('Confirm', 'Are you sure you want to delete these records?', function (r) {
        if (r) {
            for (var i = 0; i < rows.length; i++) {
                var index = $('#dg').datagrid('getRowIndex', rows[i]);
                $('#dg').datagrid('deleteRow', index);
            }
            $.messager.show({
                title: 'Success',
                msg: 'Deleted successfully!',
                timeout: 3000,
                showType: 'slide'
            });
        }
    });
}

首先，我们通过 $('#dg').datagrid('getSelections') 来获取 Datagrid 中所有被选中的行，然后判断用户是否已经选中了至少一行数据。如果没有选中任何行，便通过 $.messager.alert 来向用户提示信息，并结束函数的执行。

如果用户至少选中了一行数据，我们便会弹出一个确认对话框，来询问用户是否确认删除这些选中的行。在用户确认后，我们便会通过 $('#dg').datagrid('deleteRow', index) 来将选中的行从 Datagrid 中删除掉。

最后，我们将会通过 $.messager.show 显示一个成功删除的提示框。

三、示例说明

示例一：演示单击按钮并删除多行的功能

添加以上示例代码到一个 html 文件中后，浏览器打开该文件，便可以看到一个带有复选框和删除按钮的表格。我们可以通过选中一列或多列数据并单击删除按钮来删除数据，并且会提示删除成功的信息。

示例二：使用实际数据进行测试

在实际项目中，我们可以从数据库中获取具体数据，并通过服务端返回 JSON 格式的数据进行填充表格。我们可以将示例代码中的 url 值改为访问服务端的 URL，以此来加载真实数据进行测试。