如何使多行跨度柱的ListView数据表跨度、数据表、使多行、ListView

2023-09-07 04:42:26 作者:栀夏暖阳

我需要从一个HTML表的数据库显示的数据。我目前使用的是ListView控件。

I need to display data from a database in a html table. I am currently using a ListView control.

我想最终的HTML表格来呈现类似以下,其中一些行有一个 ROWSPAN 属性大于一。这样做的原因是,一些字段具有几排信息,但对应于相同的逻辑条目

I want the final HTML table to render something like the following, where some rows have a rowspan attribute greater than one. The reason for this is that some fields have several rows of information, but correspond to the same logical entry.

例如:

|---------|---------|----------|----------|
| data    | data    |data      | data     |
|         |         |----------|          |
|         |         |data      |          |
|         |         |----------|          |
|         |         |data      |          |
|---------|---------|----------|----------|
| data    | data    |data      | data     |
|         |         |----------|          |
|         |         |data      |          |
|         |         |----------|          |
|         |         |data      |          |
|---------|---------|----------|----------|
| data    | data    |data      | data     |
|         |         |----------|          |
|         |         |data      |          |
|         |         |----------|          |
|         |         |data      |          |
|         |         |----------|          |
|         |         |data      |          |
|         |         |----------|          |
|         |         |data      |          |
|---------|---------|----------|----------|

什么是做到这一点的ASP.net最简单的方法?

What is the easiest way to accomplish this in ASP.net?

推荐答案

的ListView 不太优雅的解决方案。其主要思想是使用转发的ListView里面并绑定所有的子数据(我的意思是从第三数据在你的例子列),除了第一个记录吧。

Not too elegant solution for ListView. The main idea is to use Repeater inside the ListView and bind all the sub-data(I mean data from the third column in your example) except the first record to it.

<asp:ListView runat="server" ID="lstData">
    <LayoutTemplate>
        <table>
            <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
        </table>
    </LayoutTemplate>
    <ItemTemplate>
        <tr>
            <td <%# GetRowspan((int)Eval("Data.Length")) %>>
                <%# Eval("FirstName") %>
            </td>
            <td <%# GetRowspan((int)Eval("Data.Length")) %>>
                <%# Eval("LastName") %>
            </td>
            <td>
                <%# GetFirst((IEnumerable<string>)Eval("Data")) %>
            </td>
            <td <%# GetRowspan((int)Eval("Data.Length")) %>>
                <%# Eval("Country") %>
            </td>
        </tr>
        <asp:Repeater runat="server" 
            DataSource=<%# GetRest((IEnumerable<string>)Eval("Data")) %>>
            <ItemTemplate>
                <tr>
                    <td>
                        <%# Container.DataItem %>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:Repeater>
    </ItemTemplate>
</asp:ListView>

和落后code:

public override void DataBind()
{
    var item1 = new { FirstName = "John", LastName = "Doe", 
        Data = new[] { "first", "second", "third" }, Country = "US" };
    var item2 = new { FirstName = "Jane", LastName = "Doe", 
        Data = new string[] { }, Country = "CA" };
    var item3 = new { FirstName = "Joe", LastName = "Public", 
        Data = new[] { "first", "second", "third", "fourth" }, Country = "US" };

    lstData.DataSource = new[] { item1, item2, item3 };
    lstData.DataBind();
}

protected string GetRowspan(int length)
{
    if (length == 0)
        return string.Empty;
    else
        return string.Format("rowspan='{0}'", length);
}

protected string GetFirst(IEnumerable<string> data)
{
    return data.FirstOrDefault();
}

protected IEnumerable<string> GetRest(IEnumerable<string> data)
{
    if (data.Any())
        return data.Skip(1);
    else
        return Enumerable.Empty<string>();
}

这在输出所需格式的数据。

this outputs data in the format you want.

但是,如果的ListView 的使用是没有必要的,你可以看看到的GridView 。有更优雅的方式,用它来做到这一点 - 的 ASP.NET GridView的ROWSPAN使用RowCreated事件 - 如何添加表动态ROWSPAN与GridView控件文章

But if the usage of ListView is not necessary you could take a look onto GridView. There is more elegant way to do this by using it - ASP.NET GridView RowSpan using RowCreated Event - How to add Table Dynamic RowSpan with GridView article.