基於ASP：表控制我們如何創建一個THEAD？

Question

從關於這個問題的MSDN article，我們可以看到，我們創建了一個TableHeaderRow包含TableHeaderCell秒。

但他們補充表格標題是這樣的：

myTable.Row.AddAt(0, headerRow); 

，它輸出HTML：

<table id="Table1" ... > 
<tr> 
    <th scope="column" abbr="Col 1 Head">Column 1 Header</th> 
    <th scope="column" abbr="Col 2 Head">Column 2 Header</th> 
    <th scope="column" abbr="Col 3 Head">Column 3 Header</th> 
</tr> 
<tr> 
    <td>(0,0)</td> 
    <td>(0,1)</td> 
    <td>(0,2)</td> 
</tr> 

... 

，它應該有<thead>和<tbody>（因此它可以無縫使用的tablesorter）： ）

<table id="Table1" ... > 
<thead> 
<tr> 
    <th scope="column" abbr="Col 1 Head">Column 1 Header</th> 
    <th scope="column" abbr="Col 2 Head">Column 2 Header</th> 
    <th scope="column" abbr="Col 3 Head">Column 3 Header</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>(0,0)</td> 
    <td>(0,1)</td> 
    <td>(0,2)</td> 
</tr> 
    ... 
    </tbody> 

的HTML代碼的aspx是

<asp:Table ID="Table1" runat="server" /> 

我怎樣才能輸出正確的語法？

---

正如信息，該GridView控制了這個建在，我們只需要設置Accesbility並使用HeaderRow

gv.UseAccessibleHeader = true; 
gv.HeaderRow.TableSection = TableRowSection.TableHeader; 
gv.HeaderRow.CssClass = "myclass"; 

但問題是，對於Table控制。

Answer 1

只是找到一種方法來做到這一點，我們就需要使用從基控件繼承我們自己的控件，例如Table

public class myTable : System.Web.UI.WebControls.Table 
{ 
    protected override void OnPreRender(EventArgs e) 
    { 
     Table table = Controls[0] as Table; 

     if (table != null && table.Rows.Count > 0) 
     { 
      // first row is the Table Header <thead> 
      table.Rows[0].TableSection = TableRowSection.TableHeader; 
      // last row is the Footer Header <tfoot> (comment for not using this) 
      table.Rows[table.Rows.Count - 1].TableSection = TableRowSection.TableFooter; 

      FieldInfo field = typeof(WebControl).GetField("tagKey", BindingFlags.Instance | BindingFlags.NonPublic); 
      foreach (TableCell cell in table.Rows[0].Cells) 
       field.SetValue(cell, HtmlTextWriterTag.Th); 
     } 
     base.OnPreRender(e); 
    } 
} 

正常工作與DataGrid以及

public class myDataGrid : System.Web.UI.WebControls.DataGrid 
{ 
    protected override void OnPreRender(EventArgs e) 
    { 
     Table table = Controls[0] as Table; 

     if (table != null && table.Rows.Count > 0) 
     { 
      // first row is the Table Header <thead> 
      table.Rows[0].TableSection = TableRowSection.TableHeader; 
      // last row is the Footer Header <tfoot> (comment for not using this) 
      table.Rows[table.Rows.Count - 1].TableSection = TableRowSection.TableFooter; 

      FieldInfo field = typeof(WebControl).GetField("tagKey", BindingFlags.Instance | BindingFlags.NonPublic); 
      foreach (TableCell cell in table.Rows[0].Cells) 
       field.SetValue(cell, HtmlTextWriterTag.Th); 
     } 
     base.OnPreRender(e); 
    } 
} 

然後例如您只需要使用它來代替基本控件：

protected void Page_Load(object sender, EventArgs e) 
{ 
    if (!Page.IsPostBack) 
    { 
     myGridView dg = new myGridView(); 
     dg.DataSource = new string[] { "1", "2", "3", "4", "5", "6" }; 
     dg.DataBind(); 

     ph.Controls.Add(dg); 
    } 
} 

和aspx頁面，只需添加一個佔位符，如：

<asp:PlaceHolder ID="ph" runat="server" /> 

full example in pastebin

Answer 2

我會建議您嘗試聲明的語法，但現在我知道你的意思;下面的代碼...：

<asp:Table runat="server" ID="sometable"> 
    <asp:TableHeaderRow BackColor="#ADD9E6"> 
     <asp:TableHeaderCell ID="DataHeader" CssClass="Heading1" Text="Data Header" /> 
    </asp:TableHeaderRow> 
    <asp:TableRow> 
     <asp:TableCell>Data</asp:TableCell> 
    </asp:TableRow> 
</asp:Table> 

...產生相似的結果給你貼什麼：

<table id="sometable" border="0"> 
<tr style="background-color:#ADD9E6;"> 
    <th id="DataHeader" class="Heading1">Data Header</th> 
</tr><tr> 
    <td>Data</td> 
</tr> 
</table> 

也許自定義控件可以創建來解決問題了嗎？好像矯枉過正，但至少你可以控制生成的輸出是什麼。

另一種選擇是從System.Web.UI.WebControls.Table類，並override how the table is rendered繼承。

Answer 3

如果你可以用一個DataGrid時，你的名字在模板中的列會產生一個THEAD和TBODY適當。

Answer 4

請注意：這是一個VB.net回答同樣的問題，你可以簡單地將它轉換爲C＃使用任意數量的免費在線轉換器。

用一個thead & tbody創建一個簡單的HTML表格。我特別需要用於jQuery tablesorter插件的thead元素。

Dim ta As Table 
    Dim thr As TableHeaderRow 
    Dim thc As TableHeaderCell 
    Dim tr As TableRow 
    Dim td As TableCell 

    ta = New Table 
    ' make a header row & explicitly place it into the header section 
    thr = New TableHeaderRow 
    thr.TableSection = TableRowSection.TableHeader 
    ' add cells to header row 
    thc = New TableHeaderCell 
    thc.Text = "ID" 
    thr.Cells.Add(thc) 
    thc = New TableHeaderCell 
    thc.Text = "DESC" 
    thr.Cells.Add(thc) 
    ' create a data row & append cells to it 
    tr = New TableRow 
    td = New TableCell 
    td.Text = "101" 
    tr.Cells.Add(td) 
    td = New TableCell 
    td.Text = "VB.net is not so bad." 
    tr.Cells.Add(td) 
    ' append the header & row to the table 
    ta.Rows.Add(thr) 
    ta.Rows.Add(tr) 

    ' add the new table to your page 
    Page.Controls.Add(ta) 

Answer 5

我在這上百萬年晚了，但我只是需要做同樣的事情。它的處理和網格視圖一樣。

 foreach (var item in dynamicData) 
     { 
      var c = new TableHeaderCell() 
      c.Text = item.Whatever; 
      hr.Cells.Add(c); 
     } 
     //This is the important line 
     hr.TableSection = TableRowSection.TableHeader; 

     MyTable.Rows.Add(hr); 

Answer 6

添加TableSection="TableHeader"到TableHeaderRow，如：

<asp:TableHeaderRow ID="TableHeaderRow2" 
runat="server" TableSection="TableHeader" >