왼쪽 열 머리글로 동적 테이블을 만드는 가장 좋은 방법

Question

사용자 입력에 따라 20 개 이상의 행과 열 수를 갖는 동적 테이블을 만들 수 있습니다. 첫 번째 열은 헤더이며 다른 열은 웹 서비스에서 반환하는 데이터를 사용하여 바인딩해야합니다. 그리고 편집 가능한 행이 거의 없습니다. 사용자가 제출 버튼을 클릭하면 변경된 셀의 유효성을 확인하고 데이터를 처리해야합니다. ASP.net 테이블을 만들고 행과 셀을 하나씩 추가했습니다. 하지만 이것은 재사용 할 수있는 방법이 아니며 헤더로 왼쪽 열이있는 편집 가능한 동적 테이블을 만드는 대안이 있습니까? 당신이 클라이언트 측의 동적 편집 가능한 테이블을 만들려고하는 경우

Answer 1

Here이 작업을 수행 할 수있는 한 방법입니다) 필요한 경우, 주어진 예를 몇 가지 정의가 필요합니다 있지만 논리가 사용할 수 있습니다.

Answer 2

, 당신은 몇 가지 자바 스크립트 프레임 워크와 함께 작동 할 수 있습니다. 저기에 정말 좋은 것들이 있습니다. 나는 최근에 jQuery에 대해 DataTables을 테스트했으며 jQuery에 대해서는 jqGrid을 테스트했습니다.

Answer 3

GridView는 사용자 정의 HeaderColumn을 RowHeaderColumn Property으로 지원합니다.

는 일부 행을 편집 할 수 있도록 제공 할 수있는 방법을 보려면이 데모 페이지에서보세요 :

영문 : VB.Net, here's 컨버터 죄송

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

코드 숨김 (

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