ASP.NET 網頁製作教本 – 從基本語法學起

ASP.NET ASP.NET 網頁製作教本網頁製作教本 – – 從基本語法學起從基本語法學起

第第 8 8 章章 DataGrid DataGrid 與與 DataTableDataTable

8-1 8-1 DataTable DataTable 的資料結構的資料結構

DataTable DataTable 的資料結構的資料結構

DataTable DataTable 的建構：開啟資料的建構：開啟資料庫庫

員工資料成績單

股票代號股票名稱收盤價漲跌最高價最低價成交量0001 鴻運 18.7 -0.3 18.8 18.6 35500002 福元 24.2 -0.5 24.6 24.2 118010003 成長 24.9 -0.1 25 24.9 1770004 國民 21.3 -0.4 21.5 21.1 17380005 成功 17.2 -0.4 17.5 17.2 1750006 鴻福 17.5 -0.3 17.6 17.5 980011 和信 16.1 -0.3 16.3 15.6 7240012 多元 13.35 -0.05 13.4 13.1 214090013 永昌 10.9 -0.15 11 10.8 19760014 統信 17.9 -0.1 18 17.8 7370015 富邦 17.6 -0.3 17.8 17.5 27140018 怡富 19.6 -0.6 20 19.6 6630

股票行情表

Table01.aspxTable01.aspx Part I Part I



<Html>

<Body BgColor="White">

<H3>DataTable的建構：開啟資料庫 <HR></H3>

<asp:Label runat="server" id="Msg" /><p>

<HR></Body>

</Html>

Table01.aspxTable01.aspx Part II Part II<script Language="VB" runat="server">

Sub Page_Load(sender As Object, e As EventArgs)

Dim Table As System.Data.DataTable

Table = OpenMdbTable( "Sample.mdb", " 股票行情表 " ) If Not Table Is Nothing Then Msg.Text = "已經建構好 DataTable!" End If

End Sub

</script>

Table02.aspxTable02.aspx Part I Part I<%@ Import Namespace="System.Data" %>


<Html>


<H3>DataTable 的建構：開啟資料庫 <HR></H3>

<asp:Label runat="server" id="Msg" /><p>

<HR></Body>

</Html>

Table02.aspxTable02.aspx Part II Part II<script Language="VB" runat="server">


Dim Table As DataTable

Table = OpenMdbTable( "Sample.mdb", "股票行情表 " )

If Not Table Is Nothing Then

Msg.Text = "已經建構好 DataTable!"

End If

End Sub

</script>

DataTable DataTable 的建構：逐欄逐列的建構：逐欄逐列填入資料填入資料

將資料填入將資料填入 DataTable DataTable 大致可以分成大致可以分成三道程序：三道程序：

1.1. 建立建立 DataTable DataTable 物件物件：使用：使用 New New DataTable DataTable 的方式先建立好物件的方式先建立好物件。。

2.2. 建立欄位建立欄位：包含欄位抬頭及其資料型別：包含欄位抬頭及其資料型別的建立的建立。。

3.3. 加入資料列加入資料列：根據實際的資料列數：根據實際的資料列數 (( 或或稱「資料筆數」稱「資料筆數」 )) ，逐列加入於，逐列加入於DataTableDataTable 之中。之中。

實例實例 (1)(1)

有四個陣列資料如下：有四個陣列資料如下：

Dim 姓名 () = { “ 陳桶一” , “ 黃光權” , “ 胡生妙” , “王為全” , _ “ 李日正” , “ 劉德菖” , “ 方正一” , “ 劉康寶” , _ " 謝掬花 ", " 王美蘭 ", " 徐小噹 ", " 葉小毛 " }Dim 國文 () = { 90, 58, 41, 95, 59, 28, 98, 0, 95, 41, 91, 0 }Dim 英文 () = { 76, 77, 14, 97, 66, 11, 100, 0, 74, 46, 99, 10 }Dim 數學 () = { 98, 75, 33, 87, 57, 33, 100, 10, 89, 49, 84, 0 }

實例實例 (2)(2) 將其填入將其填入 DataTable DataTable 成為以下結構：成為以下結構：

姓名國文英文數學陳桶一 90 76 98

黃光權 58 77 75

胡生妙 41 14 33

王為全 95 97 87

李日正 59 66 57

劉德菖 28 11 33

方正一 98 100 100

劉康寶 0 0 10

謝掬花 95 74 89

王美蘭 41 46 49

徐小噹 91 99 84

葉小毛 0 10 0

Table03.aspx Table03.aspx 節錄節錄 Part I,IIPart I,II' Part 1: 宣告並且建立 DataTable 物件

Dim Table As New DataTable

' Part 2: 建立欄位

Table.Columns.Add(New DataColumn("姓名 ", GetType(String)))

Table.Columns.Add(New DataColumn("國文 ", GetType(Integer)))

Table.Columns.Add(New DataColumn("英文 ", GetType(Integer)))

Table.Columns.Add(New DataColumn("數學 ", GetType(Integer)))

Table03.aspx Table03.aspx 節錄節錄 Part IIIPart III' Part 3: 加入資料列

For I = 0 To UBound(姓名 )

Dim Row As DataRow

Row = Table.NewRow()

Row("姓名 ") = 姓名 (I)

Row("國文 ") = 國文 (I)

Row("英文 ") = 英文 (I)

Row("數學 ") = 數學 (I)

Table.Rows.Add(Row)

Next

8-2 8-2 DataGrid DataGrid 初體驗初體驗

DataGrid DataGrid 的安插與資料繫結的安插與資料繫結

Grid01.aspx Part IGrid01.aspx Part I <%@ Import Namespace="System.Data" %>


<Html>

<Body BgColor="White"><Center>

<H3>Grid01.aspx -- 用 DataGrid 顯示 DataTable 的資料<HR></H3><asp:DataGrid runat="server" id="MyGrid" />

<p>

<HR></Center></Body>

</Html>

Grid01.aspx Part IIGrid01.aspx Part II<script Language="VB" runat="server">




' DataGrid 與 DataTable 的資料繫結

MyGrid.DataSource = Table.DefaultView

MyGrid.DataBind()

End Sub

開啟其他資料庫開啟其他資料庫 (( 表表 ))

設定設定 DataGrid DataGrid 的外觀的外觀想改變想改變 DataGrid DataGrid 的外觀，讓它從下圖的外觀，讓它從下圖

(( 左左 )) 變成下圖變成下圖 (( 右右 )) ：：

Grid02.aspx Grid03.aspx

Grid03.aspx Part IGrid03.aspx Part I <%@ Import Namespace="System.Data" %>

<Html>


<H3>Grid03.aspx -- 設定 DataGrid的外觀 <HR></H3>

<asp:DataGrid runat="server" id="MyGrid"

HeaderStyle-BackColor="#AAAADD"

AlternatingItemStyle-BackColor="#FFFFC0"

BorderColor="Black"

CellPadding="2"

CellSpacing="0" />

<p>


</Html>

Grid03.aspx Part IIGrid03.aspx Part II<script Language="VB" runat="server">



Table = OpenMdbTable( "Sample.mdb", "成績單 " )

' DataGrid 與 DataTable 的資料繫結


MyGrid.DataBind()

End Sub

</script>

設定設定 DataGrid DataGrid 的外觀—的外觀—特殊的屬性特殊的屬性 Part IPart I

HeaderStyle-BackColorHeaderStyle-BackColor ：：用來設定第一用來設定第一列列 (( 抬頭列抬頭列 )) 的背景顏色。的背景顏色。

HeaderStyle-BackColor 屬性用來設定這一列的背景顏色

設定設定 DataGrid DataGrid 的外觀—的外觀—特殊的屬性特殊的屬性 Part IIPart II

AlternatingItemStyle-BackColorAlternatingItemStyle-BackColor ：：用來設用來設定間隔一列的背景顏色。定間隔一列的背景顏色。

BorderColorBorderColor ：：表格邊框的顏色。表格邊框的顏色。

AlternatingItemStyle-BackColor 屬性用來設定這一列的背景顏色

8-3 8-3 可以分頁瀏覽的可以分頁瀏覽的 DataGridDataGrid

可以分頁瀏覽的可以分頁瀏覽的 DataGridDataGrid

分頁瀏覽的基礎分頁瀏覽的基礎

下一頁連結上一頁連結

Grid04.aspx

Grid04.aspxGrid04.aspx Part I Part I<%@ Import Namespace="System.Data" %> <Html><Body BgColor="White"><Center><H3>Grid04.aspx -- 分頁瀏覽的基礎 <HR></H3><Form runat="server"><asp:DataGrid runat="server" id="MyGrid" AllowPaging="True" PageSize="10" OnPageIndexChanged="ChangePage" HeaderStyle-BackColor="#AAAADD" AlternatingItemStyle-BackColor="#FFFFC0" BorderColor="Black" CellPadding="2" CellSpacing="0" /></Form>

Grid04.aspxGrid04.aspx Part II Part II<p>


</Html>

<script Language="VB" runat="server">



Table = OpenMdbTable( "Sample.mdb", "成績單 " ) MyGrid.DataSource = Table.DefaultView MyGrid.DataBind()

End Sub

Grid04.aspxGrid04.aspx Part III Part III Sub ChangePage(sender As Object, e As DataGridPageChangedEventArgs)

MyGrid.CurrentPageIndex = e.NewPageIndex




MyGrid.DataBind()

End Sub

</script>

執行效能問題執行效能問題

Page_Load

ChangePage

DataGrid

Grid04.aspx第一次被瀏覽

1.

2.

Page_Load

ChangePage

DataGrid

3.

5.

4.

> 被按下

利用利用 IsPostBack IsPostBack 解決執行效解決執行效能問題能問題 ((Grid04b.aspx Grid04b.aspx 節錄節錄 ))


If Not IsPostBack Then ' 網頁第一次被瀏覽




MyGrid.DataBind()

End If

End Sub

Grid04c.aspx Grid04c.aspx 節錄節錄 Part IPart I

<script Language="VB" runat="server">

Sub OpenDataBase_And_BindToDataGrid()




MyGrid.DataBind()

End Sub

Grid04c.aspx Grid04c.aspx 節錄節錄 Part IIPart II Sub Page_Load(sender As Object, e As EventArgs)

If Not IsPostBack Then

OpenDataBase_And_BindToDataGrid()

End If

End Sub

Sub ChangePage(sender As Object, e As DataGridPageChangedEventArgs)



End Sub

</script>

將將 << 及及 >> 改成改成上一頁上一頁及及下下一頁一頁

Grid04c.aspx Grid05.aspx

Grid05.aspxGrid05.aspx Part I Part I

<%@ Import Namespace="System.Data" %>

<Html>


<H3>Grid05.aspx -- 將 < 及 > 改成「上一頁」及「下一頁」 <HR></H3>

<Form runat="server">


AllowPaging="True"

PageSize="10"

OnPageIndexChanged="ChangePage"

Grid05.aspxGrid05.aspx Part II Part II PagerStyle-HorizontalAlign="Right"

PagerStyle-NextPageText="下一頁 "

PagerStyle-PrevPageText="上一頁 "



BorderColor="Black"

CellPadding="2"

CellSpacing="0" />

</Form>

<p>


</Html>

Grid05.aspxGrid05.aspx Part III Part III<script Language="VB" runat="server">





MyGrid.DataBind()

End Sub

Grid05.aspxGrid05.aspx Part IV Part IV Sub Page_Load(sender As Object, e As EventArgs)



End If

End Sub




End Sub

</script>

將將 < < 及及 > > 改成改成 1 2 3 4 1 2 3 4 …… 的頁次的頁次連結連結

Grid04c.aspx Grid06.aspx

Grid06.aspxGrid06.aspx Part I Part I<%@ Import Namespace="System.Data" %>


<Html>


<H3>Grid06.aspx -- 將 < 及 > 改成 1 2 3 4 … 的頁次連結<HR></H3>



AllowPaging="True"

PageSize="10"


Grid06.aspxGrid06.aspx Part II Part II PagerStyle-Mode="NumericPages"

PagerStyle-HorizontalAlign="Right"



BorderColor="Black"

CellPadding="2"

CellSpacing="0" />

</Form>

<p>


</Html>






MyGrid.DataBind()

End Sub




End If

End Sub




End Sub

</script>

8-4 8-4 DataGrid DataGrid 與欄位設定與欄位設定

自定欄位抬頭及對齊方式自定欄位抬頭及對齊方式

靠左對齊靠右對齊


Grid07.aspxGrid07.aspx Part I Part I<%@ Import Namespace="System.Data" %> <Html><Body BgColor="White"><Center><H3>Grid07.aspx -- 自定欄位抬頭及對齊方式 <HR></H3><Form runat="server"><asp:DataGrid runat="server" id="MyGrid" AllowPaging="True" PageSize="10" OnPageIndexChanged="ChangePage" PagerStyle-HorizontalAlign="Right" PagerStyle-NextPageText="下一頁 " PagerStyle-PrevPageText="上一頁 " HeaderStyle-BackColor="#AAAADD" AlternatingItemStyle-BackColor="#FFFFC0" BorderColor="Black" CellPadding="2" CellSpacing="0"

Grid07.aspxGrid07.aspx Part II Part II AutoGenerateColumns="false" >

<Columns>

<asp:BoundColumn DataField="學號 " HeaderText="學號 " /> <asp:BoundColumn DataField="姓名 " HeaderText="姓名 " /> <asp:BoundColumn DataField="國文 " HeaderText="國語 " ItemStyle-HorizontalAlign="right"/> <asp:BoundColumn DataField="英文 " HeaderText="英語 " ItemStyle-HorizontalAlign="right"/> <asp:BoundColumn DataField="數學 " HeaderText="數學 " ItemStyle-HorizontalAlign="right"/> </Columns>

</asp:DataGrid>

</Form>

<p>


</Html>




Table = OpenMdbTable( "Sample.mdb", " 成績單 " )


MyGrid.DataBind()

End Sub




End If

End Sub




End Sub

</script>

設定設定 DataGrid DataGrid 欄位的連結欄位的連結

此一欄位含有連結之功能


Grid08.aspxGrid08.aspx Part I Part I<%@ Import Namespace="System.Data" %> <Html><Body BgColor="White"><Center><H3>Grid08.aspx -- 設定 DataGrid 欄位的連結 <HR></H3><Form runat="server"><asp:DataGrid runat="server" id="MyGrid" AllowPaging="True" PageSize="10" OnPageIndexChanged="ChangePage" PagerStyle-HorizontalAlign="Right" PagerStyle-NextPageText=“下一頁” PagerStyle-PrevPageText="上一頁 " HeaderStyle-BackColor="#AAAADD" AlternatingItemStyle-BackColor="#FFFFC0" BorderColor="Black" CellPadding="2" CellSpacing="0" AutoGenerateColumns="false" >

Grid08.aspxGrid08.aspx Part II Part II<Columns> <asp:HyperLinkColumn DataTextField="學號 " HeaderText="學號 " DataNavigateUrlField="學號 " DataNavigateUrlFormatString="students.aspx?id={0}" Target="_blank" /> <asp:BoundColumn DataField="姓名 " HeaderText="姓名 " /> <asp:BoundColumn DataField="國文 " HeaderText="國語 " ItemStyle-HorizontalAlign="right"/> <asp:BoundColumn DataField="英文 " HeaderText="英語 " ItemStyle-HorizontalAlign="right"/> <asp:BoundColumn DataField="數學 " HeaderText="數學 " ItemStyle-HorizontalAlign="right"/> </Columns></asp:DataGrid></Form><p><HR></Center></Body></Html>




Table = OpenMdbTable( "Sample.mdb", " 成績單 " )


MyGrid.DataBind()

End Sub




End If

End Sub




End Sub

</script>

8-5 8-5 DataTable DataTable 與排序與排序

DataTable DataTable 與排序與排序排序也是顯示表格資料時，經常見到的排序也是顯示表格資料時，經常見到的功能，例如下圖是根據「國文」欄位來功能，例如下圖是根據「國文」欄位來排序所顯示的表格：排序所顯示的表格：

Sort Sort 屬性與資料排序屬性與資料排序 (1)(1)

想要產生排序好的資料，十分簡單，只想要產生排序好的資料，十分簡單，只要將要將 DataTable DataTable 的的 DefaultView. Sort DefaultView. Sort 屬性設定成欄位名稱即可，例如：屬性設定成欄位名稱即可，例如：

DataTable.DefaultView.Sort = " 國文 " ' 根據國文欄位排序資料

Sort Sort 屬性與資料排序屬性與資料排序 (2)(2)

Grid05.aspx Sort01.aspx

新增排序功能

Sort01.aspxSort01.aspx Part I Part I<%@ Import Namespace="System.Data" %> <Html><Body BgColor="White"><Center><H3>Sort01.aspx -- Sort 屬性與資料排序 <HR></H3><Form runat="server">選擇排序的欄位 :<br><asp:ListBox runat="server" id="SortField" Rows=1> <asp:ListItem Selected>學號 </asp:ListItem> <asp:ListItem>姓名 </asp:ListItem> <asp:ListItem>國文 </asp:ListItem> <asp:ListItem>英文 </asp:ListItem> <asp:ListItem>數學 </asp:ListItem></asp:ListBox><asp:Button runat="server" Text="排序 " OnClick="SortPage"/><p>

Sort01.aspxSort01.aspx Part II Part II<asp:DataGrid runat="server" id="MyGrid"

AllowPaging="True"

PageSize="10"



PagerStyle-NextPageText="下一頁 " PagerStyle-PrevPageText="上一頁 " HeaderStyle-BackColor="#AAAADD" AlternatingItemStyle-BackColor="#FFFFC0"

BorderColor="Black"

CellPadding="2"

CellSpacing="0" /><p>

</Form>


</Html>

Sort01.aspxSort01.aspx Part III Part III<script Language="VB" runat="server">




Table.DefaultView.Sort = SortField.SelectedItem.Text


MyGrid.DataBind()

End Sub

Sort01.aspxSort01.aspx Part IV Part IV Sub Page_Load(sender As Object, e As EventArgs)



End If

End Sub

Sub SortPage(sender As Object, e As EventArgs)


End Sub




End Sub

</script>

遞增排序或遞減排序遞增排序或遞減排序 (1)(1)

Sort01.aspx Sort02.aspx

新增功能


想要達到遞減排序的目的，只需在設定想要達到遞減排序的目的，只需在設定 Default.Sort Default.Sort 屬性時，在欄位名稱後面加屬性時，在欄位名稱後面加上上 " " Desc" Desc" 即可，例如：即可，例如：

DataTable.DefaultView.Sort = " 國文 Desc" ' 國文欄位遞減排序


新增新增 RadioButtonList RadioButtonList 控制元件，用以控制元件，用以選擇「遞增排序」或「遞減排序」：選擇「遞增排序」或「遞減排序」：

<asp:RadioButtonList runat="server" id="SortType" RepeatDirection="Horizontal" RepeatColumns="2"> <asp:ListItem Selected> 遞增排序 </asp:ListItem> <asp:ListItem> 遞減排序 </asp:ListItem></asp:RadioButtonList>

遞增排序或遞減排序遞增排序或遞減排序 (4)(4) 修改修改 OpenDataBase_And_BindToDataGrid() OpenDataBase_And_BindToDataGrid() 副程式，使成為：副程式，使成為： Sub OpenDataBase_And_BindToDataGrid()


Table = OpenMdbTable( "Sample.mdb", "成績單 " ) If SortType.SelectedItem.Text = "遞減排序 " Then Table.DefaultView.Sort = SortField.SelectedItem.Text & " Desc"

Else

Table.DefaultView.Sort = SortField.SelectedItem.Text

End If


MyGrid.DataBind()

End Sub

按下按下 DataGrid DataGrid 的抬頭以排序資的抬頭以排序資料料

按下此一連結，即根據此一欄位排序資料Sort03.aspx第一次按下遞增排序第二次按下遞減排序第三次按下遞增排序…

Sort03.aspxSort03.aspx Part I Part I<%@ Import Namespace="System.Data" %>

<Html>


<H3>Sort03.aspx -- 按下 DataGrid 的抬頭以排序資料 <HR></H3>



AllowPaging="True"

PageSize="10"



PagerStyle-NextPageText="下一頁 " PagerStyle-PrevPageText="上一頁 "

Sort03.aspxSort03.aspx Part II Part II AllowSorting="true"

OnSortCommand="DgSortPage"



BorderColor="Black"

CellPadding="2"

CellSpacing="0" /><p>

<asp:Label runat="server" id="SortField" Text="學號 " Visible="False" />

<asp:Label runat="server" id="SortType" Text="" Visible="False" />

</Form>


</Html>

Sort03.aspxSort03.aspx Part III Part III<script Language="VB" runat="server">



Table = OpenMdbTable( "Sample.mdb", "成績單 " ) Table.DefaultView.Sort = SortField.Text & SortType.Text


MyGrid.DataBind()

End Sub




End If

End Sub

Sort03.aspxSort03.aspx Part IV Part IV Sub DgSortPage(sender As Object, e As DataGridSortCommandEventArgs) If SortField.Text = e.SortExpression Then If SortType.Text = "" Then SortType.Text = " Desc" Else SortType.Text = "" End If Else SortField.Text = e.SortExpression SortType.Text = "" End If OpenDataBase_And_BindToDataGrid() End Sub Sub ChangePage(sender As Object, e As DataGridPageChangedEventArgs) MyGrid.CurrentPageIndex = e.NewPageIndex OpenDataBase_And_BindToDataGrid() End Sub</script>

ASP.NET 網頁製作教本 – 從基本語法學起

Documents

Transcript of ASP.NET 網頁製作教本 – 從基本語法學起