使用EasyUI实现添加和删除功能
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了使用EasyUI实现添加和删除功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5008字，纯文字阅读大概需要8分钟。
内容图文
增删该查是任何一个项目都少不了的功能操作，这篇博文主要简介一下如何使用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的过程中，有时候感觉代码和方法之间的调用关系有点凌乱，代码是对现实世界的逻辑抽象，它是准确的、明晰的、逻辑性强的，刚开始敲的时候总有种把控不了的感觉，总结下来主要有两方面原因，一是基础知识掌握的不够牢固，代码经验少；还有一个就是没有从全局上考虑方法之间的调用关系。通过编程，真的能使人的思维方式得到锻炼，只有当思考的方式和代码的逻辑艺术融合到一起，才能够真实写出好的代码来。
原文：http://blog.csdn.net/zjx86320/article/details/42065013
内容总结
以上是互联网集市为您收集整理的使用EasyUI实现添加和删除功能全部内容，希望文章能够帮你解决使用EasyUI实现添加和删除功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。