如何使用ListView呈現具有多個行列的數據表

Question

我需要在html表中顯示數據庫中的數據。我目前正在使用ListView控件。

我希望最終的HTML表格呈現如下所示的內容，其中某些行的rowspan屬性大於1。原因是某些字段有幾行信息，但對應於相同的邏輯條目。

例如：

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

什麼是ASP.net做到這一點最簡單的方法？

Answer 1

爲ListView不太優雅的解決方案。主要思想是在ListView中使用Repeater，並將除第一條記錄以外的所有子數據（我的意思是來自示例中第三列的數據）綁定到它。

<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 using RowCreated Event - How to add Table Dynamic RowSpan with GridView文章。

Answer 2

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的內表... 這樣的做法將幫助你出來......