ListView控件與DataPager控件詳解(1)

簡介:

VS2008提供的新控件中只有ListViewDataPaper兩個控件。ListView是一個很強大的控件,他可以實現其它數據控件可以實現的任意功能。而且ListView也前所未有的靈活。通過定義它的模板我們幾乎可以實現任意一種數據展現方式。ListView提供了默認的5種展現樣式GridTiledBulleted ListFlowSigleRow。下面五張圖分別爲這五種樣式的最終效果。

多列顯示:

       <asp:ListView ID="ListView1" runat="server" DataKeyNames="ID" DataSourceID="SqlDataSource2"             GroupItemCount="2">             <LayoutTemplate>                 <table id="groupPlaceholderContainer" runat="server" border="1" style="">                     <tr id="groupPlaceholder" runat="server">                     </tr>                 </table>             </LayoutTemplate>             <GroupTemplate>                 <tr id="itemPlaceholderContainer" runat="server">                     <td id="itemPlaceholder" runat="server">                     </td>                 </tr>             </GroupTemplate>             <ItemTemplate>                 <td runat="server" style="border: 1px;">                     狀態名稱:                     <asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />                     <br />                     創建日期:                     <asp:Label ID="CreateDateLabel" runat="server" Text='<%# Convert.ToDateTime(Eval("CreateDate")).ToShortDateString() %>' />                     <br />                 </td>             </ItemTemplate>         </asp:ListView>

 

Grid

BulletedList

DefaultTiled

Flow

入門:

要真正瞭解ListView最好是能自己試驗下。下面演示一下如何使用拖拽方式使用這兩個控件。有開發經驗的同志可以直接跳過這部分。

1、 新建一個web項目或web站點

2、 使用Ctrl+N創建一個新的WebForm

3、 雙擊工具箱面板中的ListView控件在頁面上添加一個ListView

4、使用右鍵通過快捷菜單的Show Smart Tag打開Smart Tag窗口。

5、選擇一個數據源,參見第二篇。

6、使用Smart Tag配置List View

7、 選擇LayoutStyleOptions與分頁方式。

8、 使用Shift+F5瀏覽頁面內容。

進階:

ListView之所以功能強大並且靈活其主要功勞是他的模板列與之前出現的模板有本質的不同。在ListView中佈局定義與數據綁定分開在不同的模板中,然後再根據佈局使用綁定的數據元素替換佈局元素的方式來展現數據。例如:

                           <table ID="itemPlaceholderContainer" runat="server" border="1">                                 <tr>                                 <th colspan="6">Customers</th>                                 </tr>                                 <tr runat="server">                                     <th runat="server">                                         CompanyName</th>                                     <th runat="server">                                         ContactName</th>                                     <th runat="server">                                         ContactTitle</th>                                     <th runat="server">                                         Address</th>                                     <th runat="server">                                         City</th>                                     <th runat="server">                                         CustomerID</th>                                 </tr>                                 <tr ID="itemPlaceholder" runat="server">                                 </tr>                             </table>

 其顯示樣式跟標準Table完全一樣。

其中<tr ID="itemPlaceholder" runat="server"></tr>是必不可少的元素,由它來指定重複替換的元素。這樣的方式使得我們定義佈局更方便自由。靈活也就是理所當然的了。

現在來詳細看看ListView的模板。

(以下ListView的模板部分內容翻譯自MSDN

LayoutTemplate:指定用來定義ListView控件佈局的根模板。它包括佔位符對象,例如:table row (tr), div, span 元素. 這個元素將被定義在ItemTemple模板或GroupTemple模板中的內容替換。也可以包含一個DataPager對象。

ItemTemplate:爲 TemplateField 對象中的項指定要顯示的內容。

ItemSeparatorTemplate:在 TemplateField 對象中的項之間指定要顯示的內容。

GroupTemplate:爲分組佈局指定內容。它包括佔位符對象,例如:table row (tr), div, span 元素.這個元素將被定義在ItemTemple模板或EmptyItemTemplate模板中的內容替換。

GroupSeparatorTemplate:爲分組項之間指定要顯示的內容。

EmptyItemTemplate指定使用GroupTemplate時的空項內容。例如,如果GroupItemCount屬性設置爲5,並且數據源返回的總數爲8ListView控件最後一行將有3項根據ItemTemple顯示,兩項根據EmptyTemplate顯示。

EmptyDataTemplate:指定數據源爲空時的內容。

SelectedItemTemplate:爲選中項指定顯示內容。

AlternatingItemTemplate:爲交替項指定要顯示的內容。

EditItemTemplate:爲編輯項指定要顯示的內容。當數據進行編輯時EditItemTemplate將替換ItemTemple的數據。

InsertItemTemplate:爲插入項指定要顯示的內容。當數據進行編輯時InsertItemTemplate將替換ItemTemple的數據。

ListView的顯示樣式:

LayoutTemplate

要使用LayoutTemplate只需要在<asp:ListView>中增加<LayoutTemplate></LayoutTemplate>標記,再在LayoutTemplate使用表示樣式的Html就可。

下面看幾個例子:

如何實現下面的顯示樣式呢?

其實也很簡單,我們只需要在LayoutTemplate中加入如下Html代碼:

<LayoutTemplate>                 <table runat="server" border="1" >                     <tr ID="itemPlaceholderContainer" runat="server">                         <td ID="itemPlaceholder" runat="server">                         </td>                     </tr>                 </table> </LayoutTemplate>

<td ID="itemPlaceholder" runat="server"></td>也就代表了我們對td元素進行重複替換。

 

那麼我們又如何實現的每頁只顯示3項數據信息的呢?這就要看DataPager了,在LayoutTemplate內加入分頁控件。

           <LayoutTemplate>                 <table runat="server" border="1" >                     <tr ID="itemPlaceholderContainer" runat="server">                         <td ID="itemPlaceholder" runat="server">                         </td>                     </tr>                 </table>                             <asp:DataPager ID="DataPager1" runat="server" PageSize="3">                                 <Fields>                                     <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True"                                          ShowLastPageButton="True" />                                 </Fields>                             </asp:DataPager>                                     </LayoutTemplate>

 我們設置了PageSize="3"也就是說每頁有6項。關於DataPager我們稍後再說,下面對ListView的講解講先略過對分頁的說明。

再看這樣的佈局方式:

HTML代碼瞭解比較深的應該應經想到了這是一個ul樣式,對的,正是如此。來看看具體的LayoutTemplate內部的html

                <ul ID="itemPlaceholderContainer" runat="server">                     <li ID="itemPlaceholder" runat="server" />                     </ul>

是不是非常簡單呢?你要不要也試試這兩個?

 

題目1

題目2

GroupTemplate

來看這幅圖:

似乎沒辦法來完成了,不錯只是前面的方法的確是無法來完成了,現在就要使用GroupTemplate了。我們來看看是如何完成的。

首先我們將LayoutTemplate內部的被替換元素的IDitemPlaceholderContainer”換成“groupPlaceholderContainer”,這樣來告知替換元素爲組替換。

            <LayoutTemplate>                             <table ID="groupPlaceholderContainer" runat="server" border="1">                                 <tr ID="groupPlaceholder" runat="server">                                 </tr>                             </table>                                 </LayoutTemplate>

然後我們再爲ListView添加一個GroupTemplate元素,如下:
                <GroupTemplate>                     <tr ID="itemPlaceholderContainer" runat="server">                         <td ID="itemPlaceholder" runat="server">                         </td>                     </tr>                 </GroupTemplate>
讀過了上面的LayoutTemplate模板的教程應該可以明白這段的意思了吧。通過itemPlaceholderContainer知道這是一段要被替換的元素,而且是根據tr進行行替換。然後再配合LayoutTemplate形成分組。

我們是如何來定義每行的列數的呢?只需要在ListView裏添加一個屬性定義        <asp:ListView ID="ListView1" runat="server" DataKeyNames="CategoryID" DataSourceID="LinqDataSource1" GroupItemCount="3">

我們這裏設置GroupItemCount屬性的值爲3,也就代表我們的每個Group裏面包含的3項。

那麼我們又如何實現的每頁只有兩行呢?有朋友應該猜出來了,是DataPager了,對只需要在LayoutTemplate內加入分頁控件,並將其PageSize設爲6就可以了。

EmptyDataTemplate

這個模板是用來替換當數據源爲空時候的顯示佈局的,比如: <EmptyDataTemplate>  No data was returned. </EmptyDataTemplate> 其結果就是如果用來替換LayoutTemplate的數據源爲空,那麼將顯示這麼一句話No data was returned. 在EmptyDataTemplate我們也可以向LayoutTemplate使用複雜的Html

EmptyItemTemplate

EmptyItemTemplate是用來替換空數據項的。比如 <EmptyItemTemplate>      <td runat="server" /> </EmptyItemTemplate> 意思就是如果如果Item數據爲空將使用一個替換一個空的td來保持table的完整。

DataPageControl

要使用DataPageControl用來向實現了IPageableItemContainer接口的控件提供分頁。比如ListView控件。

雖然Visual Studio 2008中實現了IPageableItemContainer的控件只有ListView。不過也不要因爲如此就覺得它是雞肋,我們可以通過自己實現IPageableItemContainer自定義自己的控件,然後再用DataPageControl分頁,這個我們以後會再提到。

要在ListView中使用DataPageControl只需要在LayoutTemplate模板中加入DataPager控件,如LayoutTemplate介紹中的第一個例子。

我們來看看DataPageControl默認兩種分頁方式Next/PreviousNumeric

Next/Previous樣式:

Next/Previous

實現代碼:

        <asp:DataPager ID="DataPager1" runat="server">             <Fields>                 <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True"                      ShowLastPageButton="True" />             </Fields>         </asp:DataPager>

Numeric樣式:

Numeric

實現代碼:

        <asp:DataPager ID="DataPager1" runat="server">             <Fields>                 <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True"                      ShowNextPageButton="False" ShowPreviousPageButton="False" />                 <asp:NumericPagerField />                 <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True"                      ShowNextPageButton="False" ShowPreviousPageButton="False" />             </Fields>         </asp:DataPager>

除了這兩個方式之外我們還可以自定義它,首先向DataPager中的Fields中添加TemplatePagerField,再在TemplatePagerField中添加PagerTemplate,在PagerTemplate中我們可以添加任意服務器控件,來擴展我們的功能。然後通過定義TemplatePagerFieldOnPagerCommand事件來實現我們的功能。

下面的例子我們向分頁控件中添加了一個button來實現展開全部數據的功能。

                        <asp:DataPager ID="DataPager1" runat="server" PageSize="3">                             <Fields>                                    <asp:TemplatePagerField OnPagerCommand="ButtonExpandAll_Click">                                     <PagerTemplate>                                     <asp:Button ID="ButtonExpandAll" runat="server" Text="Expand All"/>                                     </PagerTemplate>                                     </asp:TemplatePagerField>                             </Fields>                         </asp:DataPager>

除此之外我們還要在C#代碼中實現ButtonExpandAll_Click事件。 OK,今天就先到這裏,明天我們繼續來實現ListView的其它功能。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章