ASP.Net ListView 按数据字段分组？

Question

我使用asp.net listview 控件来显示详细信息。每个项目都有组详细信息。出于演示目的，组是硬编码的。

我想显示如下所示的列表视图

现在，我有这个

代码：

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

我如何做到这一点？

Answer 1

目前还不清楚你想要什么样的分组。但是 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> 提供一个类，以便 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"> 部分。

Answer 2

对于灵活的解决方案，您可以使用嵌套的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();
    }
}