在中继器内的单个单元格中插入表格
Posted
技术标签:
【中文标题】在中继器内的单个单元格中插入表格【英文标题】：Insert table in a single cell inside repeater 【发布时间】：2018-05-22 15:48:50 【问题描述】：我正在尝试使用 asp.net 中继器构建一个表结构，如下所示：
column 1 | Column 2
Row1 cell1 cell2
---------------------------------------
TABLE 1 TABLE 2
----------------------------------
col1|Col2|Col3_ same column and rows are here as well
Row2 row1____|____|____
row2___ |____|_____
row3____|____|_____
但我在为 Row 2 添加 Table 1 和 Table 2 时遇到了困难。我不确定如何在中继器内的单个单元格中添加表格，并且数据需要从 DataTable 绑定。
下面是我的中继器代码：
<asp:Repeater ID="Repeaterp" runat="server">
<HeaderTemplate>
<table>
<tr><th>usedcount</th><th>notUsedCount</th></tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><asp:TextBox runat="server" ID="txtAvai" Text='<%#Eval("Count") %>' ReadOnly="true"></asp:TextBox></td>
<td><asp:TextBox runat="server" ID="txtConv" Text='' ReadOnly="true"></asp:TextBox></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater
任何人都可以就这个问题提出任何想法，非常感谢我吗？
【问题讨论】：
【参考方案1】：您可以在 Repeater 控件中嵌套不同的 asp.net 数据表示控件（例如 asp:Repeater、asp:DataList、asp:GridView 或 asp:Table 等）。我添加了一个快速示例，用于制作具有多个中继器控件的嵌套结构：
.aspx 代码：
<asp:Repeater ID="RepeaterTable" OnItemDataBound="RepeaterTable_ItemDataBound" runat="server">
<HeaderTemplate>
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<asp:Panel ID="PanelTextBoxes" runat="server">
<tr>
<td>
<asp:TextBox ID="txtAvai" Text='<%# Eval("Count") %>' runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="txtConv" Text='' runat="server"></asp:TextBox>
</td>
</tr>
</asp:Panel>
<asp:Panel ID="PanelTables" runat="server">
<tr>
<td>
<asp:Repeater ID="RepeaterTable1" OnItemDataBound="RepeaterTable1_ItemDataBound" runat="server">
<HeaderTemplate>
<table>
<tr>
<th>T1 Col 1</th>
<th>T1 Col 2</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblCol1" runat="server" Text='<%# Eval("Col1") %>'></asp:Label>
</td>
<td>
<asp:Label ID="lblCol2" runat="server" Text='<%# Eval("Col2") %>'></asp:Label>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</td>
<td>
<asp:Repeater ID="RepeaterTable2" OnItemDataBound="RepeaterTable2_ItemDataBound" runat="server">
<HeaderTemplate>
<table>
<tr>
<th>T2 Col 1</th>
<th>T2 Col 2</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblCol1" runat="server" Text='<%# Eval("Col1") %>'></asp:Label>
</td>
<td>
<asp:Label ID="lblCol2" runat="server" Text='<%# Eval("Col2") %>'></asp:Label>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</td>
</tr>
</asp:Panel>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
.aspx.cs 代码：
DataTable TempDT = new DataTable();
protected void Page_Load(object sender, EventArgs e)
if (!IsPostBack)
getData();
// create DataTable 3 x 2
public void getData()
TempDT = new DataTable();
TempDT.Columns.Add("Col1");
TempDT.Columns.Add("Col2");
TempDT.Columns.Add("Count");
TempDT.Rows.Add("Temp", "Temp", 100);
TempDT.Rows.Add("Temp", "Temp", 100);
TempDT.Rows.Add("Temp", "Temp", 100);
// store DataTable into ViewState from lost on PostBack
ViewState["DT"] = TempDT;
RepeaterTable.DataSource = TempDT;
RepeaterTable.DataBind();
// Calls parent Repeater on Binding Data
protected void RepeaterTable_ItemDataBound(object sender, RepeaterItemEventArgs e)
// check Repeater item type is not in edit mode
if (e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem)
DataTable dt = new DataTable();
// get and set DataTable from ViewState
dt = ViewState["DT"] as DataTable;
Repeater RepeaterTable1 = e.Item.FindControl("RepeaterTable1") as Repeater;
Repeater RepeaterTable2 = e.Item.FindControl("RepeaterTable2") as Repeater;
RepeaterTable1.DataSource = dt;
RepeaterTable1.DataBind(); // calls RepeaterTable1_ItemDataBound event
RepeaterTable2.DataSource = dt;
RepeaterTable2.DataBind(); // // calls RepeaterTable2_ItemDataBound event
Panel PanelTextBoxes = e.Item.FindControl("PanelTextBoxes") as Panel;
Panel PanelTables = e.Item.FindControl("PanelTables") as Panel;
// show only first structure
if (e.Item.ItemIndex != 0)
PanelTextBoxes.Visible = false;
PanelTables.Visible = false;
// Calls child Repeater on Binding Data
protected void RepeaterTable1_ItemDataBound(object sender, RepeaterItemEventArgs e)
// check Repeater item type is not in edit mode
if (e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem)
//.. here is code when child repeater is binding
// Calls child Repeater on Binding Data
protected void RepeaterTable2_ItemDataBound(object sender, RepeaterItemEventArgs e)
// check Repeater item type is not in edit mode
if (e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem)
//.. here is code when child repeater is binding
演示图像是：
更新：
如果您不想重复整个结构，只需在RepeaterTable_ItemDataBound 事件中添加以下代码：
Panel PanelTextBoxes = e.Item.FindControl("PanelTextBoxes") as Panel;
Panel PanelTables = e.Item.FindControl("PanelTables") as Panel;
if (e.Item.ItemIndex != 0)
PanelTextBoxes.Visible = false;
PanelTables.Visible = false;
不重复整个结构图演示：
【讨论】：
【参考方案2】：为什么要在转发器的第二项中添加这两个表？ 不需要Repeater==Table
相反，在中继器的<headertemplate> 中放置主表的第一行，第二行包含您想要的所有 2 个表。然后将中继器的<ItemTemplate> 保留在其余行（从第 3 行向下）
您可以通过后面的代码访问这两个表或使用属性或 Eval 设置值
您的 .aspx 可能如下所示：
（我为转发器添加了XmlDataSource1，只是为了使绑定有效，我还使用了属性<%= this.ContentString %>，我将在后面的代码中声明并设置它）
<asp:Repeater ID="Repeaterp" runat="server" DataSourceID="XmlDataSource1">
<HeaderTemplate>
<table>
<%--------Your Master Table--------%>
<tr>
<th>usedcount
</th>
<th>notUsedCount
</th>
</tr>
<tr>
<td>Row1 Cell1</td>
<td>Row1 Cell2</td>
</tr>
<tr>
<td>
<%----------------First Inner Table------------------%>
<asp:Table ID="Table1" runat="server">
<asp:TableHeaderRow>
<asp:TableHeaderCell>
Header
</asp:TableHeaderCell>
<asp:TableHeaderCell>
Header
</asp:TableHeaderCell>
</asp:TableHeaderRow>
<asp:TableRow>
<asp:TableCell>
<%---Add your conents as properties----%>
<%= this.ContentString %>
</asp:TableCell>
<asp:TableCell>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
content
</asp:TableCell>
<asp:TableCell>
content
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
content
</asp:TableCell>
<asp:TableCell>
content
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</td>
<td>
<%----------------Second Inner Table------------------%>
<asp:Table ID="Table2" runat="server">
<asp:TableHeaderRow>
<asp:TableHeaderCell>
Header
</asp:TableHeaderCell>
<asp:TableHeaderCell>
Header
</asp:TableHeaderCell>
</asp:TableHeaderRow>
<asp:TableRow>
<asp:TableCell>
<%---Add your conents as properties----%>
<%= this.ContentString %>
</asp:TableCell>
<asp:TableCell>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
content
</asp:TableCell>
<asp:TableCell>
content
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
content
</asp:TableCell>
<asp:TableCell>
content
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</td>
</tr>
<%-- Closing the second row of master table --%>
<%-- Everything is completed in the repeater's header! --%>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%--continue master table as usual--%> </td>
<td></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</Table>
</FooterTemplate>
</asp:Repeater>
这是后面的代码，注意属性ContentString。以及绑定转发器后如何访问第2行的表：
public partial class _Default : Page
private string strContent;
// notice the property that the tables can read as in the aspx code above
public String ContentString
get return strContent;
protected void Page_Load(object sender, EventArgs e)
strContent = "Your Content";
Repeaterp.DataBind();
// here's how to access the two tables
Table Table1 = (Table)Repeaterp.Controls[0].FindControl("Table1");
Table Table2 = (Table)Repeaterp.Controls[0].FindControl("Table2");
【讨论】：
刚刚更新了我的答案，我制作了 2 个内部表格 asp:Table 并从后面的代码中访问它们。此外，我向转发器添加了一个属性，作为使转发器动态化的另一种方式。跨度> 【参考方案3】：如果你真的想在转发器的第二行有一个表，你可以这样做。
将两个PlaceHolder 添加到ItemTemplate。一个用于带有表格的第二行，一个用于其他行。根据ItemIndex 设置它们的可见性。请注意，使用 GridView 是因为它们成为 html 中的表格元素。
<ItemTemplate>
<asp:PlaceHolder ID="PlaceHolder1" runat="server" Visible='<%# Container.ItemIndex != 1 %>'>
<tr>
<td>
<asp:TextBox runat="server" ID="txtAvai" Text='<%#Eval("Count") %>' ReadOnly="true">
</asp:TextBox>
</td>
<td>
<asp:TextBox runat="server" ID="txtConv" Text='' ReadOnly="true">
</asp:TextBox>
</td>
</tr>
</asp:PlaceHolder>
<asp:PlaceHolder ID="PlaceHolder2" runat="server" Visible='<%# Container.ItemIndex == 1 %>'>
<tr>
<td>
<asp:GridView ID="GridView1" runat="server"></asp:GridView>
</td>
<td>
<asp:GridView ID="GridView2" runat="server"></asp:GridView>
</td>
</tr>
</asp:PlaceHolder>
</ItemTemplate>
如果您希望第 3 行再次成为这 2 个文本框，然后第 4 行是表格等，请在 PlaceHolder 的可见属性中使用 Container.ItemIndex % 2 == 0 和 Container.ItemIndex % 2 == 1，因为上面的演示假定中继器中只有 2 行。
接下来，将OnItemDataBound 事件添加到中继器。
<asp:Repeater ID="Repeaterp" runat="server" OnItemDataBound="Repeaterp_ItemDataBound">
然后在后面的代码中查看被绑定的项目是否是第二行，找到 GridView 并将数据绑定到它们。我为此演示创建了一个虚拟DataTable，但您可以在Repeaterp_ItemDataBound 方法中将任何源绑定到它们
protected void Repeaterp_ItemDataBound(object sender, RepeaterItemEventArgs e)
//check if it is the second row
if (e.Item.ItemIndex == 1)
//find the gridviews in the repeater item using findcontrol
GridView gv1 = e.Item.FindControl("GridView1") as GridView;
GridView gv2 = e.Item.FindControl("GridView2") as GridView;
//create a dummy datatable for this demo
DataTable table = new DataTable();
table.Columns.Add("Col1", typeof(int));
table.Columns.Add("Col2", typeof(string));
table.Columns.Add("Col3", typeof(string));
//add some rows to the table
table.Rows.Add(0, "Row 1", "AAA");
table.Rows.Add(1, "Row 2", "BBB");
table.Rows.Add(2, "Row 3", "CCC");
//bind the data to the gridviews in the second row
gv1.DataSource = table;
gv2.DataSource = table;
gv1.DataBind();
gv2.DataBind();
【讨论】：
【参考方案4】：我会告诉你如何做的逻辑，而不是因为我最近很忙。
1) 将 ItemDataBound 事件添加到您的父中继器（假设 id="parentrepeater"。
2) 在 aspx 文件中的中继器项目模板中添加子中继器（假设 id="childrepeater"。
3) 在父级中继器ItemDataBound中，找到你的子级中继器并绑定数据源。
protected void parent_ItemDataBound(object sender, RepeaterItemEventArgs e)
// check Repeater item type is not in edit mode
if (e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem)
Repeater childRepeater = e.Item.FindControl("childrepeater") as Repeater;
childRepeater.DataSource = "Get Your Datasource here";
childRepeater.DataBind();
使用此方法，可以实现无限多级嵌套中继器。
【讨论】：
以上是关于在中继器内的单个单元格中插入表格的主要内容，如果未能解决你的问题，请参考以下文章