話說今天周四，本該給自己放個假，好好休息休息，但無奈自己對IT實在是癡迷，心甘情願的想加加班把目标功能實作，功夫不負有心人，經過6個小時的鏖戰，我終于成功了。在此和大家分享下成果，希望大家給個贊。
我的目标效果：在頁面加載時，table表顯示背景資料表中的學生的資訊；點選添加按鈕，出現彈框，可以添加學生資訊；選中某一學生記錄後，點選修改按鈕，出現彈框，可以對學生資訊進行修改；選中某一學生記錄後，點選删除按鈕，便可删除該學生資訊。效果圖如下所示：
目标效果有了，說說實作思路吧。
1.需要引入Easyui類庫和相關的js：
<head>
<title></title>
<link href="css/easyui.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" />
<link href="css/icon.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" />
<link href="css/demo.css" target="_blank" rel="external nofollow" 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> 2.畫出顯示資料的table表
//用于傳遞使用者需要執行的操作
<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> 3.畫出添加、修改、删除三個按鈕
<!--添加、修改、删除按鈕-->
<div id="tb">
<a href="javascript:void(0)" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="easyui-linkbutton" iconcls="icon-add" plain="true" οnclick="newUser()">添加學生</a>
<a href="javascript:void(0)" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="easyui-linkbutton" iconcls="icon-edit" plain="true" οnclick="editUser()">修改學生</a>
<a href="javascript:void(0)" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="easyui-linkbutton" iconcls="icon-remove" plain="true" οnclick="destroyUser()">删除學生</a>
</div> 4.畫出點選添加、修改按鈕後出現的彈框
<!--彈框-->
<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> 到此頁面的顯示部分完成，下面需要用Ajax建立Web頁面和一般處理程式之間的互動
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
在将資料表中的資料綁定到頁面中的table時，由于背景傳回的結果是DataSet或DataTable類型，是以需要一個方法将DataSet或DataTable轉換為JSON類型，強大的ToJson類就完成了上述任務：
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格式
} 至此，核心代碼都已經實作，剩下的就是一個學生實體--StudentEntity，一個通路T_Student表的StudentDAL類，它們和我們平時通路資料庫的方法一樣，在此不再贅述。
這樣，我們輕松的完成了對資料表T_Studnet進行CRUD的操作。基本功能雖然已經實作，但Easyui的好多擴充功能還需繼續了解，比如在資料顯示時，可以設定每頁有多少條資料，資料按什麼方式進行排序、組合查詢等功能。
這個Demo大大增加了我學習Easyui的信心，本以為得一周才能完成的功能，沒想到兩天搞定，小小得瑟一下。和Easyui類似的還有extjs，它們都能畫出很妙的頁面圖，隻不過Easyui是JQuery的架構，extjs是Ajax的架構。
如果大家想練練手，可以把我做好的Demo下載下傳下來，看看我的代碼有什麼不知之處，歡迎大神拍磚，源碼下載下傳位址：http://pan.baidu.com/s/1o6Cz4Qe。
好了，今天先到這吧，韓義打電話來讓我們回家包餃子去了，關于Easyui的學習，咱們改日再談。
![PHP基礎入門，簡單實作前端後端互動<?php?>、echo變量及區分單雙引号建立數組、echo、print_r()、var_dump()差別二維數組常見資料類型及調用函數自定義函數http協定常用請求方式及在php中的用法網頁和伺服器簡單互動案例[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)