ASP.NET 2.0 - DataGrid với tbody/thead

Question

Có cách nào để có được điều khiển DataGrid để hiển thị các phần tử tbody và thead HTML không?

Answer 1

DataGrid không có thứ gì đó được tích hợp sẵn để đáp ứng nhu cầu của bạn. Hãy xem trên ASP.NET 2.0 CSS Friendly Control Adapters 1.0 chúng được hỗ trợ sẵn cho DataView, nhưng có vẻ như bạn có thể dễ dàng áp dụng ý tưởng này cho DataGrid.

Answer 2

Phải, có vẻ như lưới dữ liệu không hỗ trợ điều này ra khỏi hộp, vì vậy tôi phải tạo một lớp kế thừa từ DataGrid. Sau khi DataGrid đã hiển thị, tôi phân tích cú pháp HTML và chèn các phần tử vào đúng vị trí.

Kèm theo là lớp học của tôi cho những người thích biết làm thế nào. Đây là một cách tiếp cận nhanh chóng và dơ bẩn, vì vậy tôi được chào đón với những ý tưởng tốt hơn.

Imports System.IO 
Imports System.Text 

Public Class TestDataGrid 
    Inherits System.Web.UI.WebControls.DataGrid 

    Private sTHeadClass As String = String.Empty 
    Private sTBodyClass As String = String.Empty 
    Private sTFootClass As String = String.Empty 

#Region " Properties " 

    Public Property THeadClass() As String 
    Get 
     Return sTHeadClass 
    End Get 
    Set(ByVal value As String) 
     sTHeadClass = value 
    End Set 
    End Property 

    Public Property TBodyClass() As String 
    Get 
     Return sTBodyClass 
    End Get 
    Set(ByVal value As String) 
     sTBodyClass = value 
    End Set 
    End Property 

    Public Property TFootClass() As String 
    Get 
     Return sTFootClass 
    End Get 
    Set(ByVal value As String) 
     sTFootClass = value 
    End Set 
    End Property 

#End Region 

    Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter) 

    Dim oMemoryStream As New MemoryStream() 
    Dim oStreamWriter As New StreamWriter(oMemoryStream) 
    Dim oStreamReader As New StreamReader(oMemoryStream) 
    Dim oHtmlTextWriter As New HtmlTextWriter(oStreamWriter) 

    MyBase.Render(oHtmlTextWriter) 

    oHtmlTextWriter.Flush() 

    oMemoryStream.Flush() 
    oMemoryStream.Position = 0 

    Dim sHtml As String = oStreamReader.ReadToEnd() 
    Dim oHtml As New Text.StringBuilder() 

    Dim iPastIndex As Integer = 0 
    Dim iIndex As Integer = sHtml.IndexOf("<tr>") 

    oHtml.Append(sHtml.Substring(iPastIndex, iIndex - iPastIndex)) 

    iPastIndex = iIndex 

    If ShowHeader Then 
     WriteElementStart(oHtml, "thead", sTHeadClass) 

     'Write Header Row 
     iIndex = sHtml.IndexOf("</tr>", iPastIndex) + 5 
     oHtml.Append(sHtml.Substring(iPastIndex, iIndex - iPastIndex)) 
     iPastIndex = iIndex 

     oHtml.Append("</thead>") 
     WriteElementStart(oHtml, "tbody", sTBodyClass) 
    Else 
     WriteElementStart(oHtml, "tbody", sTBodyClass) 
    End If 

    If ShowFooter Then 

     'Writer Body Rows 
     iIndex = sHtml.LastIndexOf("<tr>") 
     oHtml.Append(sHtml.Substring(iPastIndex, iIndex - iPastIndex)) 
     iPastIndex = iIndex 

     WriteElementEnd(oHtml, "tbody") 
     WriteElementStart(oHtml, "tfoot", sTFootClass) 

     'Write Footer Row 
     iIndex = sHtml.LastIndexOf("</table>") 
     oHtml.Append(sHtml.Substring(iPastIndex, iIndex - iPastIndex)) 
     iPastIndex = iIndex 

     WriteElementEnd(oHtml, "tfoot") 

    Else 
     iIndex = sHtml.LastIndexOf("</table>") 
     oHtml.Append(sHtml.Substring(iPastIndex, iIndex - iPastIndex)) 
     iPastIndex = iIndex 

     WriteElementEnd(oHtml, "tbody") 
    End If 

    oHtml.Append(sHtml.Substring(iPastIndex, sHtml.Length - iPastIndex)) 

    writer.Write(oHtml.ToString()) 
    End Sub 

    Private Sub WriteElementStart(ByVal Builder As StringBuilder, ByVal Tag As String, ByVal CssClass As String) 
    If String.IsNullOrEmpty(CssClass) Then 
     Builder.AppendFormat("<{0}>", Tag) 
    Else 
     Builder.AppendFormat("<{0} class='{1}'>", Tag, CssClass) 
    End If 
    End Sub 

    Private Sub WriteElementEnd(ByVal Builder As StringBuilder, ByVal Tag As String) 
    Builder.AppendFormat("</{0}>", Tag) 
    End Sub 

End Class 

Answer 3

Cũng có thể thực hiện qua javascript.

function AddTHEAD(tableName) 
{ 
    var table = document.getElementById(tableName); 
    if(table != null) 
    { 
    var head = document.createElement("THEAD"); 
    head.style.display = "table-header-group"; 
    head.appendChild(table.rows[0]); 
    table.insertBefore(head, table.childNodes[0]); 
    } 
} 

Sau đó, bạn phải gọi chức năng này trên onload thân hình như vậy:

<body onload="javascript: AddTHEAD('DataGridId')"> 

Nguồn: http://www.codeproject.com/KB/grid/HeaderOnEachPage.aspx

Answer 4

Trong khi tôi thích câu trả lời bằng cách "user186197", rằng bài viết trên blog sử dụng phản ánh, mọi thứ có thể gặp sự cố trong môi trường lưu trữ không đáng tin cậy. Dưới đây là những gì chúng tôi sử dụng, không có hack:

public class THeadDataGrid : System.Web.UI.WebControls.DataGrid 
{ 
    protected override void OnPreRender(EventArgs e) 
    { 
     this.UseAccessibleHeader = true; //to make sure we render TH, not TD 

     Table table = Controls[0] as Table; 

     if (table != null && table.Rows.Count > 0) 
     { 
      table.Rows[0].TableSection = TableRowSection.TableHeader; 
      table.Rows[table.Rows.Count - 1].TableSection = TableRowSection.TableFooter; 
     } 

     base.OnPreRender(e); 
    } 
}