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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

增删该查是不论什么一个项目都少不了的功能操作。这篇博文主要简单介绍一下怎样使用EasyUI实现加入和删除功能。

首先。导入EasyUI的js代码：

接下来，由于加入须要弹出对话框，所以以下是对加入对话框的布局设置，这里使用了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的绑定。

经过上面的绑定设置后。我们在点击加入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>