今天周四称，这应该给自己一个休息，好好休息休息，但无奈自己IT这是痴迷。甘心的想加加班把目标功能实现，功夫不负有心人。经过6个小时的鏖战，我最终成功了。
在此和大家分享下成果，希望大家给个赞。
我的目标效果：在页面载入时。table表显示后台数据表中的学生的信息；点击加入button。出现弹框，能够加入学生信息；选中某一学生记录后，点击改动button。出现弹框。能够对学生信息进行改动。选中某一学生记录后。点击删除button，便可删除该学生信息。效果图例如以下所看到的：
目标效果有了，说说实现思路吧。
1.须要引入Easyui类库和相关的js：
<head><title></title><link href="css/easyui.css" rel="stylesheet" type="text/css" /><link href="css/icon.css" rel="stylesheet" type="text/css" /><link href="css/demo.css" rel="stylesheet" type="text/css" /><script src="js/jquery.min.js" type="text/javascript"></script><script src="js/jquery.easyui.min.js" type="text/javascript"></script><script src="js/test.js" type="text/javascript"></script>
</head>
//用于传递用户须要运行的操作
<input id="test" name="test" type="hidden"><!--表格显示区--><table id="tt" " title="管理学生信息" class="easyui-datagrid" style="width: auto; height: 400px;" idfield="itemid" pagination="true" iconcls="icon-save" remoteSort="false" data-options="rownumbers:true,url:'JSONData.ashx/ProcessRequest',pageSize:5,pageList:[5,10,15,20],method:'get',toolbar:'#tb' ," fitcolumns= "true" striped="true" singleselect="true"><thead><tr><th data-options="field:'serial',width:0" hidden="hidden"> 序号</th><th data-options="field:'id',width:100",sortable:"true">学号</th><th data-options="field:'name',width:100",sortable:"true">姓名</th></tr></thead></table> <!--加入、改动、删除按钮--><div id="tb"><a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" οnclick="newUser()">加入学生</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" οnclick="editUser()">改动学生</a><a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" οnclick="destroyUser()">删除学生</a></div>
<!--弹框--><div id="dlg" class="easyui-dialog" style="width: 400px; height: 280px; padding: 10px 20px"closed="true" buttons="#dlg-buttons"><div class="ftitle">User Information</div><form id="fm" method="post" novalidate><div class="fitem"><label>学号:</label><input id="id" class="easyui-validatebox" required="true"></div><div class="fitem"><label>姓名:</label><input id="name" class="easyui-validatebox" required="true"></div></form></div>
var url = "JSONData.ashx / ProcessRequest ";
//打开加入学生弹框
function newUser() {$('#dlg').dialog('open').dialog('setTitle', '加入学生'); //设定表头 $('#fm').form('clear'); //清空窗口数据 document.getElementById("test").value = "add"; //设定表示为后台调不同方法数据提供接口
}
//打开改动学生弹框
function editUser() {$('#fm').form('clear');var row = $('#tt').datagrid('getSelected');if (row) {$('#dlg').dialog('open').dialog('setTitle', '改动学生');//绑定数据列表 $('#id').val(row.id);$('#name').val(row.name);document.getElementById("test").value = "modify"; //设定表示为后台调不同方法数据提供接口 $('#fm').form('load', row);}
}
//保存信息
function saveUser() {//获取页面中输入的值 var serial;var id = document.getElementById("id").value;var name = document.getElementById("name").value;var test = document.getElementById("test").value;var row = $('#tt').datagrid('getSelected');if (test == "modify") {serial = row.serial;} else {serial == "";}$('#fm').form('submit', {//设定地址与传递參数到后台 url: "JSONData.ashx?id=" + id + "&name=" + name + "&test=" + test + "&serial=" + serial,onSubmit: function () {return $(this).form('validate');},//推断结果是否正确 success: function (result) {if (result.indexOf("T") == 0) {alert('恭喜您。信息保存成功！') $('#dlg').dialog('close'); // 关闭窗口 $('#tt').datagrid('reload'); } else { alert('保存失败，请您核对！') } var result = eval('(' + result + ')'); if (result.success) { $('#dlg').dialog('close'); // close the dialog $('#tt').datagrid('reload'); $.message.alert('提示', '保存成功！', 'info'); // reload the user data } else { //$.messager.show({ // title: 'Error', // msg: result.msg //}); } } }); } //删除学生 function destroyUser() { document.getElementById("test").value = "delete"; //设定表示为后台调不同方法数据提供接口 var test = document.getElementById("test").value; var row = $('#tt').datagrid('getSelected'); if (row) { $.messager.confirm('提示', '你确定要删除这条信息吗？', function (r) { if (r) { $('#fm').form('submit', { url: "JSONData.ashx?serial=" + row.serial + "&test=" + test, onSubmit: function () { }, //推断结果是否正确 success: function (result) { if (result.indexOf("T") == 0) { $('#dlg').dialog('close'); alert('恭喜您，信息删除成功！
') $('#tt').datagrid('reload'); } else { alert('加入失败，请又一次操作。') } var result = eval('(' + result + ')'); } }); } }); } }
通过JS代码。我们能够发现。Ajax获取用户的数据，将其提交到一般处理程序JSONData.ashx中进行处理。并用回调函数获取一般处理程序的运行结果，JSONData.ashx代码例如以下：
StudentDAL studentDAL = new StudentDAL();public void ProcessRequest(HttpContext context)//context中包括前台与后台来回传递的值 {//推断前台请求的是增删改查的哪一个 string command = context.Request.QueryString["test"];//前台传的标示值 if (command == "add"){//调用加入方法 Add(context);}else if (command == "delete"){//调用删除方法 Delete(context);}else if (command == "modify"){//调用改动方法 Modify(context);}else{//调用查询方法 Query(context);}}#region 加入记录/// <summary>/// 加入记录/// </summary>/// <param name="context"></param>public void Add(HttpContext context){StudentEntity student = new StudentEntity();student.id = context.Server.UrlDecode(context.Request.QueryString["id"]);student.name = context.Server.UrlDecode(context.Request.QueryString["name"]);try{if (studentDAL.Add(student)){context.Response.Write("T");}else{context.Response.Write("F");}}catch (Exception ex){}}#endregion#region 改动记录/// <summary>/// 改动记录/// </summary>/// <param name="context"></param>public void Modify(HttpContext context){StudentEntity student = new StudentEntity();student.serial = context.Server.UrlDecode(context.Request.QueryString["serial"]);student.id = context.Server.UrlDecode(context.Request.QueryString["id"]);student.name = context.Server.UrlDecode(context.Request.QueryString["name"]);try{if (studentDAL.Update(student)){context.Response.Write("T");}else{context.Response.Write("F");}}catch (Exception ex){}}#endregion#region 删除记录/// <summary>/// 删除记录/// </summary>/// <param name="context"></param>public void Delete(HttpContext context){StudentEntity student = new StudentEntity();student.serial = context.Server.UrlDecode(context.Request.QueryString["serial"]);try{if (studentDAL.Delete(student)){context.Response.Write("T");}else{context.Response.Write("F");}}catch (Exception ex){}}#endregion#region 查询记录/// <summary>/// 查询记录/// </summary>/// <param name="context"></param>public void Query(HttpContext context){context.Response.ContentType = "text/plain";//调用分页的GetList方法DataSet ds = studentDAL.Query();string strJson = ToJson.Dataset2Json(ds, -1);//DataSet数据转化为Json数据context.Response.Write(strJson);//返回给前台页面context.Response.End();}#endregion
public class ToJson{#region DataSet转换成Json格式/// <summary>/// DataSet转换成Json格式 /// </summary> /// <param name="ds">DataSet</param> /// <returns></returns> public static string Dataset2Json(DataSet ds, int total = -1){StringBuilder json = new StringBuilder();foreach (DataTable dt in ds.Tables){//{"total":5,"rows":[json.Append("{\"total\":");if (total == -1){json.Append(dt.Rows.Count);}else{json.Append(total);}json.Append(",\"rows\":[");json.Append(DataTable2Json(dt));json.Append("]}");} return json.ToString();}#endregion#region dataTable转换成Json格式/// <summary> /// dataTable转换成Json格式 /// </summary> /// <param name="dt"></param> /// <returns></returns> public static string DataTable2Json(DataTable dt){StringBuilder jsonBuilder = new StringBuilder();for (int i = 0; i < dt.Rows.Count; i++){jsonBuilder.Append("{");for (int j = 0; j < dt.Columns.Count; j++){jsonBuilder.Append("\"");jsonBuilder.Append(dt.Columns[j].ColumnName);jsonBuilder.Append("\":\"");jsonBuilder.Append(dt.Rows[i][j].ToString());jsonBuilder.Append("\",");}if (dt.Columns.Count > 0){jsonBuilder.Remove(jsonBuilder.Length - 1, 1);}jsonBuilder.Append("},");}if (dt.Rows.Count > 0){jsonBuilder.Remove(jsonBuilder.Length - 1, 1);}return jsonBuilder.ToString();}#endregion dataTable转换成Json格式}这样。我们轻松的完毕了对数据表T_Studnet进行CRUD的操作。基本功能尽管已经实现，但Easyui的好多扩展功能还需继续了解，比方在数据显示时，能够设置每页有多少条数据。数据按什么方式进行排序、组合查询等功能。
这个Demo大大添加了我学习Easyui的信心，本以为得一周才干完毕的功能，没想到两天搞定，小小得瑟一下。
和Easyui类似的还有extjs。它们都能画出非常妙的页面图。仅仅只是Easyui是JQuery的框架。extjs是Ajax的框架。
假设大家想练练手，能够把我做好的Demo下载下来，看看我的代码有什么不知之处，欢迎大神拍砖，源代码下载地址：http://pan.baidu.com/s/1o6Cz4Qe。
好了。今天先到这吧，韩义打电话来让我们回家包饺子去了，关于Easyui的学习，咱们改日再谈。
版权声明：本文博客原创文章，博客，未经同意，不得转载。