<%@ Page Language="vb" AutoEventWireup="false" Codebehind="jsAddTableRow.aspx.vb" Inherits="vbProject.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script language="javascript">
//用javascript为DataGrid添加一行
//为每一行添加的的控件赋不同的id
function InsertDataGrid()
{
var table = document.getElementById("DataGrid1");
var tr = table.insertRow();
var i = table.rows.length;
var td = tr.insertCell();
var strName = ""
//EmployeeID
td.innerHTML = "<INPUT type='text' id=DataGrid1:_ctl"+i+":txtEmployeeID value=0 style= 'width:0px;'>";
//LastName
td = tr.insertCell();
strName = "DataGrid1:_ctl"+i+":txtPName"
td.innerHTML = "<INPUT type='text' id=DataGrid1:_ctl"+i+":txtLastName > ";
//FirstName
td = tr.insertCell();
td.innerHTML = "<INPUT type='text' id=DataGrid1:_ctl"+i+":txtFirstName>";
//Title
td = tr.insertCell();
td.innerHTML = "<INPUT type='text' id=DataGrid1:_ctl"+i+":txtTitle>";
}
//获取输入的值
//用'%'区分每行的值，用','区分相同行中每一列的值
function getTableText()
{
var table = document.getElementById("DataGrid1")
var len = table.rows.length;
var txtValue = "";//TextBox1的Text值
for(var i = 2;i<len+1;i++)//从2开始
{
var txtEmployeeID = document.getElementById("DataGrid1:_ctl"+i+":txtEmployeeID");
var txtLastName = document.getElementById("DataGrid1:_ctl"+i+":txtLastName");
var txtFirstName = document.getElementById("DataGrid1:_ctl"+i+":txtFirstName");
var txtTitle = document.getElementById("DataGrid1:_ctl"+i+":txtTitle");
var value1 = txtLastName.value;
if (value1>"")//如果工程名称输入则保存数据
{
txtValue += txtEmployeeID.value+","+txtLastName.value+","+txtFirstName.value+","+txtTitle.value+"%";
document.getElementById("TextBox1").value = txtValue;
}
}
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:Label id="Label1" style="Z-INDEX: 101; LEFT: 16px; POSITION: absolute; TOP: 16px" runat="server"
Width="200px" Height="16px">用js实现动态增加DataGrid行</asp:Label>
<asp:TextBox id="TextBox1" style="Z-INDEX: 103; LEFT: 8px; POSITION: absolute; TOP: 352px" runat="server"
Width="0px" TextMode="MultiLine">隐藏的TextBox，用来保存DataGrid中的值</asp:TextBox>
<INPUT id="cmdAddLine" style="Z-INDEX: 104; LEFT: 432px; POSITION: absolute; TOP: 16px"
type="button" value="增加一行" onclick="InsertDataGrid();">
<asp:datagrid id="DataGrid1" style="Z-INDEX: 102; LEFT: 8px; POSITION: absolute; TOP: 40px" runat="server"
Width="100%" AutoGenerateColumns="False" DataKeyField="EmployeeID">
<Columns>
<asp:TemplateColumn>
<HeaderStyle Width="0px"></HeaderStyle>
<ItemTemplate>
<asp:TextBox ID="txtEmployeeID" Runat=server text='<%# DataBinder.Eval(Container.DataItem, "EmployeeID") %>' Width=0>
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="LastName">
<ItemTemplate>
<asp:TextBox ID="txtLastName" Runat=server text='<%# DataBinder.Eval(Container.DataItem, "LastName") %>'>
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="FirstName">
<ItemTemplate>
<asp:TextBox ID="txtFirstName" Runat=server text='<%# DataBinder.Eval(Container.DataItem, "FirstName") %>'>
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Title">
<ItemTemplate>
<asp:TextBox ID="txtTitle" Runat=server text='<%# DataBinder.Eval(Container.DataItem, "Title") %>'>
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn>
<ItemTemplate>
<asp:LinkButton id="LinkButton1" runat="server" CausesValidation="false" Text="删除" CommandName="Delete"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid>
<asp:Button id="Button1" style="Z-INDEX: 105; LEFT: 520px; POSITION: absolute; TOP: 16px" runat="server"
Text="保存数据"></asp:Button>
</form>
</body>
</HTML>
Public Class WebForm1
Inherits System.Web.UI.Page
Private vbp As New vbProject
#Region " Web 窗体设计器生成的代码 "
'该调用是 Web 窗体设计器所必需的。
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
End Sub
Protected WithEvents Label1 As System.Web.UI.WebControls.Label
Protected WithEvents DataGrid1 As System.Web.UI.WebControls.DataGrid
Protected WithEvents TextBox1 As System.Web.UI.WebControls.TextBox
Protected WithEvents Button1 As System.Web.UI.WebControls.Button
'注意: 以下占位符声明是 Web 窗体设计器所必需的。
'不要删除或移动它。
Private designerPlaceholderDeclaration As System.Object
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: 此方法调用是 Web 窗体设计器所必需的
'不要使用代码编辑器修改它。
InitializeComponent()
End Sub
#End Region
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
If Not IsPostBack Then
BindData()
Button1.Attributes.Add("onclick", "getTableText();") '先获取数据
End If
End Sub
'绑定数据
Private Sub BindData()
DataGrid1.DataSource = vbp.GetEmployees()
DataGrid1.DataBind()
End Sub
'获取数据并且保存
Private Sub GetText()
Dim strTotal As String = TextBox1.Text
Dim strRow() As String = strTotal.Split("%") '每行的值
Dim strValue() As String
Dim i, j As Integer
For i = 0 To strRow.Length - 2 '后面有一行空数据，也可以在javascript中控制后面的'%'符号
'这里传入EmployeesAddUp中的参数只有前面4个，所以要转换数组
strValue = strRow(i).Split(",", 4) '对应数据库中每一列的值
vbp.employeeUpdate(strValue(0), strValue(1), strValue(2), strValue(3))
Next
End Sub
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
GetText()
BindData()
End Sub
Private Sub DataGrid1_ItemCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles DataGrid1.ItemCreated
If e.Item.ItemType <> ListItemType.Footer And e.Item.ItemType <> ListItemType.Header And e.Item.ItemType <> ListItemType.Pager Then
Dim lbtn As LinkButton = CType(e.Item.FindControl("LinkButton1"), LinkButton)
lbtn.Attributes.Add("onclick", "return confirm('你确定要删除吗？')")
End If
End Sub
Private Sub DataGrid1_DeleteCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles DataGrid1.DeleteCommand
If vbp.EmployeeDelete(DataGrid1.DataKeys(e.Item.ItemIndex)) = -1 Then
Response.Write("<script language=javascript> window.alert('删除数据出错，该数据可能在其他地方用到！')</script>")
End If
BindData()
End Sub
End Class