【EasyUi DataGrid】批量修改提交

最新推荐文章于 2016-08-31 16:17:39 发布

原创最新推荐文章于 2016-08-31 16:17:39 发布 · 7.9k 阅读

6 ·

CC 4.0 BY-SA版权

【Web开发】专栏收录该内容

44 篇文章

订阅专栏

本文介绍如何使用EasyUI DataGrid实现批量修改功能，包括设置可编辑列、触发保存事件及前后端交互流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在实际操作中，批量修改的例子有很多，最常用的一种便是“假批量修改”，即修改一行后，当点击其它行时就把这行修改后的数据提交，拥有保存功能的“保存”按钮，说到底就是为我们修改的最后一行准备的（例如：Navicat对数据库表的操作），这样的用户体验度不错，因为感觉上像是点击了保存按钮才让它们都提交似的，同时也避免了因为刷新网页断网等等意外引起的数据丢失。这样的做法等同于把要修改的一行重新装载到一个弹出页面上，让用户修改后再保存，这样的做法稍笨拙但是用户用着特安心。

一、概述：

在本文中要写的是“真批量修改”（这昵称起得不太好，想好了再改），它指的是把DataGrid中进行了修改的数据，一次性提交到后台，从而达到从开始到结束，用户不下达保存命令，它就很死板的不保存一样，不管它的效果怎样咱们抱着学习的诚恳态度先来实现吧。在上篇博客中大家也看到了，咱项目的前台页面用的是EasyUi样式，那么在EasyUi的DataGrid中，批量修改的思路是什么呢？

1.把列定义为可编辑的，可编辑的类型包括以下几种：

text，textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree

2.在DataGrid的事件上定义方法，在方法中开启编辑属性。

3.触发保存事件，将修改后的数据提交给后台。

二、效果展示：

1.未编辑修改前

2.修改三行后，点击“保存”按钮

三、代码实现

1.在Html页面中定义一个DataGrid，把列的表头先定义好。再定义几个需要用到的按钮，按钮也可以封装起来以备复用。

<div id="ContentAreas" style="margin-top: 20px; margin-left: 50px; width: 900px;">
    @* 按钮 *@
    <div id="btnAreas" style="margin-bottom: 5px; margin-top: 10px; top: ">
        <div id="tb" style="height: auto">
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="save()">保存</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">撤销</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">获取修改行</a>
        </div>
    </div>
    <table id="dg" class="easyui-datagrid" title="报价得分" style="width: 905px; height: auto" data-options="
                        iconCls: 'icon-edit',
                        singleSelect: true, 
                        toolbar: '#tb',
                        url: '/QuoteManager/LoadPages',
                        method: 'get',
                        onClickRow: onClickRow">
        <thead>
            <tr>
                <th data-options="field:'BidRecorderId',width:160" hidden="hidden">评标编号</th>
                <th data-options="field:'CompanyName',width:300,align:'center'" >投标商</th>
                <th data-options="field:'Quote',width:300,align:'center',editor:'numberbox'">报价</th>
                <th data-options="field:'QuoteScore',width:300,align:'center',editor:{type:'numberbox',options:{precision:1}}">报价得分</th>
            </tr>
        </thead>
    </table>
</div>

2.js中就要利用DataGrid的方法和属性，把页面上所作的修改，序列化成Json串传给Controller。

var editIndex = undefined;

//结束编辑
function endEditing() {
    if (editIndex == undefined) { return true }
    //校验指定的行，如果有效返回true
    if ($('#dg').datagrid('validateRow', editIndex)) {
        $('#dg').datagrid('endEdit', editIndex); //结束编辑
        editIndex = undefined;
        return true;
    } else {
        return false;
    }
}

//单击事件
function onClickRow(index) {
    if (editIndex != index) {
        if (endEditing()) {
            $('#dg').datagrid('selectRow', index)
                    .datagrid('beginEdit', index); //开始启用编辑
            editIndex = index; //将正在编辑的行号赋值给变量
        } else {
            $('#dg').datagrid('selectRow', editIndex);
        }
        //JSON.stringify(inserted);
    }
}

//保存按钮,多条数据一起提交
function save() {
    if (endEditing()) {

        //获取更新更改的行的集合
        row = $("#dg").datagrid('getChanges');

        //DataGrid的更该行为不为0
        if (row.length) {
            $.ajax(
                {
                    type: 'POST',
                    url: "/QuoteManager/UpdateBid",
                    data: { arrayList: JSON.stringify(row), },
                    success: function (data) {
                        if (data != "") {
                            $.messager.alert('提示', '保存成功！');

                            $('#dg').datagrid('reload');    // 重新载入当前页面数据  
                        }
                        else {
                            $.messager.alert('提示信息', '保存失败，请联系管理员！', 'warning');
                        }
                    }
                });
        }
        else  //如果没有修改数据，则提醒用户
        {
            $.messager.alert('提示信息', '您还没有修改信息！', 'warning');
        }
    }
    editIndex = undefined;
}

//撤销按钮
function reject() {
    row = $('#dg').datagrid('rejectChanges');
    editIndex = undefined;
}

//获取修改行数
function getChanges() {
    var rows = $('#dg').datagrid('getChanges');
    alert(rows.length + '行被修改!');
}

上边js中用到的getChanges、rejectChanges、beginEdit等都是DataGrid拥有的方法。

3.Controller中接收Json数据并对其进行反序列化，得到我们想要的数据。

#region UpdateBid()把页面上修改的记录更新到数据库，王静娜 2015年7月12日
public int UpdateBid()
{
    //获取页面上的修改数据集合list
    var list = Request["arrayList"];

    //序列化list，并赋值给ViewModel集合
    JavaScriptSerializer js = new JavaScriptSerializer();

    List<BidViewModel> listBid = js.Deserialize<List<BidViewModel>>(list);

    //更新到数据库，并返回更新结果
    return bidService.UpdateBid(listBid);
} 
#endregion

在做批量删除的时候，刚开始用的是定义一个数组、一组对象的方法。其中这组对象拥有等同于列名Id的属性，然后把我们需要的信息（包括修改的信息）当成属性值，赋给对象，再把对象添加到数组中，从而把这个数组当作ajax的参数传给后台。后来才发现根本不用这么麻烦，直接传递我们获取到的修改的行信息就可以了，这也就是上边js代码的save()函数实现的功能。