利用Ajax實現的一個DataGrid例子

利用Ajax的技術非同步呼叫伺服器端的Web Service，產生一個在用戶端分頁的DataGrid。

首先來看看我們的Web Servcie，它利用傳遞過來的SQL產生資料集，採用標準的DataGrid控制項利用RenderControl輸出為標準的HTML。

 

namespace GenricAjaxWS
{
 [WebService(Namespace="http://localhost/GenricAjaxWS/")]
 public class GenricAjaxWS : System.Web.Services.WebService
 {
  SqlConnection con;
  SqlDataAdapter da;
  SqlCommand cmd;
  DataSet ds;

  public GenricAjaxWS()
  {
   InitializeComponent();
   con=new SqlConnection(ConfigurationSettings.AppSettings["Connect"]);
   da=new SqlDataAdapter("",con);
   cmd=new SqlCommand("",con);
   ds=new DataSet("TahaSchema");
   
  }

// 省略系統產生的

  
  /// <summary>
  /// 產生DataGrid的HTML
  /// </summary>
  [WebMethod]
  public string getGrid(string sqlStr,int pageIndex)
  {
   da.SelectCommand.CommandText=sqlStr;
   da=new SqlDataAdapter(sqlStr,con);
   da.Fill(ds,"myTable");

   DataGrid dataGrid = new DataGrid();
   dataGrid.AutoGenerateColumns = true;
   dataGrid.DataSource = ds.Tables["myTable"].DefaultView;
   dataGrid.AllowPaging = true;
   dataGrid.PageSize = 4;
   dataGrid.PagerStyle.Visible = false;
   dataGrid.CurrentPageIndex = pageIndex;
   try
   {
    dataGrid.DataBind();
   }
   catch(Exception)
   {
    
   }
   StringWriter wr = new StringWriter();
   HtmlTextWriter writer = new HtmlTextWriter(wr);
   dataGrid.RenderControl(writer);
   string gridHtml = wr.ToString();
   wr.Close();
   writer.Close();
   DropDownList ddl_Pager = new DropDownList();
   ddl_Pager.Attributes.Add("onchange","goToPage(this.value)");
   string pager="";
   for(int i=0;i<dataGrid.PageCount;i++)
   {
    ListItem lItem = new ListItem(i.ToString(),i.ToString());
    ddl_Pager.Items.Add(lItem);
    if(i==pageIndex)
    {
     pager += "[<span style=/"background-color:#ffdd11;width:20px;align:center/"><a href=/"#/" onclick=/"goToPage('"+i+"')/">"+i+"</a></span>]";
    }
    else
    {
     pager += "[<span style=/"width:20px;align:center/"><a href=/"#/" onclick=/"goToPage('"+i+"')/" >"+i+"</a></span>]";
    }
   }
   ddl_Pager.SelectedIndex = pageIndex;
   wr = new StringWriter();
   writer = new HtmlTextWriter(wr);
   ddl_Pager.RenderControl(writer);
   string pagerHtml = "<input type='button' value='<' onclick='goToPrevPage()'>";
   pagerHtml += wr.ToString();
   pagerHtml += "<input type='button' value='>' onclick='this.disabled=goToNextPage()'>";
   wr.Close();
   writer.Close();
   return pager+pagerHtml+"<br>"+gridHtml;   
  }
 }
}

 

在利用Ajax來完成一個非同步Web Service。

AjaxFuncs.js

var xmlhttp;
var ph;
var fillGrid_Str_SQL="";
var currentPageIndex ;
function fillGrid(myPH,str_Sql,pageIndex){ 
 ph = window.document.getElementById(myPH);
 fillGrid_Str_SQL = str_Sql;
 currentPageIndex = pageIndex;

// Web Service調用的URL
 var url = "http://localhost/GenricAjaxWS/GenricAjaxWS.asmx/getGrid?sqlStr="+str_Sql+"&pageIndex="+pageIndex;

 if(window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
        xmlhttp.onreadystatechange=fillGrid_Change;
        xmlhttp.open("GET",url,true);
        xmlhttp.send(null);
    }
    else if (window.ActiveXObject)
        {
        try
            {
            xmlhttp= new ActiveXObject("Msxml2.XMLHTTP");
            }
        catch(e)
            {
            try
            {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){}
        }
                        
        if(xmlhttp)
        {
            try
            {
            xmlhttp.onreadystatechange=fillGrid_Change;
            xmlhttp.open("GET",url,false);
            xmlhttp.send();
            }
            catch(e){} 
        }
    }
}

function fillGrid_Change()
{
 if(xmlhttp.readyState==4&&xmlhttp.status==200)
 {

// 輸出Web Service返回的標準HTML語句
  var row =  xmlhttp.responseXML.selectNodes(".//"); 
  ph.innerHTML = row[1].text;
 }
}

function goToPage(pageIndex){
 fillGrid(ph.id,fillGrid_Str_SQL,pageIndex)
}

function goToNextPage(){
 try{ 
  fillGrid(ph.id,fillGrid_Str_SQL,parseInt(currentPageIndex)+1);
  return false;
 }
 catch(e){
  return true;
 }
}

function goToPrevPage(){
 fillGrid(ph.id,fillGrid_Str_SQL,parseInt(currentPageIndex)-1)
}

最後就是用戶端的頁面了，非常簡單

<html>
  <head>
    <title>AjaxGrid</title>
  <script language="javascript" type="text/javascript" src="ajaxFuncs.js"></script>
  </head>
  <body MS_POSITIONING="GridLayout" onload="fillGrid('myPH','select * from employee',1)">
    <form id="Form1" method="post" runat="server">
  <div id="myPH" ></div>  
     </form>
  </body>
</html>