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

Answer 2

如果问题只是关于布局，那么它应该非常简单，因为“总”行的细胞数与其他细胞数相同。只需将CSS类应用于这些行，就可以使它们具有可区分性。

问题是，如何检索数据？它是否也包括总数，还是必须在运行中计算？

如果它必须是一个运行总计，那么你可以使用GridView，Repeater或ListView来创建表，并注册控件的OnItemDataBound / OnRowDataBound事件来计算它。我确信您可以通过DataItem访问这些值，这些事件可以在这些事件中使用，通过比较当前行的月份和前一行，您知道何时插入总行，并重置您的计数器。

Answer 3

您可以从这里获得想法：

<html>
<body>
    <script>
        var data =[
            {d:1, m:'nov', a:300},
            {d:22, m:'nov', a:500},
            {d:30, m:'nov', a:20},          
            {d:5, m:'dec', a:1000},
            {d:28,m:'dec', a:200},
            {d:9,m:'dec', a:300}
        ];

        var total = 0 ;
        var prev='';

        var htm = [];
        htm.push('<table border="1">');
        htm.push('<tr><th>Date</th><th>Amount</th></tr>');
        for(var i=0;i<data.length;i++){
            var d = data[i].d;
            var m = data[i].m;
            var a = data[i].a;

            if(prev!='' && prev!=m){
                htm.push('<tr style="font-weight:bold;"><td>Total</td><td>' + total + '</td></tr>');
                total = 0;
            }
            total = total + a;
            prev = m;

            htm.push('<tr><td>' + d + ' ' + m + '</td><td>' + a + '</td></tr>');            
        }
        htm.push('<tr style="font-weight:bold;"><td>Total</td><td>' + total + '</td></tr>');
        htm.push('</table>');

        document.write(htm.join(''));
    </script>
</body>
</html>

Answer 4

你应该看看jquery。此外，还有一个非常好的插件，您可以轻松地实现一个很好的分离模板：Pure。优点是您可以通过WebService懒惰地加载数据。

但是，正如Gidon评论的那样，您可以通过简单地使用标准的asp.net机制并构建表服务器端来轻松实现想要的行为，例如。使用嵌套的Repeater / DataGrid或任何datacontrol。

亲切的问候

Answer 5

为什么需要Javascript？这是表格数据，使用表格。

<table>
    <thead>
        <tr>
            <th scope="col">Date</th>
            <th scope="col">Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1 Nov</td>
            <td>300</td>
        </tr>
        <tr>
            <td>22 Nov</td>
            <td>500</td>
        </tr>
        <tr>
            <td>30 Nov</td>
            <td>200</td>
        </tr>
        <tr>
            <th scope="row">Total</th>
            <td>1000</td>
        </tr>
        <tr>
            <td>5  Dec</td>
            <td>100</td>
        </tr>
        <tr>
            <td>28 Dec</td>
            <td>200</td>
        </tr>
        <tr>
            <th scope="row">Total</th>
            <td>300</td>
        </tr>
    </tbody>
</table>

我对行标题的语义不是100％肯定，但我很确定这是正确的。

如何使用ASP.NET，Javascript解决方案实现表格式布局

5 个答案: