EasyUi DataGrid批量删除

Posted 2020-09-26 wzzkaifa

       DataGrid是我们做网页经常使用到的组件之中的一个，对它的操作也无非是增删改查操作。单条数据的增删改相对来说比較简单。添加、改动能够直接在DataGrid中进行，也能够用弹出框的形式把数据装载在文本框等各种控件中呈现给用户，让用户自己主动填写或改动。删除的事稍后再说。个人觉得“查”是最难的。由于它涉及到了表格的各种载入问题等等。假设你觉得这是危言耸听。那就我的期待兴许博客吧！

       不知道上边在说什么的能够忽略不计。接下来进行正文部分。这次的DataGrid分三部分来写：批量删除、批量改动。动态载入列。

本文先以最简单的删除操作来开刀，事实上删除操作的重点（不是难点，搞不清楚为什么非常多人非把这两个相提并论）就在传递字符串or传递拼接字符串（≈数组小功能），这两个一个是单条数据的删除。一个就是批量删除了。

一、先来看下效果图

       1.选中两项后。点击删除。呈现例如以下效果

       2.点击确定后。这两条数据将被删除

       本来打算让大家看下数据库的，没想到把数据库的截图贴到这儿来……太影响眼睛的审美了，也没什么必要，所以凭借你的高智商水准，用上边两幅图全然能够说明效果了

二、代码实现

       在项目中。client我们用的是MVC框架，当中仅仅用到了视图和控制器。然后通过控制器把数据传递给服务端。

       1.在html页面中主要就是设置几个DataGrid的属性，这些不用我多说。大家查看帮助文档就OK了。

当数据载入到表格中，选择了要删除的数据后，我们仅仅须要在js中获取这些选中行。然后把标识这些数据行的字符串传递给Controller，代码例如以下：

//删除评分项操作
function DeleteJudgeItem() {
    //获取选中行的数据,返回的是数组
    //获取选中行的数据
    var selectRows = $("#dg").datagrid("getSelections");

    //假设没有选中行的话，提示信息
    if (selectRows.length < 1) {
        $.messager.alert("提示消息", "请选择要删除的记录。", ‘info‘);
        return;
    }

    //假设选中行了，则要进行推断
    $.messager.confirm("确认消息", "确定要删除所选记录吗？", function (isDelete) {

        //假设为真的话
        if (isDelete) {
            //定义变量值
            var strIds = "";
            //拼接字符串，这里也能够使用数组，作用一样
            for (var i = 0; i < selectRows.length; i++) {
                strIds += selectRows[i].JudgeId + ",";
            }
            //循环分割
            strIds = strIds.substr(0, strIds.length - 1);
            $.post(‘/JudgeItem/DeleteJudgeItem?
id=‘ + strIds, function (jsonObj) {
                if (jsonObj > 0) {
                    $.messager.alert(‘提示‘, ‘删除成功！‘);
                    $("#dg").datagrid("reload"); //删除成功后 刷新页面
                } else {

                    $.messager.alert(‘提示信息‘, ‘删除失败，请联系管理员。‘, ‘warning‘);
                }
            }, "JSON");
        }
    });
}

       2.在Controller中接收View传过来的信息，然后对这个信息进行解析。变成我们须要的数据，最后调用服务端方法对数据库进行改动

    #region 删除评分项 + DeleteJudgeItem() + 王静娜 2015-5-30 18:01:02
    public int DeleteJudgeItem()
    {
        try
        {
            //获得要删除的评分项JudgeId
            string delJudgeId = Request.QueryString["id"];
            //通过分割的方式。把要删除的评分项编号取出
            string[] judgeId = delJudgeId.Split(‘,‘);
            //循环调用后台方法删除
            for (int i = 0; i < judgeId.Length; i++)
            {
                //创建新的评分项
                Guid JudgeId = new Guid(judgeId[i]);
                judgeItemService.DeleteJudgeItem(JudgeId);
            }
            return 1;
        }
        catch (Exception)
        {
            throw new Exception("删除失败，请联系管理员。");
        }
    } 
    #endregion

        以上就是批量删除的内容了，当中用到的js、jQuery、ajax是学习网页设计不可缺少的东西，再者就是要学会看文档。文档相当于一部字典，遇到想做而不会做的时候多番几遍大有裨益