ASP.NET 網頁製作教本 – 從基本語法學起 第 8 章 DataGrid 與 DataTable
8-1 DataTable 的資料結構
DataTable 的資料結構
DataTable 的建構：開啟資料庫
Table01.aspx Part I <!-- #include File="Mdb.vb" --> <Html> <Html> <Body BgColor="White"> <H3>DataTable的建構：開啟資料庫<HR></H3> <asp:Label runat="server" id="Msg" /><p> <HR></Body> </Html>
Table01.aspx 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.aspx Part I <%@ Import Namespace="System.Data" %> <!-- #include File="Mdb.vb" --> <Html> <Body BgColor="White"> <H3>DataTable的建構：開啟資料庫<HR></H3> <asp:Label runat="server" id="Msg" /><p> <HR></Body> </Html>
Table02.aspx Part II <script Language="VB" runat="server"> Sub Page_Load(sender As Object, e As EventArgs) Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "股票行情表" ) If Not Table Is Nothing Then Msg.Text = "已經建構好 DataTable!" End If End Sub </script>
DataTable 的建構：逐欄逐列填入資料 建立 DataTable 物件：使用 New DataTable 的方式先建立好物件 。 建立欄位：包含欄位抬頭及其資料型別的建立 。 加入資料列：根據實際的資料列數(或稱「資料筆數」)，逐列加入於DataTable之中。
實例 (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) 將其填入 DataTable 成為以下結構：
Table03.aspx 節錄 Part 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 節錄 Part 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 DataGrid 初體驗
DataGrid 的安插與資料繫結
Grid01.aspx Part I <%@ Import Namespace="System.Data" %> <!-- #include File="Mdb.vb" --> <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 II <script Language="VB" runat="server"> Sub Page_Load(sender As Object, e As EventArgs) Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "股票行情表" ) ' DataGrid 與 DataTable 的資料繫結 MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End Sub
開啟其他資料庫(表)
設定 DataGrid 的外觀 想改變 DataGrid 的外觀，讓它從下圖(左)變成下圖(右)：
Grid03.aspx Part I <%@ Import Namespace="System.Data" %> <!-- #include File="Mdb.vb" --> <Html> <Body BgColor="White"><Center> <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> <HR></Center></Body> </Html>
Grid03.aspx Part II <script Language="VB" runat="server"> Sub Page_Load(sender As Object, e As EventArgs) Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "成績單" ) ' DataGrid 與 DataTable 的資料繫結 MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End Sub </script>
設定 DataGrid 的外觀— 特殊的屬性 Part I HeaderStyle-BackColor：用來設定第一列(抬頭列)的背景顏色。
設定 DataGrid 的外觀— 特殊的屬性 Part II AlternatingItemStyle-BackColor：用來設 定間隔一列的背景顏色。 BorderColor：表格邊框的顏色。
8-3 可以分頁瀏覽的 DataGrid
可以分頁瀏覽的 DataGrid
分頁瀏覽的基礎
Grid04.aspx Part I <%@ Import Namespace="System.Data" %> <!-- #include File="Mdb.vb" --> <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.aspx Part II <p> <HR></Center></Body> </Html> <script Language="VB" runat="server"> Sub Page_Load(sender As Object, e As EventArgs) Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "成績單" ) MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End Sub
Grid04.aspx Part III Sub ChangePage(sender As Object, e As DataGridPageChangedEventArgs) MyGrid.CurrentPageIndex = e.NewPageIndex Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "成績單" ) MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End Sub </script>
執行效能問題
利用 IsPostBack 解決執行效能問題 (Grid04b.aspx 節錄) Sub Page_Load(sender As Object, e As EventArgs) If Not IsPostBack Then ' 網頁第一次被瀏覽 Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "成績單" ) MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End If End Sub
Grid04c.aspx 節錄 Part I <script Language="VB" runat="server"> Sub OpenDataBase_And_BindToDataGrid() Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "成績單" ) MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End Sub
Grid04c.aspx 節錄 Part 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) MyGrid.CurrentPageIndex = e.NewPageIndex </script>
將 < 及 > 改成 上一頁 及 下一頁
Grid05.aspx Part I <%@ Import Namespace="System.Data" %> <!-- #include File="Mdb.vb" --> <Html> <Body BgColor="White"> <H3>Grid05.aspx -- 將 < 及 > 改成「上一頁」及「下一頁」<HR></H3> <Form runat="server"> <asp:DataGrid runat="server" id="MyGrid" AllowPaging="True" PageSize="10" OnPageIndexChanged="ChangePage"
Grid05.aspx Part II PagerStyle-HorizontalAlign="Right" PagerStyle-NextPageText="下一頁" PagerStyle-PrevPageText="上一頁" HeaderStyle-BackColor="#AAAADD" AlternatingItemStyle-BackColor="#FFFFC0" BorderColor="Black" CellPadding="2" CellSpacing="0" /> </Form> <p> <HR></Center></Body> </Html>
Grid05.aspx Part III <script Language="VB" runat="server"> Sub OpenDataBase_And_BindToDataGrid() Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "成績單" ) MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End Sub
Grid05.aspx Part IV 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) MyGrid.CurrentPageIndex = e.NewPageIndex </script>
將 < 及 > 改成 1 2 3 4 … 的頁次連結
Grid06.aspx Part I <%@ Import Namespace="System.Data" %> <!-- #include File="Mdb.vb" --> <Html> <Body BgColor="White"><Center> <H3>Grid06.aspx -- 將 < 及 > 改成 1 2 3 4 … 的頁次連結<HR></H3> <Form runat="server"> <asp:DataGrid runat="server" id="MyGrid" AllowPaging="True" PageSize="10" OnPageIndexChanged="ChangePage"
Grid06.aspx Part II PagerStyle-Mode="NumericPages" PagerStyle-HorizontalAlign="Right" HeaderStyle-BackColor="#AAAADD" AlternatingItemStyle-BackColor="#FFFFC0" BorderColor="Black" CellPadding="2" CellSpacing="0" /> </Form> <p> <HR></Center></Body> </Html>
Grid06.aspx Part III <script Language="VB" runat="server"> Sub OpenDataBase_And_BindToDataGrid() Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "股票行情表" ) MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End Sub
Grid06.aspx Part IV 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) MyGrid.CurrentPageIndex = e.NewPageIndex </script>
8-4 DataGrid 與欄位設定
自定欄位抬頭及對齊方式
Grid07.aspx Part I <%@ Import Namespace="System.Data" %> <!-- #include File="Mdb.vb" --> <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.aspx Part II AutoGenerateColumns="false" > <Columns> <asp:BoundColumn DataField="學號" HeaderText="學號" /> <asp:BoundColumn DataField="姓名" HeaderText="姓名" /> <asp:BoundColumn DataField="國文" HeaderText="國語" ItemStyle-HorizontalAlign="right"/> <asp:BoundColumn DataField="英文" HeaderText="英語" <asp:BoundColumn DataField="數學" HeaderText="數學" </Columns> </asp:DataGrid> </Form> <p> <HR></Center></Body> </Html>
Grid07.aspx Part III <script Language="VB" runat="server"> Sub OpenDataBase_And_BindToDataGrid() Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "成績單" ) MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End Sub
Grid07.aspx Part IV 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) MyGrid.CurrentPageIndex = e.NewPageIndex </script>
設定 DataGrid 欄位的連結
Grid08.aspx Part I <%@ Import Namespace="System.Data" %> <!-- #include File="Mdb.vb" --> <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.aspx 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="英語" <asp:BoundColumn DataField="數學" HeaderText="數學" </Columns> </asp:DataGrid> </Form> <p> <HR></Center></Body> </Html>
Grid08.aspx Part III <script Language="VB" runat="server"> Sub OpenDataBase_And_BindToDataGrid() Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "成績單" ) MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End Sub
Grid08.aspx Part IV 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) MyGrid.CurrentPageIndex = e.NewPageIndex </script>
8-5 DataTable 與排序
DataTable 與排序 排序也是顯示表格資料時，經常見到的功能，例如下圖是根據「國文」欄位來排序所顯示的表格：
Sort 屬性與資料排序(1) 想要產生排序好的資料，十分簡單，只要將 DataTable 的 DefaultView. Sort 屬性設定成欄位名稱即可，例如： DataTable.DefaultView.Sort = "國文" ' 根據國文欄位排序資料
Sort 屬性與資料排序(2)
Sort01.aspx Part I <%@ Import Namespace="System.Data" %> <!-- #include File="Mdb.vb" --> <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.aspx Part II <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" /><p> </Form> <HR></Center></Body> </Html>
Sort01.aspx Part III <script Language="VB" runat="server"> Sub OpenDataBase_And_BindToDataGrid() Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "成績單" ) Table.DefaultView.Sort = SortField.SelectedItem.Text MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End Sub
Sort01.aspx Part IV Sub Page_Load(sender As Object, e As EventArgs) If Not IsPostBack Then OpenDataBase_And_BindToDataGrid() End If End Sub Sub SortPage(sender As Object, e As EventArgs) Sub ChangePage(sender As Object, e As DataGridPageChangedEventArgs) MyGrid.CurrentPageIndex = e.NewPageIndex </script>
遞增排序或遞減排序(1)
遞增排序或遞減排序 (2) 想要達到遞減排序的目的，只需在設定 Default.Sort 屬性時，在欄位名稱後面加上 " Desc" 即可，例如： DataTable.DefaultView.Sort = "國文 Desc" ' 國文欄位遞減排序
遞增排序或遞減排序 (3) 新增 RadioButtonList 控制元件，用以選擇「遞增排序」或「遞減排序」： <asp:RadioButtonList runat="server" id="SortType" RepeatDirection="Horizontal" RepeatColumns="2"> <asp:ListItem Selected>遞增排序</asp:ListItem> <asp:ListItem>遞減排序</asp:ListItem> </asp:RadioButtonList>
遞增排序或遞減排序 (4) 修改 OpenDataBase_And_BindToDataGrid() 副程式，使成為： Sub OpenDataBase_And_BindToDataGrid() Dim Table As DataTable 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.DataSource = Table.DefaultView MyGrid.DataBind() End Sub
按下 DataGrid 的抬頭以排序資料
Sort03.aspx Part I <%@ Import Namespace="System.Data" %> <!-- #include File="Mdb.vb" --> <Html> <Body BgColor="White"><Center> <H3>Sort03.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="上一頁"
Sort03.aspx Part II AllowSorting="true" OnSortCommand="DgSortPage" HeaderStyle-BackColor="#AAAADD" AlternatingItemStyle-BackColor="#FFFFC0" 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> <HR></Center></Body> </Html>
Sort03.aspx Part III <script Language="VB" runat="server"> Sub OpenDataBase_And_BindToDataGrid() Dim Table As DataTable Table = OpenMdbTable( "Sample.mdb", "成績單" ) Table.DefaultView.Sort = SortField.Text & SortType.Text MyGrid.DataSource = Table.DefaultView MyGrid.DataBind() End Sub Sub Page_Load(sender As Object, e As EventArgs) If Not IsPostBack Then OpenDataBase_And_BindToDataGrid() End If
Sort03.aspx 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 SortField.Text = e.SortExpression SortType.Text = "" OpenDataBase_And_BindToDataGrid() End Sub Sub ChangePage(sender As Object, e As DataGridPageChangedEventArgs) MyGrid.CurrentPageIndex = e.NewPageIndex </script>