增删该查是不论什么一个项目都少不了的功能操作。这篇博文主要简单介绍一下怎样使用EasyUI实现加入和删除功能。
首先。导入EasyUI的js代码:
接下来,由于加入须要弹出对话框,所以以下是对加入对话框的布局设置,这里使用了Ajax窗口,參数Add为该form提交到的Action方法。
@using (Ajax.BeginForm("Add", new AjaxOptions() { OnSuccess = "afterAdd" })) {}
编号: @Html.TextBox("AdministratorID") password: @Html.TextBox("AdminPassword") 真实姓名: @Html.TextBox("AdminName")
然后就是对加入和删除动作的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的绑定。
经过上面的绑定设置后。我们在点击加入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"); }
这样,整个流程下来就实现了我们的加入和删除功能。
总结:
在使用EasyUI的过程中,有时候感觉代码和方法之间的调用关系有点凌乱,代码是对现实世界的逻辑抽象。它是准确的、明晰的、逻辑性强的,刚開始敲的时候总有种把控不了的感觉,总结下来主要有双方面原因。一是基础知识掌握的不够坚固。代码经验少;另一个就是没有从全局上考虑方法之间的调用关系。
通过编程,真的能使人的思维方式得到锻炼,仅仅有当思考的方式和代码的逻辑艺术融合到一起,才可以真实写出好的代码来。