效果图如下：
<%@ Page language="c#" Codebehind="ajaxDataGrid.aspx.cs" AutoEventWireup="false" Inherits="WebApplication1.ajaxDataGrid" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ><HTML> <HEAD> <title>ajaxDataGrid</title> <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR"> <meta content="C#" name="CODE_LANGUAGE"> <meta content="JavaScript" name="vs_defaultClientScript"> <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema"> <style type="text/css">.AnJianID {
CURSOR: hand; TEXT-DECORATION: underline
}
BODY { FONT-SIZE: 12px; MARGIN: 0px; COLOR: #000000; LINE-HEIGHT: normal; BACKGROUND-COLOR: #ffffff}TD { FONT-SIZE: 12px}.dg_item { BACKGROUND: #ffffff; BORDER-COLLAPSE: separate}.tdbg-dark { BORDER-RIGHT: #000066 1px solid; BORDER-TOP: #000066 1px solid; BACKGROUND: #316ac5; BORDER-LEFT: #000066 1px solid; BORDER-BOTTOM: #000066 1px solid}.tdbg { BACKGROUND: #ffffff; COLOR: black; BORDER-BOTTOM: #000000 1px solid; BORDER-COLLAPSE: separate}
</style> <script language="javascript"> //初始化表格 function Init() { //alert('1'); divDataGrid1.innerHTML=ajaxDataGrid.GetTableOuterHTML().value; getdata(); } //得到数据 function getdata() { var ss=ajaxDataGrid.GetDataXML().value; var aa='<xml id="xmlData">'+ss+'</xml>'; //xml的ID是表格的数据源 //alert(aa); divDataGrid.innerHTML=aa; } // function InTo(ID) { window.open("test.aspx?ID="+ID.innerText); } //选择所有 function SelectAll (chkVal, idVal) { var frm = document.forms[0]; for (i=0; i<frm.length; i++) { if (idVal.indexOf ('chkAll') != -1) { if(chkVal == true) { frm.elements[i].checked = true; } else { frm.elements[i].checked = false; } } else if (idVal.indexOf ('mychk') != -1) { if(frm.elements[i].checked == false) { frm.elements[1].checked = false; } } } } //删除数据 function del() { var tmp=document.getElementsByName("mychk"); var strId = new String(); var n = 0; for(var i=0; i<tmp.length; i++) { if(tmp[i].checked) { strId += tmp[i].parentElement.parentElement.childNodes(1).innerText + ","; n++; } } var s=ajaxDataGrid.DelData(strId).value; if(s!="0") { alert("删除成功"); getdata(); //重新绑定数据 } else { alert("删除失败"); } } //编辑数据,转到另一页面 function editItemToURL(strtd) { //alert(strtd.childNodes(2).innerText); //将第一列的值传到另一页面 window.open("test.aspx?ID="+strtd.childNodes(2).innerText) } //编辑数据,得到ID在当前编辑 function editItem(strtd) { var strId; strId=strtd.parentElement.parentElement.childNodes(1).innerText alert(strId); } //直接删除数据 function deleteItem(strtd) { var istrue=window.confirm('确定要删除此记录吗?'); if(istrue) { var strId; strId=strtd.parentElement.parentElement.childNodes(1).innerText var result=ajaxDataGrid.DeleteData(strId).value; //alert(result); if(result=="1") { getdata(); //alert('成功删除'!); } else { alert('删除失败!'); } } } </script> </HEAD> <body onload="Init()" MS_POSITIONING="GridLayout"> <form id="Form1" method="post" runat="server"> <TABLE id="Table1" style="Z-INDEX: 101; LEFT: 88px; POSITION: absolute; TOP: 24px" cellSpacing="1" cellPadding="1" width="80%" border="1"> <TR> <TD><INPUT onclick="getdata()" type="button" value="得到数据"> <INPUT onclick="document.all.DataGrid1.previousPage()" type="button" value="前一页"> <INPUT onclick="document.all.DataGrid1.nextPage()" type="button" value="后一页"><INPUT onclick="del()" type="button" value="删 除"></TD> </TR> <TR> <TD> <div id="divDataGrid"></div> <div id="divDataGrid1"><FONT face="宋体"></FONT></div> </TD> </TR> <TR> <TD> <div id="drpDIV"></div> </TD> </TR> </TABLE> </form> </body></HTML>using System;using System.Collections;using System.ComponentModel;using System.Data;using System.Drawing;using System.Web;using System.Web.SessionState;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.HtmlControls;using System.Data.OracleClient;using System.Text;using System.IO;using System.Data.SqlClient;namespace WebApplication1{ /// <summary> /// ajaxDataGrid 的摘要说明。 /// </summary> public class ajaxDataGrid : System.Web.UI.Page { protected System.Web.UI.HtmlControls.HtmlSelect drpS; protected System.Web.UI.HtmlControls.HtmlSelect drpC; protected System.Web.UI.HtmlControls.HtmlSelect drp_AS; protected System.Web.UI.HtmlControls.HtmlSelect drp_AC; protected System.Web.UI.WebControls.TextBox TextBox1; static string strTableName=""; private void Page_Load(object sender, System.EventArgs e) { // 在此处放置用户代码以初始化页面 Ajax.Utility.RegisterTypeForAjax(typeof(ajaxDataGrid)); Session["strTableName"]=Request.QueryString["TableName"].ToString(); strTableName=Session["strTableName"].ToString(); }
Web 窗体设计器生成的代码 //得到表TableName的所得数据，以XML字符串返回 [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)] public string GetTableOuterHTML() { // string strcon="data source=sundun3;uid=lsa_ga;pwd=sundun";// OracleConnection conn=new OracleConnection(strcon); string strcon="server=(local);database=database;uid=sa;pwd="; SqlConnection conn=new SqlConnection(strcon); string strSelect=string.Format("select bianhao,xingming,xingbie from {0}",Session["strTableName"].ToString());// OracleDataAdapter da=new OracleDataAdapter(strSelect,conn); SqlDataAdapter da=new SqlDataAdapter(strSelect,conn); DataSet ds=new DataSet(); da.Fill(ds); return GetTableOuterHTML(ds.Tables[0].DefaultView); } //由一个数据视图得到该表的表头及所有数据，以XML格式的表字符串返回 private string GetTableOuterHTML(DataView dv) { StringBuilder ret = new StringBuilder(); ret.Append("<table id='DataGrid1' dataSrc='#xmlData' cellspacing=1 cellpadding=4 border=1 dataPageSize=10 width=90%><THEAD>" ); ret.Append("<tr>"); ret.Append("<td width='50'> <input type='checkbox' id='chkAll' onclick='SelectAll(this.checked, this.id)'></td> "); //标题 foreach(System.Data.DataColumn dc in dv.Table.Columns ) { if(dc.Ordinal==1) //该列隐藏 //ret.Append("<td style=\"DISPLAY: none\">"+dc.ColumnName+"</td>"); //注意，这里要是定义了某一列隐藏，在表格里也要相应的隐藏 ret.Append("<td >"+dc.ColumnName+"</td>"); else ret.Append("<td>"+dc.ColumnName+"</td>"); } ret.Append("</THEAD></tr>"); //这时是视图中筛选后的数据 ret.Append(GetRowOuterHTML(dv)); ret.Append("</table>"); return ret.ToString (); } //将字段绑定到表格里 private string GetRowOuterHTML(DataView dv) { StringBuilder sbtable=new StringBuilder(); sbtable.Append("<tr onmouseover=\"this.className='tdbg-dark';\" onmouseout=\"this.className='tdbg';\" ondblclick=\"editItemToURL(this)\">"); sbtable.Append("<td width='5'> <input type='checkbox' id='mychk'></td> "); foreach(System.Data.DataColumn dc in dv.Table.Columns) { if(dc.Ordinal==1) //将第二列设为超连接,CHECKBOX不算 { sbtable.Append("<td ><span dataFld="+dc.ColumnName+" title='查看详细信息' class=\"AnJianID\" OnClick='InTo(this)' class=\"dg_item\""); } else { sbtable.Append("<td ><span dataFld="+dc.ColumnName+" class=\"dg_item\""); } //sbtable.Append(tem); sbtable.Append("></span></td>"); } sbtable.Append("<td width='5'> <input type='button' value='编辑' onClick=\"editItem(this)\"></td> "); sbtable.Append("<td width='5'> <input type='button' value='删除' onClick=\"deleteItem(this)\"></td> "); sbtable.Append("</tr>"); return sbtable.ToString(); } [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)] public string GetDataXML() {// string strcon="data source=sundun3;uid=lsa_ga;pwd=sundun";// OracleConnection conn=new OracleConnection(strcon); string strcon="server=(local);database=database;uid=sa;pwd="; SqlConnection conn=new SqlConnection(strcon);// string strSelect=string.Format("select * from {0} where rownum<20 ",Session["strTableName"].ToString()); string strSelect=string.Format("select bianhao,xingming,xingbie from {0} ",Session["strTableName"].ToString());// OracleDataAdapter da=new OracleDataAdapter(strSelect,conn); //conn.Open(); SqlDataAdapter da=new SqlDataAdapter(strSelect,conn); DataSet ds=new DataSet(); da.Fill(ds); string text = ""; using(MemoryStream ms = new MemoryStream()) { ds.WriteXml(ms); ms.Position = 0; StreamReader sr = new StreamReader(ms); text = sr.ReadToEnd(); } return text; } 删除数据,循环删除 //将字符串分割成数组 删除数据,一行一行的删除 }}