На asp: Управление таблицей, как мы создаем thead?

Question

Из статьи MSDN по теме мы видим, что мы создаем TableHeaderRow, который содержит TableHeaderCell s.

Но они добавляют заголовок таблицы следующим образом:

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> (так, чтобы он работал без проблем с таблицей сортировки) :)

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

полный пример в пастбине

Answer 2

Я опоздал на миллион лет, но мне нужно было сделать то же самое.Он работает так же, как вид сетки.

        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 3

Обратите внимание: это ответ VB.net на тот же вопрос, вы можете просто преобразовать его в C #, используя любое количество бесплатных онлайн-конвертеров.

Создать простую таблицу HTML с thead & tbody.Я специально нуждался в элементе thead для плагина jQuery tablesorter.

    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 4

Добавьте TableSection="TableHeader" к TableHeaderRow как:

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

Answer 5

Если вы могли бы использовать DataGrid при именовании столбцов в шаблоне, он будет соответственно создавать thead и tbody.

Answer 6

Я собирался предложить вам попробовать декларативный синтаксис, но теперь я знаю, что вы имеете в виду; следующий код ...:

<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 и переопределить способ отображения таблицы .