增删该查是不论什么一个项目都少不了的功能操作。这篇博文主要简单介绍一下怎样使用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>password：</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操作。我们主要关心对加入和删除button的绑定。

<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: 'password', width: 50 },

                        { field: 'AdminName', title: '真实姓名', width: 50 },

                ]],

                toolbar: [{

                    id: 'btnDownShelf',

                    text: '加入',

                    iconCls: 'icon-add',

                    handler: function () {//给加入button绑定事件

                        showAddFrm();

                    }

                }, {

                    id: 'btnDelete',

                    text: '删除',

                    iconCls: 'icon-remove',

                    handler: function () {//改删除button绑定事件

                        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>

   
经过上面的绑定设置后。我们在点击加入button后。就会弹出加入对话框。将我们的表单提交到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的过程中，有时候感觉代码和方法之间的调用关系有点凌乱，代码是对现实世界的逻辑抽象。它是准确的、明晰的、逻辑性强的，刚開始敲的时候总有种把控不了的感觉，总结下来主要有双方面原因。一是基础知识掌握的不够坚固。代码经验少；另一个就是没有从全局上考虑方法之间的调用关系。

通过编程，真的能使人的思维方式得到锻炼，仅仅有当思考的方式和代码的逻辑艺术融合到一起，才可以真实写出好的代码来。