easyui行内编辑功能强大，可以将增删改查操作都放在一个页面上进行，因此大大减少了冗余代码。笔者参考他人做的增删改查的实例效果如下图。
具体实现如下：
1.前端代码Show.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="pragma" content="no-cache" />
<script src="/Scripts/loading.js" type="text/javascript"></script>
<link href="/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="/EasyUI/themes/gray/easyui.css" rel="stylesheet" type="text/css" />
<script src="/EasyUI/jquery.min.js" type="text/javascript"></script>
<script src="/EasyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/Scripts/distinguishBrowser.js" type="text/javascript"></script>
<script src="../EasyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var datagrid; //定义全局变量datagrid
var editRow = undefined; //定义全局变量：当前编辑的行
datagrid = $("#dd").datagrid({
url: '/User/UserHandler.ashx?action=GetAll', //请求的数据源
title: '用户列表',
iconCls: 'icon-edit', //图标
pagination: true, //显示分页
pageSize: 10, //页大小
pageList: [10, 20, 30, 40], //页大小下拉选项此项各value是pageSize的倍数
fit: true, //datagrid自适应宽度
fitColumn: false, //列自适应宽度
striped: true, //行背景交换
nowap: true, //列内容多时自动折至第二行
border: true,
idField: 'ID', //主键
columns: [[//显示的列
{field: 'ck', checkbox: true },
{ field: 'Id', title: '用户编号', width: 100, sortable: true,
editor: { type: 'validatebox', options: { required: true} }
},
{ field: 'Name', title: '用户名', width: 100, sortable: true,
editor: { type: 'validatebox', options: { required: true} }
},
{ field: 'Password', title: '密码', width: 100,
editor: { type: 'validatebox', options: { required: true} }
},
{ field: 'Email', title: '电子邮箱', width: 180,
editor: { type: 'validatebox', options: { required: true} }
},
{ field: 'Phonenumber', title: '电话号码', width: 180,
editor: { type: 'validatebox', options: { required: true} }
},
{ field: 'Role', title: '角色名称', width: 130,
editor: { type: 'combobox', options: {
valueField: 'text', textField: 'id', url: '/Role/RoleHandler.ashx?action=GetAll', required: true
}
}
},
{ field: 'JT', title: '集团名称', width: 130,
editor: { type: 'combobox', options: {
valueField: 'text', textField: 'id', url: '/JT/JTHandler.ashx?action=GetAll', required: true,
onSelect: function (data) {
var row = $('#dd').datagrid('getSelected');
var rowIndex = $('#dd').datagrid('getRowIndex', row); //获取行号
var target = $('#dd').datagrid('getEditor', { 'index': rowIndex, 'field': 'GC' }).target;
target.combobox('clear'); //清除原来的数据
var url = '/GC/GCHandler.ashx?action=GetGC&jt=' + data.id;
target.combobox('reload', url); //联动下拉列表重载
}
}
}
},
{ field: 'GC', title: '工厂名称', width: 130,
editor: { type: 'combobox', options: {
valueField: 'text', textField: 'id', required: true
}
}
},
{ field: 'Note', title: '备注', width: 155,
editor: { type: 'validatebox', options: { required: true} }
}
]],
queryParams: { action: 'query' }, //查询参数
toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按钮添加，修改，删除等
//添加时先判断是否有开启编辑的行，如果有则把开户编辑的那行结束编辑
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
//添加时如果没有正在编辑的行，则在datagrid的第一行插入一行
if (editRow == undefined) {
datagrid.datagrid("insertRow", {
index: 0, // index start with 0
row: {
}
});
//将新插入的那一行开户编辑状态
datagrid.datagrid("beginEdit", 0);
//给当前编辑的行赋值
editRow = 0;
}
}
},
'-',
{ text: '删除', iconCls: 'icon-remove', handler: function () {
//删除时先获取选择行
var rows = datagrid.datagrid("getSelections");
//选择要删除的行
if (rows.length > 0) {
$.messager.confirm("提示", "你确定要删除吗?", function (r) {
if (r) {
//获取所有要删除的用户的编号
var ids = [];
for (var i = 0; i < rows.length; i++) {
ids.push(rows[i].Id);
}
//执行数据删除操作
$.ajax({
url: '/User/UserHandler.ashx?action=Delete',
type: 'POST',
data: {
Id: ids.join(',')
},
beforeSend: function () {
$.messager.progress({
text: '正在处理中...'
});
},
success: function (data) {
$.messager.progress('close');
data = eval('(' + data + ')'); //将一个json字符串解析成js对象
if (data.Success) {
datagrid.datagrid('reload');
$.messager.show({
title: '操作提醒',
msg: data.Message
})
} else {
$.messager.alert('删除失败', '没有删除任何数据！', 'warning');
}
}
});
}
});
}
else {
$.messager.alert("提示", "请选择要删除的行", "error");
}
}
}, '-',
{ text: '修改', iconCls: 'icon-edit', handler: function () {
//修改时要获取选择到的行
var rows = datagrid.datagrid("getSelections");
//如果只选择了一行则可以进行修改，否则不操作
if (rows.length == 1) {
//修改之前先关闭已经开启的编辑行，当调用endEdit该方法时会触发onAfterEdit事件
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
//当无编辑行时
if (editRow == undefined) {
//获取到当前选择行的下标
var index = datagrid.datagrid("getRowIndex", rows[0]);
//开启编辑
datagrid.datagrid("beginEdit", index);
//把当前开启编辑的行赋值给全局变量editRow
editRow = index;
//当开启了当前选择行的编辑状态之后，
//应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑
datagrid.datagrid("unselectAll");
}
}
}
}, '-',
{ text: '保存', iconCls: 'icon-save', handler: function () {
//保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
datagrid.datagrid("endEdit", editRow);
}
}, '-',
{ text: '取消编辑', iconCls: 'icon-redo', handler: function () {
//取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
editRow = undefined;
datagrid.datagrid("rejectChanges");
datagrid.datagrid("unselectAll");
}
}, '-'],
onAfterEdit: function (rowIndex, rowData, changes) {
//endEdit该方法触发此事件
var inserted = datagrid.datagrid('getChanges', 'inserted');
var updated = datagrid.datagrid('getChanges', 'updated');
if (inserted.length < 1 && updated.length < 1) {
editRow = undefined;
datagrid.datagrid('unselectAll');
return;
}
var url = '';
if (inserted.length > 0) {
url = '/User/UserHandler.ashx?action=Add';
}
if (updated.length > 0) {
url = '/User/UserHandler.ashx?action=Update';
}
//更新数据库
$.ajax({
url: url,
type: 'POST',
data: {
'Id': rowData.Id,
'Name': rowData.Name,
'Password': rowData.Password,
'Email': rowData.Email,
'Phonenumber': rowData.Phonenumber,
'Role': rowData.Role,
'JT': rowData.JT,
'GC': rowData.GC,
'Note': rowData.Note
},
beforeSend: function () {
$.messager.progress({
text: '正在处理中...'
})
},
success: function (data) {
$.messager.progress('close');
data = eval('(' + data + ')'); //将一个json字符串解析成js对象
if (data.Success) {
datagrid.datagrid("acceptChanges");
$.messager.show({
title: '操作提示',
msg: data.Message
});
editRow = undefined;
datagrid.datagrid("reload");
$('#addcheck').val(1);
} else {
datagrid.datagrid("beginEdit", editRow);
$.messager.alert('警告操作', '未知错误！请重新刷新后提交！', 'warning');
}
datagrid.datagrid("unselectAll");
}
});
},
onDblClickRow: function (rowIndex, rowData) {
datagrid.datagrid('selectRow', rowIndex); //选中该行
//双击开启编辑行
if (editRow != undefined) {
datagrid.datagrid("endEdit", editRow);
}
if (editRow == undefined) {
datagrid.datagrid("beginEdit", rowIndex);
editRow = rowIndex;
}
}
});
var p = datagrid.datagrid('getPager');
$(p).pagination({
pageSize: 10, //每页显示的记录条数，默认为10
pageList: [5, 10, 15], //可以设置每页记录条数的列表
beforePageText: '第', //页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录'
});
});
</script>
</head>
<body>
<table id="dd">
</table>
</body>
</html>
2.后端代码 UserHandler.ashx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Model;
using Common;
using System.Data;
using DataService;
using Newtonsoft.Json;
namespace Web.User
{
/// <summary>
/// UserHandler 的摘要说明
/// </summary>
public class UserHandler : IHttpHandler
{
DataAccess data = new DataAccess();
public void ProcessRequest(HttpContext context)
{
// 如果表单是以 POST 方式提交的，则服务器端必须以 context.Request.Form[name] 或者 context.Request[name] 来获取；
// 表单元素必须要有 name 属性，因为Form[] 中的索引就是 name 属性的值；
// 注意： ajax提交请求时，需要设置data属性，后台才能够接收到表单中的数据，
// 例如 data: $('#ff').serialize() 代表将form表单中的数据序列化传输。
//string userName = context.Request.Form["txt"];
//string userPwd = context.Request.Form["pwd"];
// 如果表单元素以 GET 方式提交，则服务器端必须以 Request.QueryString[] 来获取，索引仍是name属性的值。
// 以 GET 方式提交的时候，会在浏览器的地址栏显示提交的内容。
//string userName = context.Request.QueryString["txt"];
//string userPwd = context.Request.QueryString["pwd"];
string action = context.Request["action"].ToString();
context.Response.ContentType = "text/plain";
ResultInfo result = new ResultInfo();
switch (action)
{
case "Add":
UserInfo user1 = new UserInfo();
user1.Id = context.Request.Form["Id"];
user1.Name = context.Request.Form["Name"];
user1.Password = context.Request.Form["Password"];
user1.Email = context.Request.Form["Email"];
user1.Phonenumber = context.Request.Form["Phonenumber"];
user1.JT = context.Request.Form["JT"];
user1.GC = context.Request.Form["GC"];
user1.Role = context.Request.Form["Role"];
result.Success = Add(user1);
result.Message = "添加用户信息" + ((result.Success == true) ? "成功" : "失败") + "!";
string jss = JsonHelper<ResultInfo>.ObjectToJsonString(result);
context.Response.Write(jss);
context.Response.End();
break;
case "GetAll":
int page = int.Parse(context.Request.Form["page"]);
int rows = int.Parse(context.Request.Form["rows"]);
context.Response.Write(GetAll(page, rows));
break;
case "GetAllUName":
context.Response.Write(GetAllUName());
break;
case "GetUser":
string name1 = context.Request["Name"];
context.Response.Write(GetUser(name1));
break;
case "Update":
UserInfo user2 = new UserInfo();
user2.Id = context.Request["Id"];
user2.Name = context.Request.Form["Name"];
user2.Password = context.Request.Form["Password"];
user2.Email = context.Request.Form["Email"];
user2.Phonenumber = context.Request.Form["Phonenumber"];
user2.JT = context.Request.Form["JT"];
user2.GC = context.Request.Form["GC"];
user2.Role = context.Request.Form["Role"];
user2.Note = context.Request.Form["Note"];
result.Success = Update(user2);
result.Message = "更新用户信息" + ((result.Success==true)?"成功":"失败") + "!";
jss = JsonHelper<ResultInfo>.ObjectToJsonString(result);
context.Response.Write(jss);//"{\"Success\":\"false\",\"Message\":\"更新用户信息失败!\"}"
break;
case "Delete":
string id = context.Request["Id"];
string[] ids = id.Split(',');
for (int i = 0; i < ids.Length; i++)
{
result.Success = Delete(ids[i]);
if (result.Success == false)
{
break;
}
}
result.Message = "删除" + ids.Length + "条用户信息" + ((result.Success==true)?"成功":"失败") + "!";
jss = JsonHelper<ResultInfo>.ObjectToJsonString(result);
context.Response.Write(jss);
context.Response.End();
break;
default:
break;
}
}
/// <summary>
/// 保存用户的信息
/// </summary>
/// <param name="user"></param>
public bool Add(UserInfo user)
{
string sql = "INSERT INTO `web`.`用户表`(`用户编号`, `用户名`, `密码`, `电子邮箱`, `电话号码`, `角色名称`, `集团名称`, `工厂名称`, `备注`) VALUES (" +
user.Id + ", '"+
user.Name + "', '" +
user.Password + "', '" +
user.Email + "', '" +
user.Phonenumber + "', '" +
user.Role + "', '" +
user.JT + "', '" +
user.GC + "', '" +
user.Note + "')";
return data.ExecSql(sql);
}
/// <summary>
/// 获取所有用户信息
/// </summary>
/// <returns>用户信息列表的json字符串形式</returns>
public string GetAll(int page, int rows)
{
int start = (page - 1) * rows;
int end = page * rows;
List<UserInfo> users = new List<UserInfo>();
string sql = "SELECT * FROM `web`.`用户表`";
string where = "limit " + start + "," + end;
Dictionary<string, object> d = new Dictionary<string, object>();
//获取数据总数(注意是总数,不是一页中数据的条数)
DataTable dTable = data.GetTable(sql);
d.Add("total", data.GetTable(sql).Rows.Count);
//获取page页的数据
dTable = dTable.AsEnumerable().Skip((page - 1) * rows).Take(rows).CopyToDataTable();
for (int i = 0; i < dTable.Rows.Count; i++)
{
UserInfo user = new UserInfo();
user.Id = dTable.Rows[i]["用户编号"].ToString();
user.Name = dTable.Rows[i]["用户名"].ToString();
user.Password = dTable.Rows[i]["密码"].ToString();
user.Email = dTable.Rows[i]["电子邮箱"].ToString();
user.Phonenumber = dTable.Rows[i]["电话号码"].ToString();
user.Role = dTable.Rows[i]["角色名称"].ToString();
user.JT = dTable.Rows[i]["集团名称"].ToString();
user.GC = dTable.Rows[i]["工厂名称"].ToString();
user.Note = dTable.Rows[i]["备注"].ToString();
users.Add(user);
}
d.Add("rows", users);
return JsonConvert.SerializeObject(d);
}
/// <summary>
/// 获取所有用户名【目录】
/// </summary>
/// <returns>用户信息列表的json字符串形式</returns>
public string GetAllUName()
{
SelectorHelper shelper = new SelectorHelper();
string sql = "SELECT * FROM `web`.`用户表`";
DataTable dTable = data.GetTable(sql);
for (int i = 0; i < dTable.Rows.Count; i++)
{
string name = dTable.Rows[i]["用户名"].ToString();
if (i == 0)
{
shelper.AddItem(name, name, true);
}
else
{
shelper.AddItem(name, name, false);
}
}
return shelper.ToString();
}
/// <summary>
/// 获取指定的用户信息
/// </summary>
/// <param name="uname"></param>
/// <returns></returns>
public string GetUser(string uname)
{
string sql = "SELECT * FROM `web`.`用户表` where 用户名='" + uname + "'";
DataTable dTable = data.GetTable(sql);
UserInfo user = new UserInfo();
user.Id = dTable.Rows[0]["用户编号"].ToString();
user.Name = dTable.Rows[0]["用户名"].ToString();
user.Password = dTable.Rows[0]["密码"].ToString();
user.Email = dTable.Rows[0]["电子邮箱"].ToString();
user.Phonenumber = dTable.Rows[0]["电话号码"].ToString();
user.Role = dTable.Rows[0]["角色名称"].ToString();
user.JT = dTable.Rows[0]["集团名称"].ToString();
user.GC = dTable.Rows[0]["工厂名称"].ToString();
user.Note = dTable.Rows[0]["备注"].ToString();
return JsonHelper<UserInfo>.ObjectToJsonString(user);
}
/// <summary>
/// 删除用户信息
/// </summary>
/// <param name="user">用户信息</param>
/// <returns>更新是否成功</returns>
public bool Delete(string id)
{
string sql = "Delete from `web`.`用户表` WHERE `用户编号` = " + id;
return data.ExecSql(sql);
}
/// <summary>
/// 更新用户信息
/// </summary>
/// <param name="user">用户信息</param>
/// <returns>更新是否成功</returns>
public bool Update(UserInfo user)
{
string sql = "Update `web`.`用户表` SET " +
"`用户名` = '" + user.Name + "'," +
"`密码` = '" + user.Password + "'," +
"`电子邮箱` = '" + user.Email + "'," +
"`电话号码` = '" + user.Phonenumber + "'," +
"`角色名称` = '" + user.Role + "'," +
"`集团名称` = '" + user.JT + "'," +
"`工厂名称` = '" + user.GC + "'," +
"`备注` = '" + user.Note + "' WHERE `用户编号` = " + user.Id;
return data.ExecSql(sql);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}注意：
（1）easyui中文提示：只需要引入locale文件夹下的easyui-lang-zh_CN.js文件到页面即可；
（2）上述代码请求ajax，响应回来的data是一个json字符串，格式：{"Success":"false","Message":"更新用户信息失败!"}；
（3）支持多行删除，行内编辑。