ASP.NET 2.0应用一例:为 GridView 加载空行并点击编辑每一个单元格
作者:孟宪会 发布日期:2009-04-06 18:54:19

直接拷贝一下,保存为test.aspx即可看到效果。

ASPX 代码【C#代码】
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
  protected
void Button1_Click(object sender, System.EventArgs e)
  {
    GridView1.DataSource
= GetData();
    GridView1.DataBind();
  }

  protected
void Button2_Click(object sender, System.EventArgs e)
  {
    string s
= String.Empty;
    
for (int i = 0; i < 5; i++)
    {
      
for (int j = 0; j < 5; j++)
      {
        s
= s + "<li>第 " + i.ToString() + " 行第 " + j.ToString() + " 列的值是:" + Request.Form["txt" + i.ToString() + "_" + j.ToString()];
      }
    }
    ret.Text
= s;
    
// 以下代码只是为了实现在表格里面保留原来的值,如果不需要则可以删除。
    GridView1.DataSource = GetData();
    GridView1.DataBind();
  }

  protected
void GridView1_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
  {
    
if (e.Row.RowType == DataControlRowType.DataRow)
    {
      DataRowView dv
= (DataRowView)e.Row.DataItem;
      
for (int i = 0; i < e.Row.Cells.Count; i++)
      {
        e.Row.Cells[i].Attributes.Add(
"onclick", "showEdit(" + e.Row.RowIndex.ToString() + "," + i.ToString() + ")");
        e.Row.Cells[i].Text
= "<input onblur='lostfocus(this)' name='txt" + e.Row.RowIndex.ToString() + "_" + i.ToString() + "' readonly='readonly' class='noborder' value='" + dv[i].ToString() + "'/>";
      }
    }
  }

  private DataTable GetData()
  {
    DataTable dt
= new DataTable();
    
for (int i = 0; i < 5; i++)
    {
      dt.Columns.Add(
new DataColumn("", typeof(System.String)));
    }
    
    
for (int i = 0; i < 5; i++)
    {
      dt.Rows.Add(dt.NewRow());
      
for (int j = 0; j < 5; j++)
      {
        dt.Rows[i][j]
= Request.Form["txt" + i.ToString() + "_" + j.ToString()];
      }
    }
    
return dt;
  }

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  
<title></title>
  
<style type="text/css">
    .noborder
{border-width: 0px;margin:2px;}
    .hasborder
{border-width: 2px;}
  
</style>

  
<script type="text/javascript">
    
function showEdit(r, c) {
      document.forms[
0].elements["txt" + r + "_" + c].readOnly = false;
      document.forms[
0].elements["txt" + r + "_" + c].className = 'hasborder';
      document.forms[
0].elements["txt" + r + "_" + c].select();
    }
    
function lostfocus(o) {
      o.className
= 'noborder'
      o.readOnly
= true;
    }
  
</script>

</head>
<body>
  
<form id="form1" runat="server">
  
<asp:GridView ID="GridView1" runat="server" ShowHeader="false" OnRowDataBound="GridView1_RowDataBound">
  
</asp:GridView>
  
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="加载表格" />
  
<asp:Button ID="Button2" runat="server" Text="保存数据" OnClick="Button2_Click" />
  
<asp:Label ID="ret" runat="server"></asp:Label>
  
</form>
</body>
</html>

 

ASPX 代码【VB代码】
<%@ Page Language="VB" Debug="true" ValidateRequest="false" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
  Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    GridView1.DataSource
= GetData()
    GridView1.DataBind()
  End Sub
  Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Dim s As String
= String.Empty
    For i As Integer
= 0 To 4
      For j As Integer
= 0 To 4
        s
= s + "<li>第 " + i.ToString() + " 行第 " + j.ToString() + " 列的值是:" + Request.Form("txt" + i.ToString() + "_" + j.ToString())
      Next
    Next
    ret.Text
= s
    
' 以下代码只是为了实现在表格里面保留原来的值,如果不需要则可以删除。    
    GridView1.DataSource = GetData()
    GridView1.DataBind()
  End Sub

  Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
      Dim dv As DataRowView = CType(e.Row.DataItem, DataRowView)
      For i As Integer = 0 To e.Row.Cells.Count - 1
        If e.Row.RowIndex = 0 Then
          e.Row.Cells(i).Style("width") = "80px"
          e.Row.Cells(i).Style("padding") = "2px"
        End If
        e.Row.Cells(i).Attributes.Add("onclick", "showEdit(" + e.Row.RowIndex.ToString() + "," + i.ToString() + ")")
        e.Row.Cells(i).Text = "<input style=
'width:100%' onblur='lostfocus(this)' name='txt" + e.Row.RowIndex.ToString() + "_" + i.ToString() + "' readonly='readonly' class='noborder' value='" + dv(i).ToString() + "'/>"
        
      Next
    End If
  End Sub
  
  Private Function GetData() As DataTable
    Dim dt As DataTable = New DataTable
    For i As Integer = 1 To 5
      dt.Columns.Add(New DataColumn("", GetType(System.String)))
    Next
    For i As Integer = 0 To 4
      dt.Rows.Add(dt.NewRow)
      For j As Integer = 0 To 4
        dt.Rows(i)(j) = Request.Form("txt" + i.ToString() + "_" + j.ToString())
      Next
    Next
    Return dt
  End Function
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <style type="text/css">
    .noborder{border-width: 0px;margin:2px;}
    .hasborder{border-width: 2px;}
  </style>

  <script type="text/javascript">
    function showEdit(r, c) {
      document.forms[0].elements["txt" + r + "_" + c].readOnly =
'';
      document.forms[0].elements["txt" + r + "_" + c].className =
'hasborder';
      document.forms[0].elements["txt" + r + "_" + c].select();
    }
    function lostfocus(o) {
      o.className =
'noborder'
      o.readOnly =
'readonly';
    }
  </script>

</head>
<body>
  <form id="form1" runat="server">
  <asp:GridView ID="GridView1" runat="server" ShowHeader="false" OnRowDataBound="GridView1_RowDataBound">
  </asp:GridView>
  <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="加载表格" />
  <asp:Button ID="Button2" runat="server" Text="保存数据" OnClick="Button2_Click" />
  <asp:Label ID="ret" runat="server"></asp:Label>
  </form>
</body>
</html>

 

原文地址:http://dotnet.aspx.cc/article/47654f82-6a22-4b25-98a0-830e26a7e75e/print.aspx
© 版权所有 【孟宪会之精彩世界】TM 2012