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

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

表

GridView支持带有RowHeaderColumn属性的自定义HeaderColumn。

看一下这个演示页面,了解如何只允许编辑某些行:

ASPX:

 

codebehind(对不起VB.Net, 这里有必要的转换器)

 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, fe write it to the database, senseless with my random sample-data ' GridView1.EditIndex = -1 bindSampleData() End Sub End Class 

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

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