基于asp.net + easyui框架，一步步学习easyui-datagrid—实现添加、编辑、删除
基于asp.net + easyui框架，一步步学习easyui-datagrid—实现添加、编辑、删除
目录：
基于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" οnkeydοwn= "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'" οnclick="saveUser()">保存</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" οnclick="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前端页面开发总结
Asp.net 一般处理程序+扩展
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
腾讯云开发者
