DataGrid控件應用之一ppt課件

1、第十一講第十一講 DataGridDataGrid控件運用之一控件運用之一教學內容教學內容 一、一、DataGrid控件概述控件概述二、數(shù)據字段列設計二、數(shù)據字段列設計三、超級鏈接列設計三、超級鏈接列設計四、按鈕列設計四、按鈕列設計五、五、DataGrid控件運用之一控件運用之一2教學目的教學目的v掌握掌握DataGrid控件數(shù)據字段列設計；控件數(shù)據字段列設計；v掌握掌握DataGrid控件超級鏈接列設計；控件超級鏈接列設計；v掌握掌握DataGrid控件按鈕列設計；控件按鈕列設計；v掌握購物車技術；掌握購物車技術；v學習學習DataGrid控件的初步運用?？丶某醪竭\用。3一、DataGri

2、d控件概述(1/8)vDataGrid控件的功能非常強大，可以對二維表中的數(shù)據顯示、排序和分頁等，還可以編輯和刪除數(shù)據，利用模板列可以向它參與各種子控件，實現(xiàn)非常復雜的功能。v(一)常用屬性v DataSource屬性：綁定到控件的數(shù)據源，可以是數(shù)組、數(shù)據集、數(shù)據視圖等。 v DataMember屬性：假設DataSource屬性指定的是一個數(shù)據集，那么DataMember屬性指定到該數(shù)據集的一個數(shù)據表。 v DataKeyField屬性：用于填充DataKey集合的數(shù)據源中的字段，普通應指定到數(shù)據表的主鍵字段。v SelectedIndex屬性：當前選定項的索引號，未選擇任何項時為-1。v

3、AutoGenerateColumns屬性：能否自動生成控件的數(shù)據綁定列，默以為true。4 AllowPaging屬性：設置能否翻開分頁功能，默以為false(不分頁)。 AllowCustomPaging屬性：設置能否翻開對自定義分頁的支持，默以為false。 BackImageUrl屬性：背景圖片的途徑及文件名。意味著控件可以運用一幅圖片作為背景。 ShowHeader屬性：能否顯示列標頭，默以為true。 ShowFooter屬性：能否顯示頁腳注，默以為false。 (二)常用事件 DataGrid控件的事件與DataList控件的事件有些類似。由于可以向控件內參與按鈕列和模板列等，子

4、控件的事件被反升至容器控件，這些事件稱為反升事件。例如CancelCommand、DeleteCommand、EditCommand、ItemCommand等都是，這些事件與子控件的關系同DataList控件。一、DataGrid控件概述(2/8)5ItemCommand事件：在控件生成事件時發(fā)生。向事件：在控件生成事件時發(fā)生。向DataGrid控件參與控件參與按鈕列控件時，其按鈕列控件時，其CommandName屬性可以設置成屬性可以設置成7.2節(jié)規(guī)定的名字，或節(jié)規(guī)定的名字，或程序員給定的名字。當這些按鈕被單擊時，都將引發(fā)程序員給定的名字。當這些按鈕被單擊時，都將引發(fā)ItemCommand事

5、件，事件，在這個事件處置程序中經過判別按鈕控件的在這個事件處置程序中經過判別按鈕控件的CommandName屬性確定引發(fā)屬性確定引發(fā)事件的按鈕所在列。事件的按鈕所在列。 SelectedIndexChanged事件：當前的選擇發(fā)生改動時激發(fā)。事件：當前的選擇發(fā)生改動時激發(fā)。 PageIndexChanged事件：當前頁索引發(fā)生改動時激發(fā)。事件：當前頁索引發(fā)生改動時激發(fā)。 ItemCreated事件：在控件內創(chuàng)建項時激發(fā)。假設要對控件內的子控事件：在控件內創(chuàng)建項時激發(fā)。假設要對控件內的子控件做某些初始設置時，那些代碼要寫在這個事件處置程序中。件做某些初始設置時，那些代碼要寫在這個事件處置程序中。

6、 (三三)HTML標志標志 asp:DataGrid id=DataGrid1runat=server DataSource= DataMember=employeeInfo DataKeyField=編號編號 一、DataGrid控件概述(3/8)6(四四)運用運用DataGrid控件的普通步驟控件的普通步驟 將將DataGrid控件拖入到頁面后，普通需求對其做以下任控件拖入到頁面后，普通需求對其做以下任務。務。 1.綁定數(shù)據綁定數(shù)據 為了在為了在DadaGrid表格中顯示數(shù)據源的數(shù)據，必需將控件表格中顯示數(shù)據源的數(shù)據，必需將控件綁定到數(shù)據源，數(shù)據源普通是一個數(shù)據集，它對應于一個數(shù)綁定到數(shù)據

7、源，數(shù)據源普通是一個數(shù)據集，它對應于一個數(shù)據庫。據庫。 運用數(shù)據銜接導游做數(shù)據銜接，便于之后在屬性窗口中運用數(shù)據銜接導游做數(shù)據銜接，便于之后在屬性窗口中設置屬性和對屬性生成器的操作。假設采用程序代碼銜接數(shù)設置屬性和對屬性生成器的操作。假設采用程序代碼銜接數(shù)據庫，在據庫，在DataGrid控件的屬性窗口和屬性生成器中將看不到控件的屬性窗口和屬性生成器中將看不到數(shù)據集、表和字段，不便于操作。數(shù)據集、表和字段，不便于操作。 運用數(shù)據銜接導游將數(shù)據庫運用數(shù)據銜接導游將數(shù)據庫MMIS的數(shù)據表的數(shù)據表employeeInfo銜接到頁面并生成數(shù)據集銜接到頁面并生成數(shù)據集dataSet11后，再后，再在在Da

8、taGrid1控件的屬性窗口指定控件的屬性窗口指定DataSource、DataMember和和DataKeyFiel屬性，操作見以下圖。屬性，操作見以下圖。 一、DataGrid控件概述(4/8)7一、DataGrid控件概述(5/8)8 雖然曾經指定了DataGrid控件的3個數(shù)據綁定屬性，此時還不能顯示數(shù)據，必需填充數(shù)據集，并調用DataBind方法進展數(shù)據綁定才干顯示數(shù)據。這個操作的代碼普通這樣寫： private void Page_Load(object sender, System.EventArgs e) if(!IsPostBack) sqlDataAdapter1.Fill

9、(dataSet11,employeeInfo); DataGrid1.DataBind(); 一、DataGrid控件概述(6/8)9 2.美化外觀美化外觀 為了加強為了加強DataGrid控件的表現(xiàn)力，需求對控件的外觀作必要的修飾。外控件的表現(xiàn)力，需求對控件的外觀作必要的修飾。外觀的美化任務可以經過屬性窗口設置外觀屬性或經過自動套用格式和運用屬觀的美化任務可以經過屬性窗口設置外觀屬性或經過自動套用格式和運用屬性生成器實現(xiàn)。性生成器實現(xiàn)。 運用自動套用格式來美化外觀的做法是運用自動套用格式來美化外觀的做法是:右擊控件，在彈出菜單上單擊右擊控件，在彈出菜單上單擊【自動套用格式】，然后選擇一種格

10、式，單擊【確定】?！咀詣犹子酶袷健浚缓筮x擇一種格式，單擊【確定】。 一、DataGrid控件概述(7/8)10 運用屬性生成器不但可以設置DataGrid控件的外觀，還可以確定控件的行為方式，如指定分頁，參與按鈕列、超級鏈接列等。右擊控件，再在彈出菜單上單擊【屬性生成器】，經過“格式和“邊框 對控件外觀的設置，如以下圖。 一、DataGrid控件概述(8/8)11二、數(shù)據字段列設計二、數(shù)據字段列設計 (1/3) DataGrid控件的數(shù)據字段列是默許的列，假設沒有數(shù)據控件的數(shù)據字段列是默許的列，假設沒有數(shù)據字段列，字段列，DataGrid控件就不能顯示數(shù)據源的數(shù)據。默許的情控件就不能顯示數(shù)據

11、源的數(shù)據。默許的情況下在表格中顯示數(shù)據集中的一切字段，每個字段為一列，列況下在表格中顯示數(shù)據集中的一切字段，每個字段為一列，列的順序為字段在數(shù)據集中的順序。留意，僅支持數(shù)值類型、字的順序為字段在數(shù)據集中的順序。留意，僅支持數(shù)值類型、字符串類型、日期類型和符串類型、日期類型和Decimal類型的顯示，其他類型類型的顯示，其他類型例如圖片無法直接顯示在單元格中。例如圖片無法直接顯示在單元格中。 DataGrid控件的控件的AutoGenerateColumns屬性設置能否屬性設置能否在控件中自動生成數(shù)據字段列，默以為在控件中自動生成數(shù)據字段列，默以為true，顯示一切字段列。，顯示一切字段列。 在

12、控件中有選擇性地顯示某些數(shù)據字段列，有在控件中有選擇性地顯示某些數(shù)據字段列，有3種方法可種方法可選：選： 1.在提取數(shù)據到數(shù)據集中時，用在提取數(shù)據到數(shù)據集中時，用select查詢語句設定挑選字段查詢語句設定挑選字段名。如名。如“select 姓名，工資姓名，工資 from employeeInfo僅提取姓僅提取姓名和工資到數(shù)據源，未來僅顯示姓名和工資這兩個字段，并且名和工資到數(shù)據源，未來僅顯示姓名和工資這兩個字段，并且SQL語句中字段名的陳列順序與語句中字段名的陳列順序與DataGrid表格控件中數(shù)據字表格控件中數(shù)據字段列的順序一樣。假設還需求更多的字段參與其他運算，那就段列的順序一樣。假設還

13、需求更多的字段參與其他運算，那就需求另找途徑。需求另找途徑。 12 2.在HTML標志中設定。設置控件的AutoGenerateColumns屬性為false，取消自動生成數(shù)據字段列的功能，在DataGrid控件的HTML標志中添加數(shù)據字段列標志。 3.運用屬性生成器。這種方法方便快捷。 單擊DataGrid控件屬性窗口下部的“屬性生成器超鏈接，翻開控件的屬性生成器，在左側的工程框中選擇“列，如以下圖。 二、數(shù)據字段列設計二、數(shù)據字段列設計 (2/3) 去掉“在運轉時自動創(chuàng)建列前小方框內的“ 。 在“可用列 中選擇“數(shù)據字段，單擊【】按鈕將該字段移入已選池中。13 已選池右側的“、“和“ 按鈕

14、用于調整列的顯示順序或移去已選字段。在 “BoundColumn屬性區(qū)內，可以編輯已選池中某列的屬性。設置的DataGrid表格的顯示效果如以下圖 二、數(shù)據字段列設計二、數(shù)據字段列設計 (3/3)14三、超級鏈接列設計三、超級鏈接列設計(1/5) 向DataGrid控件添加超級鏈接列的任務普通在屬性生成器中進展。下例中運用product數(shù)據庫的fruitInfo數(shù)據表作為DataGrid控件的數(shù)據源。在這個數(shù)據表中，有一個“概略網頁URL字段。假定在“概略網頁中詳細引見了這種水果的產地、種類、營養(yǎng)價值等相關資料。將每種水果的概略網頁的URL記錄于“概略網頁URL字段中。在DataGrid表格中

15、顯示各種水果的少量字段，添加一個超級鏈接列，使可以導航到各種水果的概略網頁上去。 首先將各水果的概略網頁設計好，每種水果一頁或多種水果共用一頁，并將每頁的URL記錄到fruitInfo數(shù)據表對應的“概略網頁URL字段中去?？梢赃\用相對途徑，假設某概略網頁的文件名為WebForm2.aspx，可直接在其“概略網頁URL字段中填入“WebForm2.aspx 。 15設計主頁：向頁面拖入一個DataGrid控件創(chuàng)建對象DataGrid1，運用數(shù)據銜接導游將網頁銜接到數(shù)據庫product，提取fruitInfo數(shù)據表的一切數(shù)據到數(shù)據集dataSet11中，將它作為控件DataGrid1的數(shù)據源。三、

16、超級鏈接列設計三、超級鏈接列設計(2/5) 翻開控件DataGrid1的屬性生成器，如右圖。為控件指定商品編號、商品稱號、產地、等級和單價作為數(shù)據字段。再向控件添加一個超級鏈接列，導航到每種水果的概略網上。16在“可用列列表中選擇“超級鏈接列，單擊【】右移按鈕將超級鏈接列參與到選定的列中，就可以為該列編輯HyperLinkColumn屬性了。對HyperLinkColumn屬性的各工程闡明如下： 頁眉文本：即該列的標頭文本，闡明該列是什么內容。頁眉圖象：頁眉也可以用一幅圖片表示，可單擊右側的“閱讀按鈕找到圖片文件。假設既指定頁眉文本又指定頁眉圖象僅顯示頁眉圖象。頁腳文本：頁的腳注，對列中內容的

17、補充闡明。假設設置了該項內容，需求將DataGrid控件的ShowFooter屬性設置為true。本例頁腳文本中輸入“不可不看。 文本：該列中各單元格中以超鏈接方式顯示的文本。假設希望該列各單元格顯示一樣的超鏈接文本，就在這里設置。本例輸入“更多概略。 三、超級鏈接列設計三、超級鏈接列設計(3/5) 17文本字段：假設要該列中顯示不同的超鏈接文本，就需文本字段：假設要該列中顯示不同的超鏈接文本，就需求指定該屬性。如表格的每行為一個大學的資料，在清華大求指定該屬性。如表格的每行為一個大學的資料，在清華大學這一行的超鏈接要顯示學這一行的超鏈接要顯示“去清華去清華，就需求在數(shù)據表中專，就需求在數(shù)據表

18、中專門設計一列保管這個內容，在屬性生成器中就將超級鏈接列門設計一列保管這個內容，在屬性生成器中就將超級鏈接列的的“文本字段文本字段指定為該列。也可以借用數(shù)據表的已有字段，指定為該列。也可以借用數(shù)據表的已有字段，如用如用“學校稱號學校稱號 ，那超級鏈接列各單元格顯示的是各學校，那超級鏈接列各單元格顯示的是各學校名字的超鏈接文本。假設既指定名字的超鏈接文本。假設既指定“文本文本又指定又指定“文本字段文本字段，該列顯示的超鏈接文本為，該列顯示的超鏈接文本為“文本字段文本字段的內容。的內容。 URL：程序運轉后單擊該列的超鏈接標志要導航去的：程序運轉后單擊該列的超鏈接標志要導航去的URL。URL字段：

19、假設單擊該列不同的單元格要導航到不同的字段：假設單擊該列不同的單元格要導航到不同的位置，就需求設置該項內容。位置，就需求設置該項內容。三、超級鏈接列設計三、超級鏈接列設計(4/5) 18v以下圖是以上設計的DataGrid控件的運轉效果。 可以發(fā)現(xiàn)，運用超級鏈接列并不需求為此編寫任何后臺代碼，顯得簡單易行。事物總有兩面性，不需求編寫代碼當然簡單，但假設在導航到其他頁面之前需求編寫一些代碼做數(shù)據處置的話，這些代碼就沒有可供利用的事件，這時就要運用按鈕列才可以做到。 三、超級鏈接列設計三、超級鏈接列設計(5/5) 19四、按鈕列設計四、按鈕列設計設計按鈕列普通也在屬性生成器中進展，翻開屬性生成器的

20、“列選項，如右圖。 在“可用列中選擇“按鈕列不要展開它，將它移到“選定的列中。再設置ButtonColumn屬性， “按鈕類型選擇項可選PushButton(彈壓按鈕)或LinkButton(鏈接按鈕)。 20五、五、 DataGrid控件運用之一控件運用之一(1/9) v以下例如將水果信息展如今一個DataGrid控件中，控件有“買1公斤和“退1公斤 兩個按鈕列。另一個DataGrid控件實現(xiàn)顯示購物車信息。效果圖如下。 21(一一)展現(xiàn)商品設計展現(xiàn)商品設計 新建一個新建一個ASP.NET的的Web運用程序工程，拖入運用程序工程，拖入2個個DataGrid控件到頁面，左邊的控件到頁面，左邊的

21、DataGrid1用于展現(xiàn)商品，右用于展現(xiàn)商品，右邊的邊的DataGrid2用作顯示購物車數(shù)據。運用數(shù)據銜接導游將用作顯示購物車數(shù)據。運用數(shù)據銜接導游將頁面銜接到數(shù)據庫頁面銜接到數(shù)據庫product，提取數(shù)據表，提取數(shù)據表fruitInfo的一切數(shù)的一切數(shù)據到數(shù)據集據到數(shù)據集dataSet11中。在屬性窗口指定中。在屬性窗口指定DataGrid1的數(shù)的數(shù)據源為數(shù)據集據源為數(shù)據集dataSet11。 為控件為控件DataGrid1確定控件的數(shù)據字段列如上圖。確定控件的數(shù)據字段列如上圖。 (二二)按鈕列設計按鈕列設計 翻開屬性生成器的翻開屬性生成器的“列列選項，為控件選項，為控件DataGrid1

22、參與參與2個按鈕列個按鈕列“買買1公斤公斤和和“退退1公斤公斤，設計過程同上。，設計過程同上。 五、五、 DataGrid控件運用之一控件運用之一(2/9) 22后臺代碼后臺代碼 首先為首先為Form1類定義兩個字段級變量，用于購物車的表對象和數(shù)據視類定義兩個字段級變量，用于購物車的表對象和數(shù)據視圖。圖。 private DataTable ShopCart; private DataView ShopCartView; 頁面加載時定義購物車對象，對頁面加載時定義購物車對象，對DataGrid1和和DataGrid2做數(shù)據綁定。做數(shù)據綁定。 private void Page_Load(obj

23、ect sender, System.EventArgs e) if(SessionShopCart=null) ShopCart=new DataTable(); ShopCart.Columns.Add(new DataColumn(編號編號,typeof(string); ShopCart.Columns.Add(new DataColumn(品名品名,typeof(string); ShopCart.Columns.Add(new DataColumn(單價單價,typeof(double); ShopCart.Columns.Add(new DataColumn(數(shù)量數(shù)量,typeo

24、f(double); ShopCart.Columns.Add(new DataColumn(金額金額,typeof(double); SessionShopCart=ShopCart; 五、五、 DataGrid控件運用之一控件運用之一(3/9) 23else ShopCart=(DataTable)SessionShopCart; ShopCartView=new DataView(ShopCart); DataGrid2.DataSource=ShopCartView; DataGrid2.DataBind(); if(!IsPostBack) this.Label2.Visible=f

25、alse; this.Label3.Visible=false; this.LabelMoney.Visible=false; this.DataGrid2.Visible=false; sqlDataAdapter1.Fill(dataSet11,fruitInfo); DataGrid1.DataBind(); 五、五、 DataGrid控件運用之一控件運用之一(4/9) 24 按鈕列“買1公斤和“退1公斤的CommandName屬性值不是規(guī)定的規(guī)范名字，因此它們的單擊事件被反升至控件 DataGrid1的ItemCommand事件中，單擊【買1公斤】或【退1公斤】按鈕的事件處置程序都要寫

26、在DataGrid1_ItemCommand事件中，經過判別兩個按鈕列的CommandName屬性來區(qū)分單擊的終究是“買1公斤還是“退1公斤。 private void DataGrid1_ItemCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e) string BH=e.Item.Cells2.Text; string PM=e.Item.Cells3.Text; double JG=double.Parse(e.Item.Cells5.Text); if(emandName=buy) Sh

27、opCartView.Sort=編號; int n=ShopCartView.Find(BH); if(n=-1) 五、五、 DataGrid控件運用之一控件運用之一(5/9) 25 DataRow dr=ShopCart.NewRow(); dr編號=BH; dr品名=PM; dr單價=JG; dr“數(shù)量=1; dr金額=JG; ShopCart.Rows.Add(dr); this.Label2.Visible=true; this.Label3.Visible=true; this.LabelMoney.Visible=true; this.DataGrid2.Visible=true; else ShopCartViewn數(shù)量=(double)ShopCartViewn數(shù)量+1; ShopCartViewn金額=(double)ShopCartViewn金額+JG; ShopCartView.Sort=null; 五、五、 DataGrid控件運用之一控件運用之一(6/9) 26if(emandName=remove) ShopCartView.Sort=編號; int n=ShopCartView.Find(BH); if(n=0) if(double)ShopCartViewn“數(shù)量1) Sh