javascript - 如何用ASP.NET、Javascript实现表格式布局的解决方案

Question

我们需要实现以下表结构(这是一个示例；数据源是动态的)。请注意，该月有中间的总计(总和)值。

如果我们除了计算出的Total之外还有数据源(日期和金额)，您有什么建议动态生成这种表格样式的布局吗？

Date     Amount
==========================
1  Nov   300
22 Nov   500
30 Nov   200
Total    1000
5  Dec   100
28 Dec   200
Total    300

谢谢。

Answer 1

您可以使用中继器。请注意，此解决方案只是一个示例，可以通过多种方式进行改进。

<table>
    <tr>
        <th>Date</th>
        <th>Amount</th>
    </tr>
    <asp:Repeater ID="myRepeater" runat="server" OnItemDatabound="myRepeater_Databound">
        <ItemTemplate>
            <tr>
                <td><%# Eval("Date", "{0:dd MMM}") %></td>
                <td><%# Eval("Amount") %></td>
            </tr>
            <tr id="trMonthlyTotal" runat="server" Visible="false">
                <td>Total</td>
                <td><asp:Literal id="ltMontlyTotal" runat="server" /></td>
            </tr>
        </ItemTemplate>
    </asp:Repeater>
</table>

然后，在您的代码隐藏中:

int currentMonth = 0;
int monthlyTotal = 0;

protected void Page_Load(object sender, EventArgs e)
{
    DataTable dtDataSource = GetData();
    myRepeater.DataSource = dtDataSource;
    myRepeater.DataBind();
}

protected void myRepeater_Databound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        DataView dv = e.Item.DataItem as DataView;
        DateTime currentDate = Convert.ToDateTime(dv["Date"]);

        if (currentDate.Month != currentMonth && currentMonth != 0)
        {
            HtmlTable trMonthlyTotal = e.Item.FindControl("trMonthlyTotal") as HtmlTableRow;
            Literal ltMonthlyTotal = e.Item.FindControl("ltMonthlyTotal") as Literal;

            trMonthlyTotal.Visible = true;
            ltMontlyTotal = Convert.ToString(monthlyTotal);

            currentMonth = currentDate.Month;
            monthlyTotal = 0; 
        }
        else
        {
            monthlyTotal += Convert.ToInt32(dv["Amount"]);
            if (currentMonth == 0) currentMonth = currentDate.Month;
        }
    } 
}