Question

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

我想显示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方法，所有占位符都替换为正确的alpha字符。

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

在后面的代码中，您需要在父ListView事件中绑定子ItemDataBound。

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 ListView按数据字段分组？

2 个答案: