摘? 要 本文主要闡述了UltraWebGrid 2005控件在實際項目開發中的應用,這里以大慶石化公司煉油廠生產調度系統為例詳細描述了UltraWebGrid控件的原理以及它的使用方法和技巧，還特別介紹了以Excel為數據源的綁定方法，以及應用JAVASCRIP實現了光標在UltraWebGrid cell中回車后縱向行走的方法。?

關鍵詞 ASP.NET；Microsoft Visual Studio .NET 2003；c#；UltraWebGrid
??? 自公司宣布采用.NET開發項目以來，在不到兩年得時間里，已經從戰略變成現實。先后開發了總廠設備管理系統、養老保險管理系統、公司調度管理系統、總廠人力資源管理系統等，在這兩年ASP.NET項目開發的過程中，UltraWebGrid 控件扮演了非常重要的角色，幾乎每個頁面都用到了UltraWebGrid控件。DataGrid Web服務器控件以表格式布局顯示數據。提供到 ADO.NET 數據集的用戶界面，該用戶界面顯示表格式數據并允許對數據源進行更新。當將UltraWebGrid控件設置為有效的數據源時，該控件被自動填充，同時根據數據的形狀創建列和行。UltraWebGrid控件可用于顯示單個表或顯示一組表之間的分層關系。另外UltraWebGrid控件還擁有不斷更新強大的屬性編輯器，通過屬性設置就可以實現特定的功能。
一、?基本原理
??? ASP.NET服務器控件包括HTML控件和Web控件，UltraWebGrid屬于ASP.NET WEB控件，是基于數據源生成動態網頁的數據柵格。它的層次關系如圖1所示：
????????????????????????? 圖1 UltraWebGrid所在位置的層次關系圖
??? UltraWebGrid控件可以呈現多列的、完全模板化的表格，目前在多用性方面超出了其他所有數據綁定控件。它提供的用戶界面很接近Microsoft Excel 工作表。通過使用UltraWebGrid控件，可以創建簡單的數據綁定列來顯示從數據源檢索的數據，也可以創建模板列來設計單元格內容的布局，最后，基于命令的列使您可以向表格中添加特定的功能。它的基本使用方法如下：
??? 數據綁定。UltraWebGrid Web 服務器控件必須通過其 DataSource 屬性綁定到數據源，否則它將無法在頁面上呈現。UltraWebGrid的典型數據源為 DataSet 和數據讀取器。可使用工具箱中提供的數據源，如 DataSet 或 DataView 類。在微軟推出2004和2005的新控件中，數據結構不僅可以是簡單的單層結構也可以是有層次的多層結構。UltraWebGrid可以象樹控件一樣有層次的顯示數據。
??? 外觀設置。可以通過預置外觀和外觀瀏覽器來實現。預置外觀是通過選擇一個.XML文件（PreSet）來設置整個UltraWebGrid 風格。非常方便快捷，但有時不能完全滿足用戶的需求。那么就可以通過外觀瀏覽屬性生成器來編輯外觀。通過這個外觀瀏覽模塊可以設置組成UltraWebGrid 的各個元素的樣式屬性，如backcolor,bordercolor,font等來實現UltraWebGrid外觀設置。UltraWebGrid的元素主要包括 header,footer,row,select row,item cell等。
???? 事件模型是對UltraWebGrid 的動作做出響應。可以對這些動作進行編程控制，來實現所需要的功能。事件可分為：客戶端事件和服務器端事件，這使它的功能變得更加強大。
??? 特殊功能。通過設置屬性來實現UltraWebGrid的一些特殊功能。如只定用戶是否可以移動列（AllowColumnMoving），改變列的寬度（AlloColumnSizing），對數據進行排序（AllowSorting），分頁（AllowPageing）等。其步驟如圖2所示：

?????????????????????????????????? 圖2 控件的基本使用方法
二、?使用方法和技巧
??? 1.添加UltraWebGrid控件
??? 在VS.NET中新建一個Web工程，之后在工具箱中，鼠標右鍵彈出的菜單中，選擇“添加新項”，在自定義工具箱中，選擇UltraWebGrid控件（注意選擇的是命名空間為Sysetem Web UI webcontrol的命名空間），按“確定”后，就可以在工具箱中出現UltraWebGrid控件了。將UltraWebGrid控件拖拽到ASP.NET WEB頁設計器中，進入HTML頁將看到導入名稱空間：
<%@ import namespace="Sysetem Web UI webcontrol"%>

'注冊這個名稱空間并為其給定一個TagPrefix,以便于對這個控件庫中的控件進行定義

<%@ Register TagPrefix="igtbl" Namespace="Infragistics.WebUI.UltraWebGrid" Assembly="Infragistics.WebUI.UltraWebGrid.v5.1, Version=5.1.20051.37, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
%>
??? 2.數據綁定
??? (1)典型數據源綁定：
??? 可以使用 DataSource 屬性來綁定 DataTable 對象（或從 DataTable 派生的對象）。在化工信息項目中是這樣綁定UltraWebGrid數據源的,定義一個DataSet并實例化一個DataCommand,DataCommand在封裝類中已經進行了定義。編寫一個綁定函數，在需要綁定UltraWebGrid時調用該函數，實現的代碼如下：

DataSet ds=new DataSet();//定義一個DataSet
DataCommand command=new DataCommand();//事例化一個DataCommand
#region 數據綁定
private void WebBind()
{
ds=command.ReturnDataSet("select rownum 序號,k.* from (select? *? from "+this.ViewState["TableName"].ToString()+"? where "+this.ViewState["dp_id"].ToString()+" and bs="+this.DropDownList1.SelectedValue+"? order by ord) k ","grid");
ds.Tables["grid"].DefaultView.Sort="序號";
UltraWebGrid1.DataSource=ds.Tables["grid"].DefaultView;
UltraWebGrid1.DataBind();
}
#endregion

??? 其中ds=command.ReturnDataSet("…….”,” grid”)是向ds數據集中添加一個名字為grid的表。然后將這張表作為UltraWebGrid的數據源。

??? （2）特殊數據源綁定
??? 在做調度管理系統中的數據接口管理模塊時，就遇到了要將Excel作為UltraWebGrid 數據源綁定到UltraWebGrid中，運行界面如圖3所示。
?

圖3 數據接口管理模塊的數據源綁定
??? 解決辦法如下：在頁面中點擊“瀏覽”選擇要導入的Excel表后，點擊“裝載”按鈕將Excel中的數據綁定到UltraWebGrid中顯示。下面是“裝載”按鈕中click事件的代碼。

String sConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;" +"Data Source='" + name + "';" +"Extended Properties=Excel 5.0;";
OleDbConnection objConn = new OleDbConnection(sConnectionString);
objConn.Open();
OleDbCommand objCmdSelect =new OleDbCommand("SELECT * FROM [Sheet1$]", objConn);
OleDbDataAdapter objAdapter1 = new OleDbDataAdapter();
objAdapter1.SelectCommand = objCmdSelect;
DataSet objDataset1 = new DataSet();
objAdapter1.Fill(objDataset1, "XLData");
string[] sql_column =ViewState["sql_column"].ToString().Split(",".ToCharArray());
for (int i =0;i<sql_column.Length;i++)
{
objDataset1.Tables[0].Columns[i].ColumnName = sql_column[i].ToString();
}
this.UltraWebGrid1.DataSource = objDataset1.Tables[0].DefaultView;
this.UltraWebGrid1.DataBind();
objConn.Close();
??? 3.綁定列
??? (1)列的類型
??? UltraWebGrid列主要分為模板列和綁定列，
??? 模板列：模板列是由<TemplateColumn>標記標識的。可以結合HTML和服務器控件來設計和定義布局。
綁定列：綁定列中包括按鈕列（Button）、鏈接列（Hyperlink）、CheckBox列、下拉列表列（DropdownList）等。
顯示效果如圖4所示：
?

圖4 綁定列之后的效果

??? （2）自動生成列
??? 如果將UltraWebGrid的AutoGenerateColumns屬性設為 默認值true ，則UltraWebGrid將自動生成列，生成列的原則是：為數據源中的每個字段創建一列；使用字段名稱創建列標題。?
??? （3）手動增加列
??? 如果將UltraWebGrid的AutoGenerateColumns屬性設為 false，則需要手動的添加列，點擊Add按鈕增加新列，然后在BaseColumnName,Key,Caption中輸入相應信息，如圖5所示：

?

圖5 手動增加列操作
??? 4.外觀設置
??? （1）通過Load Layout快速設置UltraWebGrid整體風格
??? 右鍵點擊UltraWebGrid選擇屬性，彈出屬性對話框后，在對話框的下方，點擊LoadLayout,進入Style presets界面，在Style下拉列表中選擇樣式，在選擇樣式的同時，UltraWebGrid效果在Preview中顯示，點Apply應用將此樣式應用到UltraWebGrid上。
??? （2）通過屬性設置器設置外觀
??? 右鍵點擊UltraWebGrid，選擇屬性，彈出屬性對話框后，在對話框的下方，點擊Qick Design
進入快速設計界面選擇Appearance Browser，將會看到UltraWebGrid 控件的用戶界面包括如圖6所示的幾種類型的項。在下拉列表中選擇要設置的項，在右邊的屬性欄設置響應的屬性，就可以得到你想要得外觀了。在這里就不一一介紹了。
?

圖6 用戶界面所包含的類型項
??? 5.事件模型
??? （1）UpdateCellBatch事件
??? 通過UpdateCellBatch事件對UltraWebGrid中的數據源進行更新。
??? 首先，在UltraWebGrid中增加新行：
Infragistics.WebUI.UltraWebGrid.UltraGridRow rw = new Infragistics.WebUI.UltraWebGrid.UltraGridRow();
UltraWebGrid1.Rows.Add(rw);?
??? 然后，在UltraWebGrid中刪除激活行：
this.UltraWebGrid1.DisplayLayout.ActiveRow.Delete();
??? 最后，更新修改數據。利用UpdateCellBatch事件記錄UltraWebGrid中曾經修改過的數據，然后通過command.Update更新到數據庫中。具體操作如下：在UltraWebGrid中添加UpdateCellBatch事件，右鍵點擊UltraWebGrid，選擇屬性，彈出屬性對話框后，在對話框的上方，選擇事件選項卡。在事件列表中找到UpdateCellBatch事件，雙擊進入編程頁面，完成事件的添加，在事件中填寫如下代碼：
if(Request.Params.Get("ButtonUpdate")=="保存")
{
DataRow row=null;
DataTable table=null;
object[] key = new object[2];
key[0] = UltraWebGrid1.Rows[e.Cell.Row.Index].Cells.FromKey("RQ").Value;
key[1] = UltraWebGrid1.Rows[e.Cell.Row.Index].Cells.FromKey("ID").Value;
table = dataSet12.Tables[e.Cell.Band.BaseTableName];
if(table==null)
return;
if (key!=null)?
row=table.Rows.Find(key);
if(row!=null)?
{
try
{
object newVal=e.Cell.Value;
string ColName=e.Cell.Column.BaseColumnName;
if(newVal==null||newVal.ToString()=="0")
{row[e.Cell.Column.Key]=0;}
else
{row[e.Cell.Column.Key]=newVal;}
}
catch(Exception ex)
{
Response.Write(ex.Message);
dataSet12.RejectChanges();
}
}
}

??? 然后在“存盤”按鈕的click事件中添加如下代碼：
#region//——存盤
private void ButtonUpdate_Click(object sender, System.EventArgs e)
{
try
{
DataCommand myDataCommand = new DataCommand();
myDataCommand.Update( mySql ,dataSet12.Tables[mySqlTable]);
this.UltraWebGrid1.DataBind();
}
catch(Exception updateError)
{?
Response.Write (updateError.StackTrace);
Response.Write ("<br><br>保存過程出錯！");
dataSet12.RejectChanges();
}

}
#endregion

??? 這樣就實現了數據的更新
??? （2） ClickCellButton事件
??? 應用ClickCellButton事件實現記錄的上移和下移，在UltraWebGrid中添加ClickCellButton事件，方法同上，事件中的核心代碼如下：
//上移
if(e.Cell.Column.Key.ToString()=="上移")
{
int i;
i=e.Cell.Row.Index;
if(i>0)
{
this.ViewState["Prev_Ord"]=Convert.ToString(UltraWebGrid1.Rows[i-1].Cells.FromKey("ORD").Text);
this.ViewState["Curr_Ord"]=Convert.ToString(UltraWebGrid1.DisplayLayout.Rows[i].Cells.FromKey("ORD").Text);?
string sql="update "+this.ViewState["TableName"].ToString()+"? set ord="+this.ViewState["Prev_Ord"].ToString()+" where id="+this.UltraWebGrid1.DisplayLayout.Rows[i].Cells.FromKey("ID").Text;
command.MyCommand(sql);
string sql1="update "+this.ViewState["TableName"].ToString()+"? set ord="+this.ViewState["Curr_Ord"]+" where id="+this.UltraWebGrid1.DisplayLayout.Rows[i-1].Cells.FromKey("ID").Text;
?????command.MyCommand(sql1);
?????WebBind();
?????UltraWebGrid1.Rows[i-1].Activate();
?????UltraWebGrid1.Rows[i-1].Selected=true;

????
????}
?????
???}
????//下移
???else
???{
????int i;
????i=e.Cell.Row.Index;
????if(i<UltraWebGrid1.DisplayLayout.Rows.Count-1)
????{
?????this.ViewState["Next_Ord"]=UltraWebGrid1.Rows[i+1].Cells.FromKey("ORD").Text;
?????this.ViewState["Curr_Ord"]=UltraWebGrid1.DisplayLayout.Rows[i].Cells.FromKey("ORD").Text;
?????string sql="update "+this.ViewState["TableName"].ToString()+"? set ord="+this.ViewState["Next_Ord"].ToString()+" where id="+this.UltraWebGrid1.DisplayLayout.Rows[i].Cells.FromKey("ID").Text;
?????command.MyCommand(sql);
?????string sql1="update "+this.ViewState["TableName"].ToString()+"? set ord="+this.ViewState["Curr_Ord"].ToString()+" where id="+this.UltraWebGrid1.DisplayLayout.Rows[i+1].Cells.FromKey("ID").Text;
?????command.MyCommand(sql1);
?????WebBind();
?????UltraWebGrid1.Rows[i+1].Activate();
?????UltraWebGrid1.Rows[i+1].Selected=true;

????}
???}

command.MyCommand(sql);
string sql1="update "+this.ViewState["TableName"].ToString()+"? set ord="+this.ViewState["Curr_Ord"]+" where id="+this.UltraWebGrid1.DisplayLayout.Rows[i-1].Cells.FromKey("ID").Text;
command.MyCommand(sql1);
WebBind();
UltraWebGrid1.Rows[i-1].Activate();
UltraWebGrid1.Rows[i-1].Selected=true;
}
}
//下移
else
{
int i;
i=e.Cell.Row.Index;
if(i<UltraWebGrid1.DisplayLayout.Rows.Count-1)
{
this.ViewState["Next_Ord"]=UltraWebGrid1.Rows[i+1].Cells.FromKey("ORD").Text;
this.ViewState["Curr_Ord"]=UltraWebGrid1.DisplayLayout.Rows[i].Cells.FromKey("ORD").Text;
string sql="update "+this.ViewState["TableName"].ToString()+"? set ord="+this.ViewState["Next_Ord"].ToString()+" where id="+this.UltraWebGrid1.DisplayLayout.Rows[i].Cells.FromKey("ID").Text;
command.MyCommand(sql);
string sql1="update "+this.ViewState["TableName"].ToString()+"? set ord="+this.ViewState["Curr_Ord"].ToString()+" where id="+this.UltraWebGrid1.DisplayLayout.Rows[i+1].Cells.FromKey("ID").Text;
command.MyCommand(sql1);
WebBind();
UltraWebGrid1.Rows[i+1].Activate();
UltraWebGrid1.Rows[i+1].Selected=true;
}
}

??? 6.特殊功能的實現
??? UltraWebGrid并不能完全滿足用戶的要求，在調度項目中就遇到了這樣一個問題，用戶要求在UltraWebGrid中回車后縱向輸入數據（即一列一列的輸入數據），然而在UltraWebGrid中回車后是橫向走的。下面介紹一下對于這一問題的解決方法：UltraWebGrid與JAVASCRIP相結合實現豎向錄入數據，在html中添加如下代碼：
<script language="javascript">
document.onkeyup = function keyCode()
?{ //設置行激活?
var parts;
?var cellId;
?var cell;?
var nextCellId;?
var nextCell;?
var gridName = "UltraWebGrid1";?
var grid = igtbl_getGridById(gridName);
?if(event.keyCode==38 )?
{ cellId = grid.ActiveCell;
?cell = igtbl_getElementById( cellId );
?parts = cellId.split("_"); nextCellId = parts[0]+"_"+(parseInt(parts[1])-1)+"_"+parts[2]; nextCell = igtbl_getElementById( nextCellId );?
if(nextCell==undefined) return;?
igtbl_setActiveCell( gridName,nextCell) igtbl_editCell(event,gridName,nextCell,event.keyCode) } if(event.keyCode==40 )?
{ cellId = grid.ActiveCell;
?cell = igtbl_getElementById( cellId ); parts = cellId.split("_");
?nextCellId = parts[0]+"_"+(parseInt(parts[1])+1)+"_"+parts[2];?
nextCell = igtbl_getElementById( nextCellId );?
if(nextCell==undefined) return; igtbl_setActiveCell( gridName,nextCell) igtbl_editCell(event,gridName,nextCell,event.keyCode)?
}
}
</script>

三、?結語
??? 本文介紹了最值得關注的 .NET 控件之一：DataGrid Web服務器控件。UltraWebGrid 適用于各種不同的現實情況，無論是要處理數據綁定和用戶編輯，還是僅涉及靜態文本顯示，都可以采用 UltraWebGrid。
參考文獻：
[1] KARLI WATSON, MARCO BELLINASO 等著.《C#入門經典》.清華大學出版社,2002年
[2] NIKHIL KOTHARI,VANDANA DATYE 等著.《ASP.NET服務器控件與組件開發》.機械工業出版社? ,2003年

總結

以上是生活随笔為你收集整理的UltraWebGrid控件在开发ASP.NET项目中的使用方法和技巧（转)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。