当重复列=2时,如何在数据列表中重复标题
本文关键字:数据 列表 标题 2时 | 更新日期: 2023-09-27 18:29:15
我的要求是将数据列表显示为下方
Header1 Header2 Header1 Header2
1 Value 1 3 Value 3
2 Value 2 4 Value 4
但我无法重复数据列表的标题部分。我完整的数据列表代码是
<asp:DataList ID="datalstProfileCount" runat="server" RepeatColumns="2" RepeatDirection="Horizontal"
RepeatLayout="Table" ShowHeader="true" OnItemDataBound="datalstProfileCount_ItemDataBound">
<HeaderTemplate>
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#e1e1e0" style="border: solid 1px #e1e1e0;
font-family: Segoe UI; font-size: 12px; font-weight: bold; width: 400px">
<tr style="font-size: 13px; background: #ffedc2; border-bottom: 1px solid #eba602;
border-left: 1px solid #d6d6d6; font-weight: 600; font-size: 13px; padding: 10px 8px;
color: #c82124;">
<td style="width: 80px; color: #c84241; text-align: center; padding: 6px">
Name
</td>
<td style="width: 100px; color: #c84241; text-align: center; padding: 6px">
Total Count
</td>
<td style="width: 100px; color: #c84241; text-align: center; padding: 6px">
Active Members Count
</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#e1e1e0" style="border: solid 1px #e1e1e0;
font-family: Segoe UI; font-size: 12px; font-weight: bold; width: 400px; margin: -1px">
<tr style="font-size: 12px; vertical-align: middle; color: #9d9d9c;">
<td style="text-align: left; width: 80px; color: #333333; padding: 6px">
<asp:Label ID="Label2" runat="server" Text='<%#Eval("Name") %>'></asp:Label>
</td>
<td style="text-align: right; width: 100px; color: #333333; padding: 6px">
<asp:Label ID="lblTotalCount" runat="server" Text='<%#Eval("TotalCount") %>'></asp:Label>
</td>
<td style="text-align: right; width: 100px; color: #333333; padding: 6px">
<asp:Label ID="lblActiveMembersCount" runat="server" Text='<%#Eval("ActiveMembersCount") %>'></asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
<FooterTemplate>
<table border="0" cellpadding="0" cellspacing="0" style="padding-top: 20px" align="center">
<tr>
<td style="font-size: 14px">
Total Count:
</td>
<td style="padding-left: 10px">
<asp:Label ID="lblProfileCount" runat="server" Text="" ForeColor="#C82124" Font-Size="14px"></asp:Label>
</td>
</tr>
<tr>
<td style="font-size: 14px">
Active Members Count:
</td>
<td style="padding-left: 10px">
<asp:Label ID="lblMemberCount" runat="server" Text="" ForeColor="#C82124" Font-Size="14px"></asp:Label>
</td>
</tr>
</table>
</FooterTemplate>
</asp:DataList>
请你们中的任何人帮助我…并提前感谢。。。
添加'If datalistName.Items.Count>1'代码示例:
<HeaderTemplate>
<table>
<tr><td>Header1</td><td>Header2</td></tr>
<%If (data_list_name.Items.Count() > 1) {%>
<tr><td>Header1</td><td>Header2</td></tr>
<%}%>
</table>
</HeaderTemplate>
Header永远不会重复,将Header HTML作为Item Template的一部分。根据.Net Controls的实现,Header是列表的Head。您的列表只会出现一次,然后是您的Item Template,它将根据数据源中的项目数量重复出现,然后是页脚。。
类似这样的东西:
<asp:DataList ID="datalstProfileCount" runat="server" RepeatColumns="2" RepeatDirection="Horizontal" RepeatLayout="Table" ShowHeader="true" OnItemDataBound="datalstProfileCount_ItemDataBound">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
//Header Section
//Data
</ItemTemplate>
</asp:DataList>
如果你仍然有一些困惑,请将你的整个数据列表与你在评论中提到的标题部分和数据部分共享,我将为你提供更新的代码。。
更新答案:
<asp:DataList ID="datalstProfileCount" runat="server" RepeatColumns="2" RepeatDirection="Horizontal"
RepeatLayout="Table" ShowHeader="true" OnItemDataBound="datalstProfileCount_ItemDataBound">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#e1e1e0" style="border: solid 1px #e1e1e0;
font-family: Segoe UI; font-size: 12px; font-weight: bold; width: 400px; margin: -1px">
<tr style="font-size: 13px; background: #ffedc2; border-bottom: 1px solid #eba602;
border-left: 1px solid #d6d6d6; font-weight: 600; font-size: 13px; padding: 10px 8px;
color: #c82124; visibility: hidden;" id="trHeader" runat="server">
<td style="width: 80px; color: #c84241; text-align: center; padding: 6px">
Name
</td>
<td style="width: 100px; color: #c84241; text-align: center; padding: 6px">
Total Count
</td>
<td style="width: 100px; color: #c84241; text-align: center; padding: 6px">
Active Members Count
</td>
</tr>
<tr style="font-size: 12px; vertical-align: middle; color: #9d9d9c;">
<td style="text-align: left; color: #333333; padding: 6px">
<asp:Label ID="Label2" runat="server" Text='<%#Eval("Name") %>'></asp:Label>
</td>
<td style="text-align: right; color: #333333; padding: 6px">
<asp:Label ID="lblTotalCount" runat="server" Text='<%#Eval("TotalCount") %>'></asp:Label>
</td>
<td style="text-align: right; color: #333333; padding: 6px">
<asp:Label ID="lblActiveMembersCount" runat="server" Text='<%#Eval("ActiveMembersCount") %>'></asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
<FooterTemplate>
<table border="0" cellpadding="0" cellspacing="0" style="padding-top: 20px" align="center">
<tr>
<td style="font-size: 14px">
Total Count:
</td>
<td style="padding-left: 10px">
<asp:Label ID="lblProfileCount" runat="server" Text="" ForeColor="#C82124" Font-Size="14px"></asp:Label>
</td>
</tr>
<tr>
<td style="font-size: 14px">
Active Members Count:
</td>
<td style="padding-left: 10px">
<asp:Label ID="lblMemberCount" runat="server" Text="" ForeColor="#C82124" Font-Size="14px"></asp:Label>
</td>
</tr>
</table>
</FooterTemplate>
</asp:DataList>
在服务器端添加此代码:
protected void datalstProfileCount_ItemDataBound(Object sender, DataListItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
if(e.Item.ItemIndex <=1)
{
var headerRow = (System.Web.UI.HtmlControls.HtmlTableRow)e.Item.FindControl("trHeader");
if(headerRow != null)
{
headerRow.Style.Add(HtmlTextWriterStyle.Visibility, "");
}
}
}
}
您可能需要对样式进行一些更改,但这也是可以实现的。