摘要:實作ListView分頁(不使用DataSource)
今天看了一下Listview,試了一下 XD
大部分都會用DataSource來做分頁!
若不要用DataSource當資料來源的話,那麼,分頁該怎麼處理呢?
以下的結果,試是試出來了,但,不知是不是正解 @@"
aspx
01 <asp:ListView ID="lvProduct" runat="server" DataKeyNames="CustomerID"
02 onpagepropertieschanged="lvProduct_PagePropertiesChanged">
03 <LayoutTemplate>
04 <table border="1" style="border-color:red">
05 <thead>
06 <tr>
07 <th style="border-color:red; background-color:Red; color:White">[CustomerID]</th>
08 <th style="border-color:red; background-color:Red; color:White">[CompanyName]</th>
09 <th style="border-color:red; background-color:Red; color:White">[ContactTitle]</th>
10 <th style="border-color:red; background-color:Red; color:White">[City]</th>
11 <th style="border-color:red; background-color:Red; color:White">[Phone]</th>
12 </tr>
13 </thead>
14 <tbody>
15 <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
16 </tbody>
17 </table>
18 <asp:DataPager ID="dpProduct" runat="server" PageSize="10">
19 <Fields>
20 <asp:NextPreviousPagerField FirstPageText="<<" PreviousPageText="<" ButtonType="Link" ShowFirstPageButton="true" ShowPreviousPageButton="true" ShowNextPageButton="false" />
21 <asp:NumericPagerField ButtonCount="10" />
22 <asp:NextPreviousPagerField LastPageText=">>" NextPageText=">" ButtonType="Link" ShowLastPageButton="true" ShowNextPageButton="true" ShowPreviousPageButton="false" />
23 </Fields>
24 </asp:DataPager>
25 </LayoutTemplate>
26 <ItemTemplate>
27 <tr>
28 <td style="border-color:red"><%# Eval("CustomerID")%></td>
29 <td style="border-color:red"><%# Eval("CompanyName")%></td>
30 <td style="border-color:red"><%# Eval("ContactTitle")%></td>
31 <td style="border-color:red"><%# Eval("City")%></td>
32 <td style="border-color:red"><%# Eval("Phone")%></td>
33 </tr>
34 </ItemTemplate>
35 </asp:ListView>
02 onpagepropertieschanged="lvProduct_PagePropertiesChanged">
03 <LayoutTemplate>
04 <table border="1" style="border-color:red">
05 <thead>
06 <tr>
07 <th style="border-color:red; background-color:Red; color:White">[CustomerID]</th>
08 <th style="border-color:red; background-color:Red; color:White">[CompanyName]</th>
09 <th style="border-color:red; background-color:Red; color:White">[ContactTitle]</th>
10 <th style="border-color:red; background-color:Red; color:White">[City]</th>
11 <th style="border-color:red; background-color:Red; color:White">[Phone]</th>
12 </tr>
13 </thead>
14 <tbody>
15 <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
16 </tbody>
17 </table>
18 <asp:DataPager ID="dpProduct" runat="server" PageSize="10">
19 <Fields>
20 <asp:NextPreviousPagerField FirstPageText="<<" PreviousPageText="<" ButtonType="Link" ShowFirstPageButton="true" ShowPreviousPageButton="true" ShowNextPageButton="false" />
21 <asp:NumericPagerField ButtonCount="10" />
22 <asp:NextPreviousPagerField LastPageText=">>" NextPageText=">" ButtonType="Link" ShowLastPageButton="true" ShowNextPageButton="true" ShowPreviousPageButton="false" />
23 </Fields>
24 </asp:DataPager>
25 </LayoutTemplate>
26 <ItemTemplate>
27 <tr>
28 <td style="border-color:red"><%# Eval("CustomerID")%></td>
29 <td style="border-color:red"><%# Eval("CompanyName")%></td>
30 <td style="border-color:red"><%# Eval("ContactTitle")%></td>
31 <td style="border-color:red"><%# Eval("City")%></td>
32 <td style="border-color:red"><%# Eval("Phone")%></td>
33 </tr>
34 </ItemTemplate>
35 </asp:ListView>
aspx.cs
01
USING 的區域 --------------------------------------------------------------------#
02
using System;
03
using System.Collections;
04
using System.Configuration;
05
using System.Data;
06
using System.Linq;
07
using System.Web;
08
using System.Web.Security;
09
using System.Web.UI;
10
using System.Web.UI.HtmlControls;
11
using System.Web.UI.WebControls;
12
using System.Web.UI.WebControls.WebParts;
13
using System.Xml.Linq;
14
using System.Data.SqlClient;
15
#endregion
16
17
public partial class ListView : System.Web.UI.Page
18
{
19
初始設定.Page_Load、SetFormInit
65
66 protected void lvProduct_PagePropertiesChanged(object sender, EventArgs e)
67
{
68
int PageSize = ((DataPager)lvProduct.FindControl("dpProduct")).PageSize;
69
int StartRowIndex = ((DataPager)lvProduct.FindControl("dpProduct")).StartRowIndex;
70
int TotalRowCount = ((DataPager)lvProduct.FindControl("dpProduct")).TotalRowCount;
71
72 //Response.Write("PageSize = " + PageSize.ToString() + " ; StartRowIndex = " + StartRowIndex.ToString() + " ; TotalRowcount = " + TotalRowCount.ToString() + ";");
73
((DataPager)lvProduct.FindControl("dpProduct")).SetPageProperties(StartRowIndex, PageSize, true);
74
this.SetFormInit();
75
}
76
}
77

02

03

04

05

06

07

08

09

10

11

12

13

14

15


16

17

18

19

65

66 protected void lvProduct_PagePropertiesChanged(object sender, EventArgs e)
67

68

69

70

71

72 //Response.Write("PageSize = " + PageSize.ToString() + " ; StartRowIndex = " + StartRowIndex.ToString() + " ; TotalRowcount = " + TotalRowCount.ToString() + ";");
73

74

75

76

77
其實,重點只在按下分頁時,呼叫PagePropertiesChanged,並設定DataPager.SetPageProperties分頁資訊 (73行)
以下程式碼是使用DataSource,結果與上方一模一樣!
aspx
01 <asp:SqlDataSource ID="SqlDataSource1" runat="server"
02 ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
03 SelectCommand="SELECT [CustomerID], [CompanyName], [ContactTitle], [City], [Phone] FROM [Customers]">
04 </asp:SqlDataSource>
05 <asp:ListView ID="ListView1" runat="server" DataKeyNames="CustomerID"
06 DataSourceID="SqlDataSource1">
07 <LayoutTemplate>
08 <table runat="server">
09 <tr runat="server">
10 <td runat="server">
11 <table border="1" style="border-color:red">
12 <tr runat="server" style="">
13 <th style="border-color:red; background-color:Red; color:White">CustomerID</th>
14 <th style="border-color:red; background-color:Red; color:White">CompanyName</th>
15 <th style="border-color:red; background-color:Red; color:White">ContactTitle</th>
16 <th style="border-color:red; background-color:Red; color:White">City</th>
17 <th style="border-color:red; background-color:Red; color:White">Phone</th>
18 </tr>
19 <tr ID="itemPlaceholder" runat="server">
20 </tr>
21 </table>
22 </td>
23 </tr>
24 <tr runat="server">
25 <td runat="server" style="">
26 <asp:DataPager ID="DataPager1" runat="server" PageSize="10">
27 <Fields>
28 <asp:NextPreviousPagerField FirstPageText="<<" PreviousPageText="<" ButtonType="Link" ShowFirstPageButton="true" ShowPreviousPageButton="true" ShowNextPageButton="false" />
29 <asp:NumericPagerField ButtonCount="10" />
30 <asp:NextPreviousPagerField LastPageText=">>" NextPageText=">" ButtonType="Link" ShowLastPageButton="true" ShowNextPageButton="true" ShowPreviousPageButton="false" />
31 </Fields>
32 </asp:DataPager>
33 </td>
34 </tr>
35 </table>
36 </LayoutTemplate>
37 <ItemTemplate>
38 <tr style="">
39 <td style="border-color:red"><%# Eval("CustomerID")%></td>
40 <td style="border-color:red"><%# Eval("CompanyName")%></td>
41 <td style="border-color:red"><%# Eval("ContactTitle")%></td>
42 <td style="border-color:red"><%# Eval("City")%></td>
43 <td style="border-color:red"><%# Eval("Phone")%></td>
44 </tr>
45 </ItemTemplate>
46 </asp:ListView>
02 ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
03 SelectCommand="SELECT [CustomerID], [CompanyName], [ContactTitle], [City], [Phone] FROM [Customers]">
04 </asp:SqlDataSource>
05 <asp:ListView ID="ListView1" runat="server" DataKeyNames="CustomerID"
06 DataSourceID="SqlDataSource1">
07 <LayoutTemplate>
08 <table runat="server">
09 <tr runat="server">
10 <td runat="server">
11 <table border="1" style="border-color:red">
12 <tr runat="server" style="">
13 <th style="border-color:red; background-color:Red; color:White">CustomerID</th>
14 <th style="border-color:red; background-color:Red; color:White">CompanyName</th>
15 <th style="border-color:red; background-color:Red; color:White">ContactTitle</th>
16 <th style="border-color:red; background-color:Red; color:White">City</th>
17 <th style="border-color:red; background-color:Red; color:White">Phone</th>
18 </tr>
19 <tr ID="itemPlaceholder" runat="server">
20 </tr>
21 </table>
22 </td>
23 </tr>
24 <tr runat="server">
25 <td runat="server" style="">
26 <asp:DataPager ID="DataPager1" runat="server" PageSize="10">
27 <Fields>
28 <asp:NextPreviousPagerField FirstPageText="<<" PreviousPageText="<" ButtonType="Link" ShowFirstPageButton="true" ShowPreviousPageButton="true" ShowNextPageButton="false" />
29 <asp:NumericPagerField ButtonCount="10" />
30 <asp:NextPreviousPagerField LastPageText=">>" NextPageText=">" ButtonType="Link" ShowLastPageButton="true" ShowNextPageButton="true" ShowPreviousPageButton="false" />
31 </Fields>
32 </asp:DataPager>
33 </td>
34 </tr>
35 </table>
36 </LayoutTemplate>
37 <ItemTemplate>
38 <tr style="">
39 <td style="border-color:red"><%# Eval("CustomerID")%></td>
40 <td style="border-color:red"><%# Eval("CompanyName")%></td>
41 <td style="border-color:red"><%# Eval("ContactTitle")%></td>
42 <td style="border-color:red"><%# Eval("City")%></td>
43 <td style="border-color:red"><%# Eval("Phone")%></td>
44 </tr>
45 </ItemTemplate>
46 </asp:ListView>
【2008/04/02】
資料列的移動光棒效果
將上方程式碼第38行改成:
<tr onmouseover="this.style.backgroundColor='red';this.style.color='#FFFFFF'" onmouseout="this.style.backgroundColor='#FFFFFF';this.style.color='#000000'">