使用EasyUI实现添加和删除功能

    增删该查是任何一个项目都少不了的功能操作，这篇博文主要简介一下如何使用EasyUI实现添加和删除功能。

    

    首先，导入EasyUI的js代码：

    <link href="~/EasyuiSource/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/EasyuiSource/themes/icon.css" rel="stylesheet" />

    <script src="~/EasyuiSource/jquery-1.8.0.min.js"></script>
    <script src="~/DiySource/jquery.unobtrusive-ajax.js"></script>

    <script src="~/EasyuiSource/jquery.easyui.min.js"></script>
    <script src="~/EasyuiSource/easyui-lang-zh_CN.js"></script>
    <script src="~/DiySource/datapattern.js"></script></strong></span>

    接下来，因为添加需要弹出对话框，所以下面是对添加对话框的布局设置，这里使用了Ajax窗体，参数Add为该form提交到的Action方法。

        

    <div id="addDiv">
            @using (Ajax.BeginForm("Add", new AjaxOptions() { OnSuccess = "afterAdd" }))
            {
                <table>
                    <tr>
                        <td>编号：</td>
                        <td>
                            @Html.TextBox("AdministratorID")
                        </td>
                    </tr>
                    <tr>
                        <td>密码：</td>
                        <td>@Html.TextBox("AdminPassword")</td>
                    </tr>
                    <tr>
                        <td>真实姓名：</td>
                        <td>
                            @Html.TextBox("AdminName")
                        </td>
                    </tr>                    
                </table>
            }

        </div></strong></span>

    然后就是对添加和删除动作的js方法操作：

        

       //显示弹出添加的对话框
        function showAddFrm() {
            $("#addDiv").css("display", "block");
            $("#addDiv").dialog({
                width: 400,
                height: 300,
                modal: true,
                title: "添加用户信息",
                collapsible: true,
                minimizable: true,
                maximizable: true,
                resizable: true,
                buttons: [{
                    id: 'btnAdd',
                    text: '添加',
                    iconCls: 'icon-add',
                    handler: function () {
                        //让表单提交
                        $("#addDiv form").submit();
                    }
                }, {
                    id: 'btnCancelAdd',
                    text: '取消',
                    iconCls: 'icon-cancel',
                    handler: function () {
                        $("#addDiv").dialog("close");
                    }
                }]
            });
        }

        //添加成功之后执行的代码
        function afterAdd(data) {
            if (data == "ok") {
                //关闭对话框，刷新表               
                $("#addDiv").dialog("close");
                //initTable();
                $('#tt').datagrid("reload");
            } else {
                $.messager.alert("提示消息", data);
            }
        }

        //删除用户数据
        function doDelete() {
            //把你选中的 数据查询出来。
            var selectRows = $('#tt').datagrid("getSelections");
            if (selectRows.length < 1) {
                $.messager.alert("提示消息", "请选中要删的数据!");
                return;
            }

            //真删除数据
            //提醒用户是否是真的删除数据
            $.messager.confirm("确认消息", "您确定要删除信息吗？", function (r) {
                if (r) {
                    //真删除了  1,3,4
                    var strIds = "";
                    for (var i = 0; i < selectRows.length; i++) {
                        strIds += selectRows[i].ID + ",";
                    }
                    strIds = strIds.substr(0, strIds.length - 1);
                    //alert(strIds);
                    $.post("/Administrator/DelBy", { ids: strIds }, function (data) {
                        if (data == "ok") {
                            //刷新表格，去掉选中状态的 那些行。
                            $('#tt').datagrid("reload");
                            $('#tt').datagrid("clearSelections");
                        } else {
                            $.messager.alert("删除失败~~", data);
                        }
                    });
                }
            });

        }</strong></span>

    下面，是对表格的初始化相关的js操作，我们主要关心对添加和删除按钮的绑定。

       

<script type="text/javascript">

        $(function () {
            initTable();

            $("#addDiv").css("display", "none"); //隐藏添加对话框          
            bindSearcheClick();

        });

        //初始化表格
        function initTable() {
            //把搜素框里的内容提交到后台对数据进行过滤。
            $('#tt').datagrid({
                url: '/Administrator/QueryBy',
                //title: '演示表格使用',
                width: "100%",
                //height: 1400,
                fitColumns: true,
                idField: 'ID',
                loadMsg: '正在加载用户的信息...',
                pagination: true,
                singleSelect: false,
                pageSize: 10,
                pageNumber: 1,
                pageList: [10, 20, 30],
                queryParams: {
                    searchName: $("#searchName").val()
                },
                columns: [[
			{ field: 'ck', checkbox: true, align: 'left', width: 50 },
                        { field: 'ID', width: 50, hidden: true },
			{ field: 'AdministratorID', title: '编号', width: 50 },
                        { field: 'AdminPassword', title: '密码', width: 50 },
                        { field: 'AdminName', title: '真实姓名', width: 50 },
                ]],
                toolbar: [{
                    id: 'btnDownShelf',
                    text: '添加',
                    iconCls: 'icon-add',
                    handler: function () {//给添加按钮绑定事件
                        showAddFrm();
                    }
                }, {
                    id: 'btnDelete',
                    text: '删除',
                    iconCls: 'icon-remove',
                    handler: function () {//改删除按钮绑定事件

                        doDelete();
                    }
                }],
                onHeaderContextMenu: function (e, field) {

                },
                onLoadSuccess: function (data) {
                    $(".delUser").unbind("click");
                    $(".delUser").bind("click", function () {
                        alert($(this).attr("uid"));
                        return false;
                    });

                    $(".editUser").unbind("click");
                    $(".editUser").bind("click", function () {
                        //alert($(this).attr("uid"));
                        doEdit($(this).attr("uid"));
                        return false;
                    });
                }
            });
        }

    </script></strong></span>

       

    经过上面的绑定设置后，我们在点击添加按钮后，就会弹出添加对话框，将我们的表单提交到Controller中对应的Action中，因为添加对话框是post提交，所以要在对应的Action上加上[HttpPost]标签。

         

        //3.0添加
        [HttpPost]
        public ActionResult Add(YzAdministratorEntity admin)
        {

            try
            {
                admin.ID = Guid.NewGuid();
                admin.isUsed = true;
                admin.AdminLevel = "管理员";
                adminBLL.Add(admin);

                return Content("ok");
            }
            catch (Exception ex)
            {
                //错误日志处理
                return Content(ex.Message);
            }
        }

        //4.0批量删除
        public ActionResult DelBy(string ids)
        {
            if (string.IsNullOrEmpty(ids))
            {
                return Content("请选中要删除的数据！");
            }


            var adminIds = ids.Split(',');
            Guid[] ass = new Guid[adminIds.Length];
            for (int i = 0; i < adminIds.Length; i++)
            {
                ass[i] = new Guid(adminIds[i]);
            }

            adminBLL.DelBy(a => ass.Contains(a.ID));
            return Content("ok");
        }</strong></span>

    这样，整个流程下来就实现了我们的添加和删除功能。

    总结：

    在使用EasyUI的过程中，有时候感觉代码和方法之间的调用关系有点凌乱，代码是对现实世界的逻辑抽象，它是准确的、明晰的、逻辑性强的，刚开始敲的时候总有种把控不了的感觉，总结下来主要有两方面原因，一是基础知识掌握的不够牢固，代码经验少；还有一个就是没有从全局上考虑方法之间的调用关系。通过编程，真的能使人的思维方式得到锻炼，只有当思考的方式和代码的逻辑艺术融合到一起，才能够真实写出好的代码来。