目录：
基于asp.net + easyui框架，一步步学习easyui-datagrid——界面（一）
基于asp.net + easyui框架，一步步学习easyui-datagrid——实现分页和搜索（二）
基于asp.net + easyui框架，一步步学习easyui-datagrid——实现添加、编辑、删除（三）
基于asp.net + easyui框架，一步步学习easyui-datagrid——完成，总结（四）
上周就想更新这篇博客了，但是在做这个界面的过程中，遇到了很多的问题，一时没有解决方案，现在想到了一个，虽然还有点不尽完美，但是能实现项目的基本功能。在下面我会给大家说一下我遇到的困难，并提供实现的代码。
这篇博客的主题是实现对话窗口的添加、编辑和删除。我们总共分成五步：
1、制作对话窗口html
<%-- 弹出操作框--%>
<div id="dlg" class="easyui-dialog" style="width: 400px; height: auto; padding: 10px 20px"
data-options="closed:true,buttons:'#dlg-buttons'"> <%--closed="true" buttons="#dlg-buttons"--%>
<div class="ftitle">管理员信息</div>
<form id="fm" method="post">
<div class="fitem">
<label>用户名：</label>
<input id="firstname" name="firstname" class="easyui-validatebox" data-options="required:true"/>
</div>
<div class="fitem">
<label>密码：</label>
<input id="password" name="password" class="easyui-validatebox" data-options="required:true"/>
<input name="Test" id="test" type="hidden" />
<input name="AdminID" id="AdminID" type="hidden" />
<input id="key" name="key" onkeydown= "if(event.keyCode==13)reloadgrid()" type="hidden"/>
</div>
<div class="fitem">
<label>员工姓名:</label>
<input id="workerName" name="workerName" class="easyui-combobox"/>
</div>
<div class="fitem">
<label>权限:</label>
<input id="adminRightName" name="adminRightName" class="easyui-combobox"/>
</div>
<div class="fitem">
<label>备注:</label>
<textarea id="message" name="message" style="width:150px;"></textarea>
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="saveUser()">保存</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="javascript:$('#dlg').dialog('close')">关闭</a>
</div>
2、弹出对话窗口的js
//添加管理员
function newUser() {
//清空内容
$('#fm').form('clear');
//加载工作人员的姓名和权限
loadWorkerNameAndRightName();
$('#dlg').dialog('open').dialog('setTitle', '添加管理员');
document.getElementById("test").value = "add";
}
//修改管理员
function editUser() {
var row = $('#tt').datagrid('getSelected');
if (row == null) {
$.messager.alert("提示", "请选择要修改的行！", "info");
}
//加载工作人员的姓名和权限
loadWorkerNameAndRightName()
if (row) {
//获取要修改的字段
$('#firstname').val(row.AdminName);
$('#password').val(row.AdminPassword);
//$('#adminRightName').val(row.AdminRightName);
//$('#adminRightName').combobox('setValue', row.AdminRightName);
////$('#workerName').val(row.WorkerRealName);
//$('#workerName').combobox('setValue', row.WorkerRealName);
$('#message').val(row.AdminState)
$('#dlg').dialog('open').dialog('setTitle', '修改管理员');
document.getElementById("test").value = "modify";
$('#fm').form('load', row);
}
}
3.实现对话框中下拉框的动态加载
在博客开头为大家设置了一个悬念，在实现过程中遇到了困难，就是在下拉框动态加载数据时，显示的是一个数据库信息，更新的时候要更新此显示信息的数据库主键。多个下拉框的实现方案和一个下拉框是一样的。
解决方案：
只需要调用一般处理程序，将所需数据转化成json作为返回值，发送到界面端，显示在下拉框中的数据绑定到combobox的textField属性中，需要更新的数据绑定到valueField属性中，此时一切都ok了。
实现效果：
实现代码js：
//加载工作人员的姓名和权限
function loadWorkerNameAndRightName() {
var queryWorkerName = "SetAdmin.ashx?test=queryWorkerName";
$.getJSON(queryWorkerName, function (json) {
$('#workerName').combobox({
data: json.rows,
valueField: 'WorkerID',
textField: 'WorkerRealName',
required: 'true',
editable: 'false'
});
})
var queryRightName = "SetAdmin.ashx?test=queryRightName";
$.getJSON(queryRightName, function (json) {
$('#adminRightName').combobox({
data: json.rows,
valueField: 'AdminRightID',
textField: 'AdminRightName',
required: 'true',
panelHeight: 'auto'
});
})
}
4.实现对话窗口的保存和取消功能
//保存信息
function saveUser() {
var firstname = document.getElementById("firstname").value;
var password = document.getElementById("password").value;
var workerID = $("#workerName").combobox("getValue");;
var adminRightID = $("#adminRightName").combobox("getValue");
var message = document.getElementById("message").value;
var test = document.getElementById("test").value;
if (test == "add") {
$('#fm').form('submit', {
url: "SetAdmin.ashx?test=" + test + "&firstname=" + firstname + "&password=" + password + "&workerID=" + workerID +
"&adminRightID=" + adminRightID + "&message=" + message,
onSubmit: function () {
return $(this).form('validate');
},
success: function (result) {
if (result.indexOf("T") == 0) {
$('#dlg').dialog('close');
$.messager.alert("提示", "恭喜您，信息添加成功", "info");
//alert('恭喜您，信息添加成功！')
// close the dialog
$('#tt').datagrid('reload');
//$('#fm').form('submit');
}
else {
$.messager.alert("提示", "添加失败，请重新操作！", "info");
return;
//alert('添加失败，请重新操作！')
}
//var result = eval('(' + result + ')');
//if (result.success) {
// $('#dlg').dialog('close'); // close the dialog
// $('#tt').datagrid('reload'); // reload the user data
//} else {
// $.messager.show({
// title: 'Error',
// msg: result.msg
// });
//}
}
});
} else {
var row = $('#tt').datagrid('getSelected');
if (row) {
//获取要修改的字段
var adminID = row.AdminID;
}
$('#fm').form('submit', {
url: "SetAdmin.ashx?test=" + test + "&adminID=" + adminID + "&firstname=" + firstname + "&password=" + password + "&workerID=" +
workerID + "&adminRightID=" + adminRightID + "&message=" + message,
onSubmit: function () {
return $(this).form('validate');
},
success: function (result) {
if (result.indexOf("T") == 0) {
$('#dlg').dialog('close');
$('#tt').datagrid('clearSelections'); //清空选中的行
$.messager.alert("提示", "恭喜您，信息修改成功", "info");
//alert('恭喜您，信息添加成功！')
// close the dialog
$('#tt').datagrid('reload');
$('#fm').form('submit');
}
else {
$.messager.alert("提示", "修改失败，请重新操作！", "info");
return;
//alert('添加失败，请重新操作！')
}
//var result = eval('(' + result + ')');
//if (result.success) {
// $('#dlg').dialog('close'); // close the dialog
// $('#tt').datagrid('reload'); // reload the user data
//} else {
// $.messager.show({
// title: 'Error',
// msg: result.msg
// });
//}
}
});
}
}
5.实现删除功能
//删除管理员
function removeUser() {
var test = document.getElementById("test").value = "delete";
var row = $('#tt').datagrid('getSelected');
if (row == null) {
$.messager.alert("提示", "请选择要删除的行！", "info");
}
if (row) {
$.messager.confirm('提示', '你确定要删除这条信息吗？', function (r) {
if (r) {
$('#fm').form('submit', {
url: 'SetAdmin.ashx/ProcessRequest?AdminID=' + row.AdminID + "&test=" + test,
onSubmit: function () {
//return $(this).form('validate');
},
success: function (result) {
if (result.indexOf("T") == 0) {
$('#dlg').dialog('close');
$('#tt').datagrid('clearSelections'); //清空选中的行
$.messager.alert("提示", "恭喜您，信息删除成功！", "info");
//alert('恭喜您，信息删除成功！')
// close the dialog
$('#tt').datagrid('reload');
$('#fm').form('submit');
}
else {
$.messager.alert("提示", "添加失败，请重新操作！", "info");
//alert('添加失败，请重新操作！')
return;
//$('#fm').form('submit');
}
}
});
}
})
}
}
这篇博客就不为大家提供一般处理程序的源码了，跟上篇博客是一样的，对datagrid的操作基本就结束了，下面我会进行一下相应的总结，顺便总结一下在做整个项目时的一点心得。
========================================================================================================================
基于asp.net+easyui框架的系列博文：
使用Jquery+EasyUI框架开发项目+下载+帮助--EasyUI的简介
Asp.net之真假分页大揭秘、使用AspNetPager实现真分页
Asp.Net构架(Http请求处理流程)、Asp.Net 构架(Http Handler 介绍)、Asp.Net 构架(HttpModule 介绍)
基于asp.net + easyui框架，js实现上传图片之前判断图片格式，同时实现预览，兼容各种浏览器+下载
基于asp.net+ easyui框架，js提交图片，实现先上传图片再提交表单
基于asp.net + easyui框架，一步步学习easyui-datagrid——界面（一）
基于asp.net + easyui框架，一步步学习easyui-datagrid——实现分页和搜索（二）
基于asp.net + easyui框架，一步步学习easyui-datagrid——实现添加、编辑、删除（三）
基于asp.net + easyui框架，一步步学习easyui-datagrid——完成，总结（四）
=========================================================================================================================
对于json：不知道怎么传值？不知道返回什么样值？不知道如何拼接json串的童鞋有福了，给大家推荐一篇文章：
http://blog.csdn.net/gxq741718618/article/details/41130509
相关推荐
"ASP.NET编程知识：基于ASP.NET+easyUI框架实现图片上传功能（判断格式+即时浏览）" 基于ASP.NET+easyUI框架实现图片上传功能是指在ASP.NET web应用程序中使用easyUI框架来实现图片上传功能，该功能包括判断图片...
ASP.NET MVC5是一种微软开发的Web应用程序框架，用于构建可维护性和可测试性极高的Web应用。这个框架是ASP.NET的一部分，它结合了Model-View-Controller（MVC）设计模式，提供了对ASP.NET Web API的支持，使得开发...
本系统基于.Net框架与EasyUI库构建，旨在提供一个强大、美观且用户友好的后台操作界面。下面将详细探讨.Net框架与EasyUI的相关知识点，以及它们如何协同构建出强大的后台管理系统。 .Net框架是由微软公司开发的一种...
EasyUI 是一个基于 jQuery 的前端 UI 框架，它为 ASP.NET 应用程序提供了美观且易于使用的界面组件。在这个案例中，我们将深入探讨如何结合 ASP.NET 和 EasyUI 实现权限管理功能。 1. **权限管理基础** 权限管理是...
.NET MVC + EasyUI 后台管理系统是基于微软的ASP.NET MVC技术栈，结合了流行的前端框架EasyUI，用于构建高效、美观的后台管理界面。在VS 2015集成开发环境中，MVC 4提供了强大的模型-视图-控制器（MVC）架构，为Web...
【标题】中的知识点主要涉及到的是ASP.NET MVC4框架与JQuery EasyUI的结合应用，用于构建企业管理系统。ASP.NET MVC4是一种模型-视图-控制器（Model-View-Controller）架构模式，它允许开发者分离应用程序的业务逻辑...
在结合ASP.NET框架时，DataGrid能有效地将服务器端的数据动态地呈现到客户端，提供排序、分页、过滤和编辑等功能，提升用户体验。在本文中，我们将深入探讨如何在ASP.NET环境中使用EasyUI的DataGrid显示数据。 首先...
ASP.NET MVC5是微软推出的一款用于构建Web应用程序的开源框架，它是基于模型-视图-控制器（Model-View-Controller）设计模式的。MVC5在ASP.NET MVC4的基础上进行了增强，提供了更好的性能、更丰富的特性和更好的开发...
EasyUI 是一个基于 jQuery 的前端框架，用于快速构建用户界面，尤其适合开发管理类Web应用。其中 Datagrid 是 EasyUI 的一个重要组件，它提供了一种表格形式的数据展示和操作功能。"easyui-datagrid2-demo.zip" 文件...
ASP.NET EasyUI 是一个基于 .NET 框架和 jQuery EasyUI 的前端开发框架，用于构建功能丰富的 web 应用程序。EasyUI 提供了一系列预定义的 CSS 和 JavaScript 组件，使得开发者可以快速地创建出美观且响应式的用户...
ASP.NET MVC5与EasyUI的结合使用是一种常见的前端与后端技术栈组合，它能够帮助开发者构建高效、响应式的Web应用程序。在这个事例中，我们将深入探讨如何在ASP.NET MVC5框架下有效地利用EasyUI库。 ASP.NET MVC5是...
3. 主要功能:新增、修改、删除、分页、表格多表头、表格行内编辑、导出Excel文件、上传图片、权限设置、图形报表展示 (权限设置只是为了练习easyUI tree的使用,具体项目具体分析) 4. 添加面板功能,添加遮罩层(添加...
通过以上步骤，我们成功地在ASP.NET MVC项目中实现了使用EasyUI框架的Datagrid控件进行数据分页的功能。这种方法不仅提高了用户体验，同时也使后台的数据管理更加高效便捷。希望本教程能帮助读者更好地理解如何在...
ASP.NET是微软推出的一种用于构建Web应用程序的框架，它基于.NET Framework，提供了丰富的服务器控件、事件驱动模型以及内置的处理程序，使得开发者能够更高效地创建动态网页和Web服务。ASP.NET提供了多种编程模型，...
数据库管理系统，不管是桌面版，还是网页版，我觉得最重要的功能是：增删改查+分页。文档里面的例子就是asp.net web form + easy ui 的datagrid。简单的演示了这五个重要功能。请用vs2010运行，数据库没有给出。
本示例项目"落阳-利用NPOI将EasyuiDatagrid数据导出到Excel-ASP.NET MVC Demo"提供了一个解决方案，通过使用NPOI库来实现这一功能。 NPOI是一个强大的.NET库，它允许开发者在.NET环境中读写Microsoft Office文件，...
在本文中，我们将深入探讨如何使用EasyUI框架与ASP.NET技术来实现数据网格（datagrid）与数据库的交互，以及如何构建动态的树形结构（tree）来加载数据库数据。EasyUI是一个基于jQuery的轻量级前端框架，它提供了一...
2. **EasyUI**：EasyUI 是一个基于jQuery的UI框架，提供了丰富的UI组件，如网格、对话框等，极大地简化了前端开发过程。 #### 六、关键技术实现 1. **EasyUI构建前端框架**：通过EasyUI构建统一的前端界面，确保...
此外，EasyUI的表单组件可以用来创建用户输入界面，允许管理员添加、编辑或删除数据。 在实际项目中，开发者通常会利用Ajax技术，通过EasyUI的事件监听和异步请求，与MVC3后端进行通信。例如，当用户在表格中选择一...