Best way to create dynamic table with left column header

问题

I'm creating dynamic table which having more than 20 rows and number of columns can be change according to user input. first column is header and other columns need to bind using data returning from web services. And there are few rows which can editable. when user click on submit button need to validate the changed cells and process the data. I have created ASP.net table and added rows and cells one by one. but this is not reusable way of doing, is there any alternative to create editable dynamic table with left column as header?

回答1:

GridView supports custom HeaderColumn with it's RowHeaderColumn Property.

Have a look at this demo-page to see how you could provide to allow editing only for some rows:

aspx:

 <asp:GridView ID="GridView1" runat="server" ShowHeader="true"  
            RowHeaderColumn="Month" AutoGenerateEditButton="True"></asp:GridView>

codebehind(sorry for VB.Net, here's a converter if necessary)

Public Class GridViewDemo
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
           bindSampleData()
        End If
    End Sub

    Private Sub bindSampleData()
        Dim rnd As New Random(Date.Now.Millisecond)
        Dim data As New DataTable("SampleData")
        data.Columns.Add("Month", GetType(String))
        data.Columns.Add("Sold", GetType(Double))
        data.Columns.Add("Units", GetType(Int32))
        For m As Int32 = 1 To 12
            Dim row As DataRow = data.NewRow
            row("Month") = Globalization.CultureInfo.CurrentCulture.DateTimeFormat().GetMonthName(m)
            row("Sold") = 1000 * rnd.Next(1, 10) + rnd.Next(0, 999)
            row("Units") = 10 * rnd.Next(1, 10) + rnd.Next(0, 99)
            data.Rows.Add(row)
        Next

        Me.GridView1.DataSource = data
        Me.GridView1.DataBind()
    End Sub

    Private Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
        If e.Row.RowType = DataControlRowType.DataRow Then
            Dim month As String = DirectCast(DirectCast(e.Row.DataItem, DataRowView)("Month"), String)
            ' don't allow to edit current month's values to demonstrate how to edit certain rows '
            If month.Equals(Globalization.CultureInfo.CurrentCulture.DateTimeFormat().GetMonthName(Date.Now.Month)) Then
                e.Row.Cells(0).Enabled = False
            Else
                e.Row.Cells(0).Enabled = True
            End If
        End If
    End Sub

    Private Sub GridView1_RowEditing(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewEditEventArgs) Handles GridView1.RowEditing
        GridView1.EditIndex = e.NewEditIndex
        bindSampleData()
    End Sub

    Private Sub GridView1_RowCancelingEdit(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCancelEditEventArgs) Handles GridView1.RowCancelingEdit
        GridView1.EditIndex = -1
        bindSampleData()
    End Sub

    Private Sub GridView1_RowUpdating(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewUpdateEventArgs) Handles GridView1.RowUpdating
        Dim records(e.NewValues.Count - 1) As DictionaryEntry
        e.NewValues.CopyTo(records, 0)
        ' Iterate through the array and HTML encode all user-provided values 
        ' before updating the data source.
        Dim entry As DictionaryEntry
        For Each entry In records
           e.NewValues(entry.Key) = Server.HtmlEncode(entry.Value.ToString())
        Next
        ' process the changes, f.e. write it to the database, senseless with my random sample-data '

        GridView1.EditIndex = -1
        bindSampleData()
   End Sub
End Class

回答2:

Here is the one way to do this, need some customization on given example but logic can be used.

回答3:

If you are trying to create dynamic editable tables for client side, you may want to work with some javascript frameworks. There are realy great ones out there. I recently tested out DataTables for jQuery and jqGrid for jQuery.

来源：https://stackoverflow.com/questions/4915949/best-way-to-create-dynamic-table-with-left-column-header

标签

ASP.NET

user-interface

dynamic