用javascript实现动态增加DataGrid行

最新推荐文章于 2022-01-18 17:57:30 发布

码视野

最新推荐文章于 2022-01-18 17:57:30 发布

阅读量2.8k

点赞数

分类专栏： asp.net(vb.net) 文章标签： datagrid javascript textbox asp button server

本文链接：https://blog.csdn.net/IamBird/article/details/714204

版权

asp.net(vb.net) 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<%@ 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="增加一行" οnclick="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

码视野

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
用javascript实现动态增加DataGrid行

WebForm1 //用javascript为DataGrid添加一行 //为每一行添加的的控件赋不同的id function InsertDataGrid() { var table = document.getElementById("DataGrid1"); var tr = table.insertRow(); var i = table.rows.length; v
复制链接

扫一扫