随笔 - 58  文章 - 0 评论 - 355 trackbacks - 15
<2008年1月>
303112345
6789101112
13141516171819
20212223242526
272829303112
3456789

与我联系

搜索

 

留言簿(4)

我管理的小组

随笔分类(48)

随笔档案(52)

积分与排名

  • 积分 - 76344
  • 排名 - 561

最新评论

阅读排行榜

评论排行榜

 

简介:

VS2008提供的新控件中只有ListViewDataPaper两个控件。ListView是一个很强大的控件,他可以实现其它数据控件可以实现的任意功能。而且ListView也前所未有的灵活。通过定义它的模板我们几乎可以实现任意一种数据展现方式。ListView提供了默认的5种展现样式GridTiledBulleted ListFlowSigleRow。下面五张图分别为这五种样式的最终效果。


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中布局定义与数据绑定分开在不同的模板中,然后再根据布局使用绑定的数据元素替换布局元素的方式来展现数据。例如:

Code


 其显示样式跟标准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的其它功能。
posted on 2008-01-17 00:11 tianyamoon 阅读(3095) 评论(17)  编辑 收藏 所属分类: Visual Studio 2008

FeedBack:
#1楼  2008-01-17 02:26 一抹微蓝      
再多一点代码例子,就完美了
  回复  引用  查看    
#2楼  2008-01-17 07:03 金色海洋(jyk)      
其实使用Repeater 就可以实现上面的所有的功能,只是自己写的代码要多一点。
  回复  引用  查看    
#3楼  2008-01-17 08:19 Vincent Jiang‎      
深入浅出,赞~
ListView用起来是蛮顺手的
  回复  引用  查看    
#4楼  2008-01-17 08:23 t [未注册用户]
我们的项目有用到自定义数据源,连接外部不确定数据,这时候最后要用到
AutoGenerateColumns,ListView没有GRIDVIEW的这个功能
  回复  引用    
#5楼  2008-01-17 08:24 t [未注册用户]
ListView的这几个ID是固定的吧,我看不使用这个名称就报错,楼主是否可以详细说下
itemPlaceholderContainer
itemPlaceholder
  回复  引用    
#6楼 [楼主] 2008-01-17 09:01 tianyamoon      
@t
我觉得AutoGenerateColumns都意义不大,因为他不排除任何数据源都数据,像对象ID这样都数据都显示出来都话,用户很难理解。
个人认为最好是通过代码来生成LayoutTemplate
  回复  引用  查看    
#7楼  2008-01-17 09:31 WOW玩家      
@tianyamoon
itemPlaceholderContainer、itemPlaceholder可以修改的,只要你在listview指定id就可以了
  回复  引用  查看    
#8楼  2008-01-17 10:09 txdlf      
@t
"itemPlaceholder"不能修改,否则ListView怎么知道把数据放那儿,而且必须是runat="server"的

  回复  引用  查看    
#9楼  2008-01-17 12:22 t [未注册用户]
@txdlf
但是我看一些教程都没有讲必须是itemPlaceholder,还有一些例子没有用也能运行,看了好几个例子都不一样,是不是早期的ListView和现在版本都不一样了

  回复  引用    
#10楼  2008-01-17 12:23 t [未注册用户]
@tianyamoon
AutoGenerateColumns大部分时候意义不大,不过我们做自定义数据源的时候,不确定表字段这时候就有用了
  回复  引用    
#11楼 [楼主] 2008-01-17 12:32 tianyamoon      
@t
那也可以通过对数据源的列循环绑定,来解决这个问题。
  回复  引用  查看    
#12楼  2008-01-17 16:02 kyjack [未注册用户]
我想知道,listview里面能不能再套一个数据访问的控件,比如datagrid/gridview. 我想在listview访问的是合计的数据,然后里面再通过datagrid等访问详细的数据.怎么能获取listview中的数据访问控件的属性,事件等.
  回复  引用    
#13楼 [楼主] 2008-01-17 21:27 tianyamoon      
@kyjack
完全可以,今天的这篇就要写。
  回复  引用  查看    
#14楼  2008-04-14 14:20 许维光      
能否给个高级一些的功能 比如我双击可以在当前页面修改数据
  回复  引用  查看    
#15楼  2008-04-14 14:24 许维光      
各种试图如何选择数据,比如加个checkbox样的选择?我是新手不了解 望能在下篇能够有些解答
  回复  引用  查看    
#16楼  2008-04-14 14:37 许维光      
对列排序以及组合排序 一些进阶 希望大大继续 多多益善。。
  回复  引用  查看    
#17楼  2008-07-03 11:19 思然      
我想问下如果我想在listview中不是用table而是用div来控制一行有三列应该怎么控制我试了很久都不行
  回复  引用  查看    

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2008-01-18 08:56 编辑过
"五向定位"职业成长路线公开课(上海、南京、大连)
Google站内搜索


相关链接: