jquery Easyui Datagrid实现批量操作（编辑，删除，添加）

jquery Easyui Datagrid实现批量操作攻略

简介

jquery Easyui Datagrid是一款开源的JavaScript插件，可用于创建数据表格、树形结构等。其中，datagrid组件提供了丰富的特性，如：分页、排序、过滤、编辑、添加、删除等操作。

本文将详细介绍jquery Easyui Datagrid如何实现批量操作。在实现批量操作的过程中，我们将包含以下3种操作：编辑、删除、添加。

编辑操作

Easyui Datagrid的编辑模式支持单行编辑和批量编辑两种模式。在批量编辑模式中，您可以同时编辑多行数据，达到批量编辑的效果。

示例

以下代码展示了如何使用Easyui Datagrid实现批量编辑功能。

//HTML代码
<table id="dg" class="easyui-datagrid" style="width:100%;height:100%"
        title="批量编辑" 
        url="data/data-list.json" 
        toolbar="#toolbar" 
        rownumbers="true" 
        pagination="true"
        singleSelect="false"
        idField="id"
        >
    <thead>
        <tr>
            <th data-options="field:'ck',checkbox:true"></th>
            <th field="name" width="100" editor="{type:'text'}">姓名</th>
            <th field="age" width="100" editor="{type:'numberbox',options:{precision:0}}">年龄</th>
            <th field="email" width="200" editor="{type:'validatebox',options:{required:true}}">邮件地址</th>
            <th field="phone" width="150" editor="{type:'text'}">电话号码</th>
        </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="edit()">编辑</a>
</div>

//JS代码
//编辑按钮点击事件
function edit(){
    var rows = $("#dg").datagrid('getSelections');
    if(rows.length == 0){
        $.messager.alert('提示','请选择要编辑的数据！','info');
        return;
    }
    //进入批量编辑模式
    $("#dg").datagrid('beginEdit', rows[0].id);
    for (var i = 1; i < rows.length; i++){
        $("#dg").datagrid('beginEdit', rows[i].id);
    }
}

在上面的代码中，我们定义了一个Easyui Datagrid表格，并为其提供了数据源、表格头信息、列编辑器等配置。并且定义了一个“编辑”按钮。当用户点击该按钮时，我们需要获取表格中被选中的行，然后依次进入批量编辑模式。

通过以上代码，我们已经实现了Easyui Datagrid的批量编辑功能。

删除操作

Easyui Datagrid封装了一个deleteRow方法，可以方便地删除表格中的数据行。配合toolbar工具栏和按钮，实现批量删除功能非常简单。

示例

以下代码展示了如何使用Easyui Datagrid实现批量删除功能。

//HTML代码
<table id="dg" class="easyui-datagrid" style="width:100%;height:100%"
        title="批量删除" 
        url="data/data-list.json" 
        toolbar="#toolbar" 
        rownumbers="true" 
        pagination="true"
        singleSelect="false"
        idField="id">
    <thead>
        <tr>
            <th data-options="field:'ck',checkbox:true"></th>
            <th field="name" width="100">姓名</th>
            <th field="age" width="100">年龄</th>
            <th field="email" width="200">邮件地址</th>
            <th field="phone" width="150">电话号码</th>
        </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="del()">删除</a>
</div>

//JS代码
//删除按钮点击事件
function del(){
    var rows = $("#dg").datagrid('getSelections');
    if(rows.length == 0){
        $.messager.alert('提示','请选择要删除的数据！','info');
        return;
    }
    $.messager.confirm('提示','确认删除选中的数据？',function(r){
        if(r){
            for (var i = 0; i < rows.length; i++){
                var index = $("#dg").datagrid('getRowIndex', rows[i]);
                $("#dg").datagrid('deleteRow', index);
            }
        }
    });
}

在上面的代码中，我们定义了一个Easyui Datagrid表格，为其提供了数据源、表格头信息、列选项等配置。并且定义了一个“删除”按钮。当用户点击该按钮时，我们需要获取表格中被选中的行，然后依次执行删除操作。

通过以上代码，我们已经实现了Easyui Datagrid的批量删除功能。

添加操作

Easyui Datagrid提供了一个对话框插件dialog，可以用来展示表单、确认框等。我们可以借助dialog插件，在对话框中添加表单，在用户提交表单后，使用DataGrid的appendRow方法将新数据添加到表格中。

示例

以下代码展示了如何使用Easyui Datagrid实现批量添加功能。

//HTML代码
<table id="dg" class="easyui-datagrid" style="width:100%;height:100%"
        title="批量删除" 
        url="data/data-list.json" 
        toolbar="#toolbar" 
        rownumbers="true" 
        pagination="true"
        idField="id">
    <thead>
        <tr>
            <th data-options="field:'ck',checkbox:true"></th>
            <th field="name" width="100">姓名</th>
            <th field="age" width="100">年龄</th>
            <th field="email" width="200">邮件地址</th>
            <th field="phone" width="150">电话号码</th>
        </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="add()">添加</a>
</div>

//JS代码
//添加按钮点击事件
function add(){
    $("#dlg").dialog('open').dialog('setTitle','添加数据');
    $("#fm").form('clear');
}
//保存按钮点击事件
function saveData(){
    $("#fm").form('submit',{
        url: 'data/data-add.php',
        onSubmit: function(){
            return $(this).form('validate');
        },
        success: function(result){
            var data = JSON.parse(result);
            $("#dg").datagrid('appendRow',data);
            $("#dlg").dialog('close');
        }
    });
}

在上面的代码中，我们定义了一个Easyui Datagrid表格，并为其提供了数据源、表格头信息、列选项等配置。并且定义了一个“添加”按钮。在用户点击该按钮时，我们需要展示一个添加数据的对话框，并在用户提交表单后，将新数据使用DataGrid的appendRow方法添加到表格中。

通过以上代码，我们已经实现了Easyui Datagrid的批量添加功能。

总结

通过以上3个示例，我们已经掌握了Easyui Datagrid的批量操作实现方法。在实际开发中，我们可以根据具体的需求，选择合适的操作方式，轻松完成数据管理任务。