JQuery-EasyUI DataGrid CRUD
ASP.NET使用EasyUI-DataGrid + ashx + JQuery Ajax：实现数据的增删查改，查询和分页！
数据表：
学生表：学生编号、姓名、性别、班级编号、年龄
班级表：班级编号、班级名称
开发过程：
1.下载EasyUI的开发包
2.引用相关文件：
<link href="/CSS/easyui.css" rel="stylesheet" type="text/css" /> <link href="/CSS/demo.css" rel="stylesheet" type="text/css" /> <link href="/CSS/icon.css" rel="stylesheet" type="text/css" /> <script src="/Packages/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="/Packages/jquery.easyui.min.js" type="text/javascript"></script> <script src="/Packages/EditStuInfo.js" type="text/javascript"></script> <script src="/Packages/easyui-lang-zh_CN.js" type="text/javascript"></script>
3.引用相关图片文件：
要注意的是Css文件中的图片路路径，如果是使用默认的路径，那么图片文件应该放在css所在文件的同级目录，如果是其它目录，则要修改css中的图片路径
4.建立表格、对话框、及按钮：
<!--Search Begin--> 根据班级查询学生信息： <select id="classNum_Search"></select> <a href="#" class="easyui-linkbutton" onclick="searchStuByClassNum()">查询</a> <br /> <!--Search End--> <!--StuInfo_Table Begin--> <table id="dg" title="学生信息管理" class="easyui-datagrid" style="width:700px;height:365px" url="/ashx/StudentInfo.ashx?Action=Load" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true"> <thead> <tr> <th field="Id" width="50">ID</th> <th field="StuNum" width="50">学生编号</th> <th field="StuName" width="50">姓名</th> <th field="ClasName" width="50">班级</th> <th field="StuGender" width="50">性别</th> <th field="StuAge" width="50">年龄</th> </tr> </thead> </table> <div id="toolbar"> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">添加</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">删除</a> </div> <!--StuInfo_Table End--> <!--StuInfo_Dialog Begin--> <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px" closed="true" buttons="#dlg-buttons"> <div class="ftitle">学生信息</div> <form id="fm" method="post" novalidate action=""> <div class="fitem"> <label>学生编号:</label> <input name="StuNum" class="easyui-validatebox"/> </div> <div class="fitem"> <label>姓名:</label> <input name="StuName" class="easyui-validatebox" required="true"/> </div> <div class="fitem"> <label>班级:</label> <select name="ClassNum" id="ClassNum" ></select> </div> <div class="fitem"> <label>性别:</label> <input id="rdoMan" name="StuGender" type="radio" value="1" />男 <input id="rdoWuman" name="StuGender" type="radio" value="0" />女 </div> <div class="fitem"> <label>年龄:</label> <input name="StuAge" class="easyui-validatebox" required="true" /> </div> </form> </div> <!--StuInfo_Dialog End--> <div id="dlg-buttons"> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a> </div> </div>
5.对数据操作的JS代码：
var url; //添加 function newUser() { $('#dlg').dialog('open').dialog('setTitle', '添加学生信息'); $('#fm').form('clear'); //获取最大的学生ID并加1 $.get("/ashx/StudentInfo.ashx?Action=GetMaxNum", function (data) { $("#fm input[name='StuNum']").val(data).attr("readonly", "readonly"); }); //获取班级信息 $.get("/ashx/StudentInfo.ashx?Action=GetClassInfo", function (data) { $("#ClassNum").html("").append(data); $("#ClassNum").eq(0).attr("selected", "selected"); }); //默认性别男被选中 $("#fm input[name='StuGender']").eq(0).attr("checked", "checked"); url = '/ashx/StudentInfo.ashx?Action=Save'; } //更新 function editUser() { var row = $('#dg').datagrid('getSelected'); if (row) { $('#dlg').dialog('open').dialog('setTitle', '编辑学生信息'); $('#fm').form('load', row); //获取和设置班级的状态 $.get("/ashx/StudentInfo.ashx?Action=GetClassInfo", function (data) { $("#ClassNum").html("").append(data); $("#ClassNum option").each(function () { if ($(this).text() == row.ClasName) { $(this).attr("selected", "selected"); } }); //.eq(0).attr("selected", "selected"); }); //获取和设置性别的选中状态 if (row.StuGender == "男") { $("#fm input[name='StuGender']").eq(0).attr("checked", "checked"); } else { $("#fm input[name='StuGender']").eq(1).attr("checked", "checked"); } url = '/ashx/StudentInfo.ashx?Action=Update&id=' + row.Id; } } //保存 function saveUser() { $('#fm').form('submit', { url: url, onSubmit: function () { return $(this).form('validate'); }, success: function (result) { if (result == "False") { $.messager.show({ title: '友情提示', msg: 'Sorry, 出错了,请重试 :(' }); } else { $('#dlg').dialog('close'); // close the dialog $('#dg').datagrid('reload'); // reload the user data } } }); } //删除 function destroyUser() { var row = $('#dg').datagrid('getSelected'); if (row) { $.messager.confirm('友情提示', '确定要删除数据吗，删除后将无法找回?', function (r) { if (r) { $.post('/ashx/StudentInfo.ashx', { "Action": "Delete", "id": row.Id }, function (result) { if (result == "True") { $('#dg').datagrid('reload'); // reload the user data } else { $.messager.show({ // show error message title: '错误提示！', msg: "服务器错误，请刷新重试 :(" }); } }); } }); } } //根据班级查询学生信息 function searchStuByClassNum() { var classNum = $("#classNum_Search").val(); $('#dg').datagrid({ url: "/ashx/StudentInfo.ashx?Action=SearchStu", queryParams: { "classNum": classNum } }) }; //加载班级信息到查询列表中 $(function () { $.get("/ashx/StudentInfo.ashx?Action=GetClassInfo", function (data) { $("#classNum_Search").html("").append(data); $("#classNum_Search option").eq(0).attr("selected", "selected"); }); })
6.后台数据处理文件 ashx
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Configuration; using System.Text; namespace TestStuMS.Ashx { /// <summary> /// StudentInfo 的摘要说明 /// </summary> public class StudentInfo : IHttpHandler { public BLL.Students bllStu = new BLL.Students(); public BLL.StuClass bllClass = new BLL.StuClass(); public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; //获取请求的动作 string action = context.Request["Action"]; if (string.IsNullOrEmpty(action)) return; switch (action) { case "Save"://添加 context.Response.Write(AddStuInfo(context)); break; case "Delete"://删除 context.Response.Write(DeleteStuInfo(context)); break; case "Update"://更新 context.Response.Write(UpdateStuInfo(context)); break; case "Load"://加载与分页 context.Response.Write(BuildPager(context)); break; case "GetMaxNum"://获取新学生编号 context.Response.Write(GetMaxNum()+1); break; case "GetClassInfo"://获取班级信息 context.Response.Write(GetClassInfo(context)); break; case "SearchStu"://根据班级获取学生信息 context.Response.Write(GetStuInfoByClassNum(context)); break; } } #region 方法 //添加 private bool AddStuInfo(HttpContext context) { //stuNum:1201009 //stuName:星期三 //classNum:1201 //stuGender:男 //stuAge:20 Model.Students model= new Model.Students(); model.StuNum = int.Parse(context.Request["StuNum"]); model.ClassNum = int.Parse(context.Request["ClassNum"]); model.StuName = context.Request["StuName"]; model.StuGender = context.Request["StuGender"]=="1"?true:false; model.StuAge = int.Parse(context.Request["StuAge"]); return bllStu.Add(model);//如果是成功则返回True否则返回False } //更新 private bool UpdateStuInfo(HttpContext context) { Model.Students model = new Model.Students(); model.Id = int.Parse(context.Request["id"]); model.StuNum = int.Parse(context.Request["StuNum"]); model.ClassNum = int.Parse(context.Request["ClassNum"]); model.StuName = context.Request["StuName"]; model.StuGender = context.Request["StuGender"] == "1" ? true : false; model.StuAge = int.Parse(context.Request["StuAge"]); return bllStu.Update(model); } //删除 private bool DeleteStuInfo(HttpContext context) { int Id = int.Parse(context.Request["id"]); return bllStu.Delete(Id); } //分页 private string BuildPager(HttpContext context) { int pageIndex = int.Parse(context.Request["page"]); int pageSize = int.Parse(context.Request["rows"]); List<Model.Students> stuList = bllStu.GetModelList(""); List<Model.StuClass> classList = bllClass.GetModelList(""); //获取学生信息 var stuInfo = stuList.Join(classList, s => s.ClassNum, c => c.ClassNum, (s, c) => new { s.Id, s.StuNum, s.StuName, c.ClasName, StuGender = s.StuGender == true ? "男" : "女", s.StuAge } ); //查询分页数据 var pageData = stuInfo.Where(s => s.Id > 0) .OrderByDescending(s => s.Id) .Skip((pageIndex-1) * pageSize) .Take(pageSize).ToList(); var data = new { total = stuInfo.Count(), rows = pageData }; //序列化成JSON格式数据 System.Web.Script.Serialization.JavaScriptSerializer jss = new System.Web.Script.Serialization.JavaScriptSerializer(); return jss.Serialize(data); } //获取班级信息 private string GetClassInfo(HttpContext context) { List< Model.StuClass> classList = bllClass.GetModelList(""); StringBuilder sb = new StringBuilder(); foreach (var stuClass in classList) { sb.Append("<option value='" + stuClass.ClassNum + "'>" + stuClass.ClasName + "</option>"); } return sb.ToString(); } //获取学生最大ID(以便新添加的ID保持唯一) private int GetMaxNum() { return bllStu.GetMaxStuNum(); } //根据班级获取学生信息 private string GetStuInfoByClassNum(HttpContext context) { int classNum = int.Parse(context.Request["classNum"]); List<Model.Students> stuList = bllStu.GetModelList("ClassNum=" + classNum); List<Model.StuClass> classList = bllClass.GetModelList(""); //根据班级获取学生信息 var stuInfo = stuList.Join(classList, s => s.ClassNum, c => c.ClassNum, (s, c) => new {s.ClassNum, s.Id, s.StuNum, s.StuName, c.ClasName, StuGender = s.StuGender == true ? "男" : "女", s.StuAge } ).Where(i=>i.ClassNum==classNum); //序列化成JSON格式数据 System.Web.Script.Serialization.JavaScriptSerializer jss = new System.Web.Script.Serialization.JavaScriptSerializer(); return jss.Serialize(stuInfo.ToList()); } #endregion public bool IsReusable { get { return false; } } } }
7.效果图：
