当前位置:首页 > 第六篇:ListView控件与DataPager控件详解(1)

第六篇:ListView控件与DataPager控件详解(1)

点击次数:1462  更新日期:2010-12-29
\n

简介:


\n

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


\n


Grid


\n


BulletedList


\n


DefaultTiled


\n


Flow


\n

入门:


\n

要真正了解ListView最好是能自己试验下。下面演示一下如何使用拖拽方式使用这两个控件。有开发经验的同志可以直接跳过这部分。


\n

1、 新建一个web项目或web站点


\n

2、 使用Ctrl+N创建一个新的WebForm


\n

3、 双击工具箱面板中的ListView控件在页面上添加一个ListView。


\n

4、使用右键通过快捷菜单的Show Smart Tag打开Smart Tag窗口。


\n

5、选择一个数据源,参见第二篇。


\n

6、使用Smart Tag配置List View。


\n

7、 选择Layout、Style、Options与分页方式。


\n

8、 使用Shift+F5浏览页面内容。


\n

进阶:


\n

ListView之所以功能强大并且灵活其主要功劳是他的模板列与之前出现的模板有本质的不同。在ListView中布局定义与数据绑定分开在不同的模板中,然后再根据布局使用绑定的数据元素替换布局元素的方式来展现数据。例如:


\n

<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>


\n

其显示样式跟标准Table完全一样。



\n

其中<tr ID=”itemPlaceholder” runat=”server”></tr>是必不可少的元素,由它来指定重复替换的元素。这样的方式使得我们定义布局更方便自由。灵活也就是理所当然的了。


\n

现在来详细看看ListView的模板。


\n

(以下ListView的模板部分内容翻译自MSDN)


\n

l LayoutTemplate:指定用来定义ListView控件布局的根模板。它包括占位符对象,例如:table row (tr), div, 或 span 元素. 这个元素将被定义在ItemTemple模板或GroupTemple模板中的内容替换。也可以包含一个DataPager对象。


\n

l ItemTemplate:为 TemplateField 对象中的项指定要显示的内容。


\n

l ItemSeparatorTemplate:在 TemplateField 对象中的项之间指定要显示的内容。


\n

l GroupTemplate:为分组布局指定内容。它包括占位符对象,例如:table row (tr), div, 或 span 元素.这个元素将被定义在ItemTemple模板或EmptyItemTemplate模板中的内容替换。


\n

l GroupSeparatorTemplate:为分组项之间指定要显示的内容。


\n

l EmptyItemTemplate:指定使用GroupTemplate时的空项内容。例如,如果GroupItemCount属性设置为5,并且数据源返回的总数为8,ListView控件最后一行将有3项根据ItemTemple显示,两项根据EmptyTemplate显示。


\n

l EmptyDataTemplate:指定数据源为空时的内容。


\n

l SelectedItemTemplate:为选中项指定显示内容。


\n

l AlternatingItemTemplate:为交替项指定要显示的内容。


\n

l EditItemTemplate:为编辑项指定要显示的内容。当数据进行编辑时EditItemTemplate将替换ItemTemple的数据。


\n

l InsertItemTemplate:为插入项指定要显示的内容。当数据进行编辑时InsertItemTemplate将替换ItemTemple的数据。


\n

ListView的显示样式:


\n

LayoutTemplate


\n

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


\n

下面看几个例子:


\n

如何实现下面的显示样式呢?


\n

其实也很简单,我们只需要在LayoutTemplate中加入如下Html代码:


\n
<LayoutTemplate>

<table runat=”server” border=”1″ >

<tr ID=”itemPlaceholderContainer” runat=”server”>

<td ID=”itemPlaceholder” runat=”server”>

</td>

</tr>

</table>

</LayoutTemplate>

\n