Question

我正在创建具有20行以上的动态表，并且可以根据用户输入更改列数。第一列是标题，其他列需要使用从Web服务返回的数据进行绑定。而且几行可以编辑。当用户点击提交按钮时，需要验证更改的单元格并处理数据。我创建了ASP.net表并逐个添加了行和单元格。但这不是可重复使用的方式，是否有任何替代方法可以使用左列作为标题创建可编辑的动态表？

Table

Answer 1

GridView支持使用RowHeaderColumn Property的自定义HeaderColumn。

查看此演示页面，了解如何仅允许对某些行进行编辑：

ASPX：

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

codebehind（对不起VB.Net，here's转换器，如有必要）

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

Answer 2

Here是实现此目的的一种方法，需要对给定示例进行一些自定义，但可以使用逻辑。

Answer 3

如果您尝试为客户端创建动态可编辑表，则可能需要使用某些JavaScript框架。那里真的很棒。我最近为jQuery测试了DataTables，为jqGrid测试了jQuery。

使用左列标题创建动态表的最佳方法

3 个答案: