ASP.Net ListView 按数据字段分组?
ASP.Net ListView Grouping by Data Field?
我使用 asp.net 列表视图控件来显示详细信息。每个项目都有组详细信息。出于演示目的,组是硬编码的。
我想显示如下所示的列表视图
现在,我有这个
代码:
<asp:ListView ID="HyperLinkListView" runat="server" ViewStateMode="Disabled" ItemPlaceholderID="itemContainer" GroupPlaceholderID="groupContainer">
<LayoutTemplate>
<section class="quick-links">
<div class="row">
<div class="dfwp-column" style="width: 100%">
<div class="slm-layout-main groupmarker">
<ul class="dfwp-list">
<asp:PlaceHolder ID="groupContainer" runat="server" />
</ul>
</div>
</div>
</div>
</section>
</LayoutTemplate>
<GroupTemplate>
<span>Group</span>
<asp:PlaceHolder ID="itemContainer" runat="server" />
</GroupTemplate>
<ItemTemplate>
<li>
<div class="item">
<div class="link-item">
<asp:HyperLink Target="_blank" ID="hyperlink" NavigateUrl='<%# this.LinkToPlay((((SPListItem)Container.DataItem)["VideoFileName"]).ToString()) %>' Text='<%# Eval("Title") %>' runat="server" />
</a>
</div>
</div>
</li>
</ItemTemplate>
<EmptyDataTemplate>
<span>No data was returned.</span>
</EmptyDataTemplate>
</asp:ListView>
如何实现?
不太清楚你想要什么样的分组。然而,ListView 的功能有限。
首先,您只能按固定数量的项目进行分组。您可以使用 GroupItemCount
属性 定义该数字。您的代码将如下所示
<asp:ListView ID="HyperLinkListView" GroupItemCount="2" runat="server" ViewStateMode="Disabled" ItemPlaceholderID="itemContainer" GroupPlaceholderID="groupContainer">
并像这样在 html 中生成
GROUP
My car video
My sample video
GROUP
Another sample video
Item 4
假设您需要 GROUP A
和 GROUP B
等,您通常会使用绑定表达式,如下所示
<GroupTemplate>
<span>Group <%# Container.DataItemIndex %></span>
<asp:PlaceHolder ID="itemContainer" runat="server" />
</GroupTemplate>
但是 GroupItemTemplate 不是 DataBind 进程的一部分,因此基于获取和索引的系统不会那样工作。
因此,如果您想添加 A
、B
等,则需要客户端解决方案。因此,首先为 alhpa 字符添加一个占位符,然后给 <span>
一个 class 所以 jQuery 可以找到它。我用过 {index}
和 groupIndex
<GroupTemplate>
<span class="groupIndex">Group {index}</span>
<asp:PlaceHolder ID="itemContainer" runat="server" />
</GroupTemplate>
现在使用简单的 jQuery 方法,所有占位符都被替换为正确的字母字符。
<script type="text/javascript">
$(document).ready(function () {
$('.quick-links .groupIndex').each(function (index, element) {
var char = String.fromCharCode(65 + index);
$(this).html($(this).html().replace('{index}', char));
});
});
</script>
请注意,.quick-links
来自 LayoutTemplate 中的 <section class="quick-links">
部分。
为了灵活的解决方案,您可以使用嵌套 ListView
您需要更新 HTML 和 CSS 以获得所需的外观。
ASPX 代码
<asp:ListView ID="GroupsListView" runat="server" ViewStateMode="Disabled" ItemPlaceholderID="groupContainer" OnItemDataBound="GroupsListView_ItemDataBound">
<LayoutTemplate>
<section class="quick-links">
<div class="row">
<div class="dfwp-column" style="width: 100%">
<div class="slm-layout-main groupmarker">
<asp:PlaceHolder ID="groupContainer" runat="server" />
</div>
</div>
</div>
</section>
</LayoutTemplate>
<ItemTemplate>
<ul class="dfwp-list">
<li><%# Eval("Title") %></li>
<div>
<asp:ListView runat="server" ID="ItemsListView" ItemPlaceholderID="itemContainer">
<LayoutTemplate>
<section class="quick-links">
<div class="row">
<div class="dfwp-column" style="width: 100%">
<div class="slm-layout-main groupmarker">
<ul class="dfwp-list">
<asp:PlaceHolder ID="itemContainer" runat="server" />
</ul>
</div>
</div>
</div>
</section>
</LayoutTemplate>
<ItemTemplate>
<li>
<div class="item">
<div class="link-item">
<asp:HyperLink Target="_blank" ID="hyperlink" NavigateUrl='<%# Eval("Url") %>' Text='<%# Eval("Title") %>' runat="server" />
</a>
</div>
</div>
</li>
</ItemTemplate>
</asp:ListView>
</div>
</ul>
</ItemTemplate>
<EmptyDataTemplate>
<span>No data was returned.</span>
</EmptyDataTemplate>
</asp:ListView>
在后面的代码中,您需要在父 ItemDataBound
事件中绑定子 ListView
。
protected void GroupsListView_ItemDataBound(object sender, ListViewItemEventArgs e)
{
ListView itemsListView = (ListView)e.Item.FindControl("ItemsListView");
if (e.Item.ItemType == ListViewItemType.DataItem)
{
itemsListView.DataSource = ((Group)e.Item.DataItem).Items;
itemsListView.DataBind();
}
}
我使用 asp.net 列表视图控件来显示详细信息。每个项目都有组详细信息。出于演示目的,组是硬编码的。
我想显示如下所示的列表视图
现在,我有这个
代码:
<asp:ListView ID="HyperLinkListView" runat="server" ViewStateMode="Disabled" ItemPlaceholderID="itemContainer" GroupPlaceholderID="groupContainer">
<LayoutTemplate>
<section class="quick-links">
<div class="row">
<div class="dfwp-column" style="width: 100%">
<div class="slm-layout-main groupmarker">
<ul class="dfwp-list">
<asp:PlaceHolder ID="groupContainer" runat="server" />
</ul>
</div>
</div>
</div>
</section>
</LayoutTemplate>
<GroupTemplate>
<span>Group</span>
<asp:PlaceHolder ID="itemContainer" runat="server" />
</GroupTemplate>
<ItemTemplate>
<li>
<div class="item">
<div class="link-item">
<asp:HyperLink Target="_blank" ID="hyperlink" NavigateUrl='<%# this.LinkToPlay((((SPListItem)Container.DataItem)["VideoFileName"]).ToString()) %>' Text='<%# Eval("Title") %>' runat="server" />
</a>
</div>
</div>
</li>
</ItemTemplate>
<EmptyDataTemplate>
<span>No data was returned.</span>
</EmptyDataTemplate>
</asp:ListView>
如何实现?
不太清楚你想要什么样的分组。然而,ListView 的功能有限。
首先,您只能按固定数量的项目进行分组。您可以使用 GroupItemCount
属性 定义该数字。您的代码将如下所示
<asp:ListView ID="HyperLinkListView" GroupItemCount="2" runat="server" ViewStateMode="Disabled" ItemPlaceholderID="itemContainer" GroupPlaceholderID="groupContainer">
并像这样在 html 中生成
GROUP
My car video
My sample video
GROUP
Another sample video
Item 4
假设您需要 GROUP A
和 GROUP B
等,您通常会使用绑定表达式,如下所示
<GroupTemplate>
<span>Group <%# Container.DataItemIndex %></span>
<asp:PlaceHolder ID="itemContainer" runat="server" />
</GroupTemplate>
但是 GroupItemTemplate 不是 DataBind 进程的一部分,因此基于获取和索引的系统不会那样工作。
因此,如果您想添加 A
、B
等,则需要客户端解决方案。因此,首先为 alhpa 字符添加一个占位符,然后给 <span>
一个 class 所以 jQuery 可以找到它。我用过 {index}
和 groupIndex
<GroupTemplate>
<span class="groupIndex">Group {index}</span>
<asp:PlaceHolder ID="itemContainer" runat="server" />
</GroupTemplate>
现在使用简单的 jQuery 方法,所有占位符都被替换为正确的字母字符。
<script type="text/javascript">
$(document).ready(function () {
$('.quick-links .groupIndex').each(function (index, element) {
var char = String.fromCharCode(65 + index);
$(this).html($(this).html().replace('{index}', char));
});
});
</script>
请注意,.quick-links
来自 LayoutTemplate 中的 <section class="quick-links">
部分。
为了灵活的解决方案,您可以使用嵌套 ListView
您需要更新 HTML 和 CSS 以获得所需的外观。
ASPX 代码
<asp:ListView ID="GroupsListView" runat="server" ViewStateMode="Disabled" ItemPlaceholderID="groupContainer" OnItemDataBound="GroupsListView_ItemDataBound">
<LayoutTemplate>
<section class="quick-links">
<div class="row">
<div class="dfwp-column" style="width: 100%">
<div class="slm-layout-main groupmarker">
<asp:PlaceHolder ID="groupContainer" runat="server" />
</div>
</div>
</div>
</section>
</LayoutTemplate>
<ItemTemplate>
<ul class="dfwp-list">
<li><%# Eval("Title") %></li>
<div>
<asp:ListView runat="server" ID="ItemsListView" ItemPlaceholderID="itemContainer">
<LayoutTemplate>
<section class="quick-links">
<div class="row">
<div class="dfwp-column" style="width: 100%">
<div class="slm-layout-main groupmarker">
<ul class="dfwp-list">
<asp:PlaceHolder ID="itemContainer" runat="server" />
</ul>
</div>
</div>
</div>
</section>
</LayoutTemplate>
<ItemTemplate>
<li>
<div class="item">
<div class="link-item">
<asp:HyperLink Target="_blank" ID="hyperlink" NavigateUrl='<%# Eval("Url") %>' Text='<%# Eval("Title") %>' runat="server" />
</a>
</div>
</div>
</li>
</ItemTemplate>
</asp:ListView>
</div>
</ul>
</ItemTemplate>
<EmptyDataTemplate>
<span>No data was returned.</span>
</EmptyDataTemplate>
</asp:ListView>
在后面的代码中,您需要在父 ItemDataBound
事件中绑定子 ListView
。
protected void GroupsListView_ItemDataBound(object sender, ListViewItemEventArgs e)
{
ListView itemsListView = (ListView)e.Item.FindControl("ItemsListView");
if (e.Item.ItemType == ListViewItemType.DataItem)
{
itemsListView.DataSource = ((Group)e.Item.DataItem).Items;
itemsListView.DataBind();
}
}