| function Init() { DomTree=new dhtmlXTreeObject(document.getElementById('divTree'),"100%","100%",0); DomTree.setImagePath("imgs/"); DomTree.enableDragAndDrop(true) DomTree.setDragHandler(myDragHandler); DomTree.setOnClickHandler(SelectTreeNode); var s= AjaxData.GetXmlTree().value; DomTree.loadXMLString(s); DomTree.openItem("R_1"); SelectTreeNode("R_1"); divToolbar.innerHTML=AjaxData.GetToolBarTable(TableName).value; divDataGrid.innerHTML=GetTableOuterHTML(TableName); } |
Init方法通过Ajax的GetXmlTree方法得到树的内容，GetToolBarTable取得工具栏的内容。通过GetTableOuterHTML方法取得物理表tInfoClass的所有数据并通过表格展现出来。
| function Find() { var Table=AjaxData.GetXmlFindTable("年级名称 like '%"+txtName.value +"%'"); divDataGrid.innerHTML=Table.value; } |
查询方法Find()是通过Ajax的GetXmlFindTable方法按年级名称查询并把结果展现出来。
| function OpenAddWeb() { var RetID =OpenAddWin('InfoClass_edit.aspx?IsAdd=true',370,300); if(RetID==-1) return; InsertRow(DataGrid1,RetID); } |
OpenAddWeb方法打开InfoClass_edit.aspx页在该页上完成增加数据的功能。如果返回值不为-1则表示有新数据增加的并把数据插入到表格的最后一行。RetID表示最后一行的ID.
| function OpenEditWeb(ThisCell) { var ID=ThisCell.previousSibling.previousSibling.innerText; var RetID =OpenAddWin("InfoClass_edit.aspx?ID="+ID+"&IsAdd=false",370,300); if(RetID==-1) return; //有更新行 var CurrRow=ThisCell.parentElement SetRowText(CurrRow); // SetRowText(CurrRow,RetDataRow); } |
OpenEditWeb方法是当用户点击的单元格后打开InfoClass_edit.aspx页在该页上完成编辑该行数据的功能。如有更新行则把当前行的内容更换..
 |
·建立Ajax类。（见文件AjaxData.cs）命名空间为Ttyu，类名为AjaxData。
1. 定义静态变量mDt。mDt是读取到物理表的数据并保存在内存中的数据表对象。我们的主要操作都是靠它完成。定义为静态的是我们不希望反复访问数据库。我们一次性读取，永久使用。
| static public DataTable mDt; |
2.定义我们的主要方法。在每个方法的上行加上[Ajax.AjaxMethod()]。
| //得到表TableName的所得数据，以XML字符串返回 [Ajax.AjaxMethod()] public string GetTableOuterHTML(string TableName) { DataTable dt=db.DB.GetDataTable(TableName); mDt=dt; return db.GetTableOuterHTML(dt.DefaultView); } |
GetTableOuterHTML方法是由物理表名读取到内存中并通过其视图得到以XML格式的Table。这里我们读取后保存在mDt中。用数据表的视图是我们的查询也通过该方法呈现数据。
| //得到表TableName的所得数据，以XML字符串返回 [Ajax.AjaxMethod()] public string GetXmlFindTable(string RowFilter) { DataTable Dt=mDt; DataView dv=Dt.DefaultView; dv.RowFilter=RowFilter; return db.GetTableOuterHTML(dv); } |
GetXmlFindTable是按查询条件从mDt中查询到数据并返回给客户端。
| //删除行 [Ajax.AjaxMethod()] public bool DeleteRow(string TableName,int ID) { string SQL = "delete from " + TableName + " where ID=" + ID; bool isSuccess= db.DB.ExecuteSQL(SQL); if(isSuccess) { DataRow dr=mDt.Select("ID="+ID)[0]; mDt.Rows.Remove(dr); } return isSuccess; } |
DeleteRow是删除物理表的一行，并在mDt中也同步地删除。
| //把数据行转化为数组返回 [Ajax.AjaxMethod()] public object GetDataRow(int iID) { DataRow dr=mDt.Select("ID="+iID)[0]; return dr.ItemArray;//数字类型不能为空 } GetDataRow是从内存表mDt得到ID号为iID的一行，通过数组方式返回给客户端。 [Ajax.AjaxMethod()] public string GetToolBarTable(string TableName) { return db.GetToolBarTable(TableName); } |
GetToolBarTable是组织成工具栏的内容返回给客户端。
·建立业务数据类ttyuPKData。（见文件ttyuPKData.cs）命名空间为Ttyu，类名为ttyuPKData。
该类中有些常用的方法。
public bool InsertDataRow(DataRow dr,int BeginColumnIndex)为向物理表中把数据行dr插入，BeginColumnIndex表示从开始的列插入。
public bool UpdateDataRow(DataRow dr,int BeginColumnIndex,string Filter) 为向物理表中把数据行dr的数据更新，BeginColumnIndex表示开始更新的列。Filter表示所要更新的行。是一筛选条件。
public string GetTableOuterHTML(DataView dv)是个通用的把数据视图展现为Table的方法。并通过class定义样式。
| //由一个数据视图得到该表的表头及所有数据，以XML格式的表字符串返回 public string GetTableOuterHTML(DataView dv) { StringBuilder ret = new StringBuilder(); ret.Append("＜table class='DataGrid' id='DataGrid1' cellspacing=1 cellpadding=4＞" ); ret.Append("＜tr class='DataGridHeaderStyle'＞"); ret.Append("＜td width='5'＞ ＜input type='checkbox' onclick='SelectAll(this)'＞＜/td＞ "); //标题 foreach(System.Data.DataColumn dc in dv.Table.Columns ) { if(dc.Ordinal==0) //该列隐藏 ret.Append("＜td class='IDColumn'＞"+dc.ColumnName+"＜/td＞"); else ret.Append("＜td＞"+dc.ColumnName+"＜/td＞"); } ret.Append("＜/tr＞"); //这时是视图中筛选后的数据 foreach(DataRowView drv in dv) { DataRow dr=drv.Row;//dv.Table.Rows[i]; ret.Append(GetRowOuterHTML(dr)); } ret.Append("＜/table＞"); return ret.ToString (); } |
·建立页面数据编辑类（见文件PageEdit.cs）命名空间为Ttyu.Web，类名为PageEdit。
该类是个通用的通过继承的技巧实现了所有编辑页(包括增加、修改数据)功能的统一处理。页中不需要一行代码。
结论
Ajax技术可以给客户端提供丰富的客户体验，而ajax.net为您容易的实现这样强大的功能提供了可能。静态页面是不出现刷新问题的。我们的静态页面通过Ajax完全可与asp.net结合起来。通过.net进行后台的管理。前台通过javascript调用。这样完美的结合是解决问题的最佳方法。
