也懒得打其它字了，直接进入主题吧
1.首先，数据表Rex_Test
| ID | int | 自增 |
| tName | varchar(10) | 姓名 |
| tEmail | varchar(80) | 邮箱 |
2.至于代码里的Jqurey EasyUI包就直接去官网下载吧，当然其它地方也行，这里就不多做说明了。
3.前台显示页面
Default.aspx
<span style="font-size:14px;"><head> <title>myWeb</title> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css"> <link rel="stylesheet" type="text/css" href="demo.css"> <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script></head><body > <table id="dg" class="easyui-datagrid" style="width: 700px; height: 300px" data-options="rownumbers:true,onClickRow:ClickRow,singleSelect:true,border:false,pagination:true,url:'Handler3.ashx'"> <thead> <tr> <th data-options="field:'ID',width:100"> ID </th> <th data-options="field:'tName',width:100"> 姓名 </th> <th data-options="field:'tEmail',width:100"> 邮箱 </th> </tr> </thead> </table> <div id="Div1" class="easyui-panel" title="form Fields" style="width: 1000px; height: 180px; float: left;"> <table> <tr> <td> 姓名: </td> <td> <input id="n" class="easyui-validatebox" type="text" name="name" data-options="required:true" /> </td> </tr> <tr> <td> 邮箱: </td> <td> <input id="pr" class="easyui-validatebox" type="text" name="price" data-options="required:true" /> </td> </tr> <tr> <td> 查询： </td> <td> <input id="sear" class="easyui-validatebox" type="text" name="price" data-options="required:true" /> </td> </tr> <tr> <td> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="add()"> Add</a> </td> <td> <a href="#r" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="refresh()">Refresh</a> <a href="#r" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="del()">Delete</a> </td> </tr> </table> </div> <ul id="tt" class="easyui-tree"> </ul> <script type="text/javascript"> $(document).ready(function () { $.ajax({ url: "Handler3.ashx", type: "get", dataType: "json", error: function (request, message, ex) { alert(message + request + ex); }, success: function (returnValue) { $("#tt").tree("loadData", returnValue); } }) }); function searchs() { $.ajax({ url: "refresh.ashx", type: "post", data: "fac=" + $("#sear").val(), // data: "olditemid=" + $("#dg").datagrid("getSelected").ItemID + "&itemid=" + $("#ii").val(), error: function (request, message, ex) { alert(message + request + ex); }, success: function (returnValue) { alert(returnValue); $('#dg').datagrid('reload'); } }) } function add() { $.ajax({ url: "add.ashx", type: "get", data: "name=" + $("#n").val() + "&email=" + $("#pr").val(), error: function (request, message, ex) { alert(message + request + ex); }, success: function (returnValue) { alert(returnValue); $('#dg').datagrid('reload'); } }) } function del() { $.ajax({ url: "del.ashx", type: "get", data: "id=" + $("#dg").datagrid("getSelected").ID, error: function (request, message, ex) { alert(message + request + ex); }, success: function (returnValue) { // alert(returnValue); $('#dg').datagrid('reload'); } }) } function ClickRow(rowIndex, rowData) { // alert('这是Name:' + rowData.Name + '这个是ID:' + rowData.ID); if (rowData) { //document.getElementById("ii").value = rowData.ID; document.getElementById("n").value = rowData.tName; document.getElementById("pr").value = rowData.tEmail; } } function refresh() { $.ajax({ url: "refresh.ashx", type: "get", data: "id=" + $("#dg").datagrid("getSelected").ID + "&name=" + $("#n").val() + "&email=" + $("#pr").val(), // data: "olditemid=" + $("#dg").datagrid("getSelected").ItemID + "&itemid=" + $("#ii").val(), error: function (request, message, ex) { alert(message + request + ex); }, success: function (returnValue) { alert(returnValue); $('#dg').datagrid('reload'); } }) } </script></body></html></span>4. Handler3.ashx（初始绑定）
<span style="font-size:14px;"><%@ WebHandler Language="C#" Class="Handler3" %>using System;using System.Web;using System.Data;using System.Data.SqlClient;using System.Text;using System.IO;public class Handler3 : IHttpHandler { public void ProcessRequest(HttpContext context) { Query(context); } public void Query(HttpContext context) { //调用B层的方法从而获取数据库的Dataset SqlHelp sqla = new SqlHelp(); string strfaca = "select * from Rex_Test"; DataSet ds = sqla.GetDataSet(strfaca); //将Dataset转化为Datable DataTable dt = ds.Tables[0]; int count = dt.Rows.Count; string strJson = Dataset2Json(ds, count);//DataSet数据转化为Json数据 context.Response.Write(strJson);//返回给前台页面 context.Response.End(); } /// <summary> /// DataSet转换成Json格式 /// </summary> /// <paramname="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(); } /// <summary> /// dataTable转换成Json格式 /// </summary> /// <paramname="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(); } public bool IsReusable { get { return false; } }}</span>5.add.ashx（新增数据）
<span style="font-size:14px;"><%@ WebHandler Language="C#" Class="add" %>using System;using System.Web;public class add : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string result = string.Empty; string name = context.Request.QueryString["name"]; string email = context.Request.QueryString["email"]; SqlHelp sqla = new SqlHelp(); string sqlString = "insert into Rex_Test(tName,tEmail) values('"+name+"','"+email+"')"; bool aa = sqla.ExecuteNonQuery(sqlString); sqla.SqlClose(); if (aa) { result = "添加纪录成功"; } context.Response.Write(result); } public bool IsReusable { get { return false; } }}</span>6.del.ashx（删除数据）
<span style="font-size:14px;"><%@ WebHandler Language="C#" Class="del" %>using System;using System.Web;public class del : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string result = string.Empty; string id = context.Request.QueryString["id"]; SqlHelp sqla = new SqlHelp(); string sqlString = "delete from Rex_Test where ID='" + id + "'"; bool aa = sqla.ExecuteNonQuery(sqlString); sqla.SqlClose(); if (aa) { result = "删除成功"; } context.Response.Write(result); } public bool IsReusable { get { return false; } }}</span>7.refresh.ashx（更新数据）
<span style="font-size:14px;"><%@ WebHandler Language="C#" Class="refresh" %>using System;using System.Web;public class refresh : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string result = string.Empty; string id = context.Request.QueryString["id"]; string name = context.Request.QueryString["name"]; string email = context.Request.QueryString["email"]; SqlHelp sqla = new SqlHelp(); string sqlString = "update Rex_Test set tName='"+name+"',tEmail='"+email+"' where ID='" + id + "'"; bool aa = sqla.ExecuteNonQuery(sqlString); sqla.SqlClose(); if (aa) { result = "更新成功"; } context.Response.Write(result); } public bool IsReusable { get { return false; } }}</span>8.基本上这个样子就差不多了，更加细化的东西还没来得及做，下次弄好了才发吧。
哦，对了，代码里的SqlHelp sqla = new SqlHelp();其实就是个sql操作类，自己写的，网上有很多这种的SqlHelper，这个我就不贴出来了吧。