Как визуализировать таблицу данных с несколькими столбцами в ряду строк с помощью ListView - PullRequest
Новая
       18

Как визуализировать таблицу данных с несколькими столбцами в ряду строк с помощью ListView

3 голосов
/ 31 января 2012

Мне нужно отобразить данные из базы данных в HTML-таблице.В настоящее время я использую элемент управления ListView.

Я хочу, чтобы окончательная таблица HTML отображала что-то вроде следующего, где некоторые строки имеют атрибут rowspan больше единицы.Причина этого заключается в том, что некоторые поля имеют несколько строк информации, но соответствуют одной и той же логической записи.

Например: 

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

Какой самый простой способ сделать это в ASP.net?

Ответы [ 2 ]

6 голосов
/ 01 февраля 2012

Не слишком элегантное решение для ListView.Основная идея состоит в том, чтобы использовать Repeater внутри ListView и связать все под-данные (я имею в виду данные из третьего столбца в вашем примере), за исключением первой записи к нему. 

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

икод позади: 

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

это выводит данные в нужном вам формате.

Но если использование ListView не является необходимым, вы можете взглянуть на GridView.Есть более элегантный способ сделать это, используя его - ASP.NET GridView RowSpan с использованием события RowCreated - Как добавить Table Dynamic RowSpan с помощью статьи GridView .

0 голосов
/ 31 января 2012 
protected override void RenderContents(HtmlTextWriter output)
{
 var builder = new StringBuilder();
 builder.Append("<table>");
 for(int i=0;i<dt1.rows.count;i++)
 {
     builder.Append("<tr>");
     builder.Append("<td>");
     builder.Append(dt1.rows[i].ToString());
     builder.Append("</td>");

     builder.Append("<td>");
     builder.Append(dt1.rows[i].ToString());
     builder.Append("</td>");
     builder.Append("</td>");

     builder.Append("<table>");
     builder.Append("<tr>");
    for(int j=0;i<dt2.rows.count;j++)
    {
       builder.Append("<td>");builder.Append(dt2.rows[j].ToString());
       builder.Append("</td>");
    }
    builder.Append("</tr>");
    builder.Append("</table>");
    builder.Append("</tr>");
}
builder.Append("</table>");
output.Write(builder.ToString());
}

предположим, что dt1 как таблица1 и dt2 как внутренняя таблица ... так что подход поможет вам ...

...