none
我想要点击一个gridview的行然后让gridview外面的一个div显示,怎么做? RRS feed

  • 问题

  • 我想要点击一个gridview的行然后让gridview外面的一个div显示,然后点击旁边这个div又隐藏怎么做?div里面放一个删除按钮去删除gridview里这一行的数据,怎么做?
    2012年11月15日 2:53

答案

  • <%@ Page Language="C#" AutoEventWireup="true" CodeFile="单击触发事件1.aspx.cs" Inherits="单击GRIDVIEW触发事件_单击触发事件1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .div1
            {
                border: 1px solid #006600;
                background-color: red;
                height: 200px;
                width: 200px;
                display: none;
            }
            .div2
            {
                border: 1px solid #006600;
                background-color: red;
                height: 200px;
                width: 200px;
            }
        </style>
        <script type="text/javascript">
            function myDiv1() {
                var div = document.getElementById("thediv");
                var hrefD = document.getElementById("div");
                div.className = "div2";
                hrefD.href = "javascript:myDiv2()";
            }
    
            function myDiv2() {
                var div = document.getElementById("thediv");
                var hrefD = document.getElementById("div");
                div.className = "div1";
                hrefD.href = "javascript:myDiv1()";
            }
    
            function myDiv3(txt1, txt2, txt3) {
                var div = document.getElementById("div3");
                var GridView = document.getElementById("GridView1");
                if (div.className == "div1") {
                    div.className = "div2";
                    document.getElementById("<%= TextBox1.ClientID %>").value = txt1;
                    document.getElementById("<%= TextBox2.ClientID %>").value = txt2;
                    document.getElementById("<%= TextBox3.ClientID %>").value = txt3;
                }
                else {
                    div.className = "div1";
                    document.getElementById("<%= TextBox1.ClientID %>").value = "";
                    document.getElementById("<%= TextBox2.ClientID %>").value = "";
                    document.getElementById("<%= TextBox3.ClientID %>").value = "";
                }
            }
    
            function SetText(txt1, txt2, txt3) {
                document.getElementById("<%= TextBox1.ClientID %>").value = txt1;
                document.getElementById("<%= TextBox2.ClientID %>").value = txt2;
                document.getElementById("<%= TextBox3.ClientID %>").value = txt3;
            }  
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
            <asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound"
                AutoGenerateColumns="False" CellPadding="4" DataKeyNames="Sno" DataSourceID="SqlDataSource1"
                ForeColor="#333333" GridLines="None">
                <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                <Columns>
                    <asp:BoundField HeaderText="Sno" DataField="Sno" ReadOnly="True" SortExpression="Sno" />
                    <asp:BoundField HeaderText="Ano" DataField="Ano" SortExpression="Ano" />
                    <asp:BoundField HeaderText="Date" DataField="Date" SortExpression="Date" />
                </Columns>
                <EditRowStyle BackColor="#999999" />
                <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                <SortedAscendingCellStyle BackColor="#E9E7E2" />
                <SortedAscendingHeaderStyle BackColor="#506C8C" />
                <SortedDescendingCellStyle BackColor="#FFFDF8" />
                <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:testConnectionString %>"
                SelectCommand="SELECT * FROM [SA]"></asp:SqlDataSource>
        </div>
        <a href="javascript:myDiv1()" id="div">单击</a>
        <div runat="server" class="div1" id="thediv">
        </div>
        <div runat="server" class="div1" id="div3">
            <asp:Button ID="Button1" runat="server" Text="删除" onclick="Button1_Click" />
        </div>
        </form>
    </body>
    </html>
    

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using System.Data.SqlClient;
    using System.Configuration;
    
    public partial class 单击GRIDVIEW触发事件_单击触发事件1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                //DataTable dt = new DataTable();
                //dt.Columns.Add(new DataColumn("ID", typeof(int)));
                //dt.Columns.Add(new DataColumn("Name", typeof(string)));
                //dt.Columns.Add(new DataColumn("Description", typeof(string)));
                //for (int i = 0; i < 5; i++)
                //{
                //    DataRow dr = dt.NewRow();
                //    dr[0] = i;
                //    dr[1] = "Name_" + i;
                //    dr[2] = "Description_" + i;
                //    dt.Rows.Add(dr);
                //}
                //GridView1.DataSource = dt;
                //GridView1.DataBind();
            }
        }
    
        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
    
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.Attributes.Add("onclick", "myDiv3('" +
                  e.Row.Cells[0].Text + "','" + e.Row.Cells[1].Text + "','" + e.Row.Cells[2].Text + "')");
                // thediv.Style.Add("display", "none");// 隐藏:
                // thediv.Style.Add("display", "block");//显示:
                // e.Row.Attributes.Add("onclick", "javascript:myDiv1()");
                // e.Row.Attributes.Add("onclick", "javascript:myDiv1()");
                // e.Row.Attributes.Add("onclick", "SetText('" +
                //   e.Row.Cells[0].Text + "','" + e.Row.Cells[1].Text + "','" + e.Row.Cells[2].Text + "')");
            }
        }
        protected void Button1_Click(object sender, EventArgs e)
        {
            SqlConnection sqlcon = new SqlConnection();
            sqlcon.ConnectionString = ConfigurationManager.ConnectionStrings["testConnectionString"].ConnectionString;
            sqlcon.Open();
    
            string str1 = "delete from SA where Sno='" + TextBox1.Text.Trim() + "'";//根据Sno删除记录
            SqlCommand sqlcmd1 = new SqlCommand(str1, sqlcon);
            sqlcmd1.ExecuteScalar();
    
            sqlcon.Close();
            sqlcon.Dispose();
            GridView1.DataBind();
            TextBox1.Text = "";
            TextBox2.Text = "";
            TextBox3.Text = "";
        }
    }

    应该就是这样了,单击GRIDVIEW任意一行,显示DIV,再次单击隐藏。单击删除按钮后重新绑定GRIDVIEW。
    2012年11月15日 5:38

全部回复

  • 你是想要隐藏一个删除按钮,然后单击行,触发事件,每一行的删除按钮都出现是吗。删除结束后按钮也隐藏?
    2012年11月15日 3:14
  • 不是的,我想要如图的效果
    2012年11月15日 3:24
  • 不是很明白你的意思,你是想要加个复选框,然后单击上面的删除按钮触发事件删除吗?

    如果是这样的话你就要循环读取checkbox然后选中的就删除。

    2012年11月15日 3:29
  • 不是的,我想要如图的效果

    我明白你的意思了。你是想在GRIDVIEW中单击任意一行,就弹出一个DIV,里面可以删除。

    2012年11月15日 5:36
  • <%@ Page Language="C#" AutoEventWireup="true" CodeFile="单击触发事件1.aspx.cs" Inherits="单击GRIDVIEW触发事件_单击触发事件1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .div1
            {
                border: 1px solid #006600;
                background-color: red;
                height: 200px;
                width: 200px;
                display: none;
            }
            .div2
            {
                border: 1px solid #006600;
                background-color: red;
                height: 200px;
                width: 200px;
            }
        </style>
        <script type="text/javascript">
            function myDiv1() {
                var div = document.getElementById("thediv");
                var hrefD = document.getElementById("div");
                div.className = "div2";
                hrefD.href = "javascript:myDiv2()";
            }
    
            function myDiv2() {
                var div = document.getElementById("thediv");
                var hrefD = document.getElementById("div");
                div.className = "div1";
                hrefD.href = "javascript:myDiv1()";
            }
    
            function myDiv3(txt1, txt2, txt3) {
                var div = document.getElementById("div3");
                var GridView = document.getElementById("GridView1");
                if (div.className == "div1") {
                    div.className = "div2";
                    document.getElementById("<%= TextBox1.ClientID %>").value = txt1;
                    document.getElementById("<%= TextBox2.ClientID %>").value = txt2;
                    document.getElementById("<%= TextBox3.ClientID %>").value = txt3;
                }
                else {
                    div.className = "div1";
                    document.getElementById("<%= TextBox1.ClientID %>").value = "";
                    document.getElementById("<%= TextBox2.ClientID %>").value = "";
                    document.getElementById("<%= TextBox3.ClientID %>").value = "";
                }
            }
    
            function SetText(txt1, txt2, txt3) {
                document.getElementById("<%= TextBox1.ClientID %>").value = txt1;
                document.getElementById("<%= TextBox2.ClientID %>").value = txt2;
                document.getElementById("<%= TextBox3.ClientID %>").value = txt3;
            }  
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
            <asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound"
                AutoGenerateColumns="False" CellPadding="4" DataKeyNames="Sno" DataSourceID="SqlDataSource1"
                ForeColor="#333333" GridLines="None">
                <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                <Columns>
                    <asp:BoundField HeaderText="Sno" DataField="Sno" ReadOnly="True" SortExpression="Sno" />
                    <asp:BoundField HeaderText="Ano" DataField="Ano" SortExpression="Ano" />
                    <asp:BoundField HeaderText="Date" DataField="Date" SortExpression="Date" />
                </Columns>
                <EditRowStyle BackColor="#999999" />
                <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                <SortedAscendingCellStyle BackColor="#E9E7E2" />
                <SortedAscendingHeaderStyle BackColor="#506C8C" />
                <SortedDescendingCellStyle BackColor="#FFFDF8" />
                <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:testConnectionString %>"
                SelectCommand="SELECT * FROM [SA]"></asp:SqlDataSource>
        </div>
        <a href="javascript:myDiv1()" id="div">单击</a>
        <div runat="server" class="div1" id="thediv">
        </div>
        <div runat="server" class="div1" id="div3">
            <asp:Button ID="Button1" runat="server" Text="删除" onclick="Button1_Click" />
        </div>
        </form>
    </body>
    </html>
    

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using System.Data.SqlClient;
    using System.Configuration;
    
    public partial class 单击GRIDVIEW触发事件_单击触发事件1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                //DataTable dt = new DataTable();
                //dt.Columns.Add(new DataColumn("ID", typeof(int)));
                //dt.Columns.Add(new DataColumn("Name", typeof(string)));
                //dt.Columns.Add(new DataColumn("Description", typeof(string)));
                //for (int i = 0; i < 5; i++)
                //{
                //    DataRow dr = dt.NewRow();
                //    dr[0] = i;
                //    dr[1] = "Name_" + i;
                //    dr[2] = "Description_" + i;
                //    dt.Rows.Add(dr);
                //}
                //GridView1.DataSource = dt;
                //GridView1.DataBind();
            }
        }
    
        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
    
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.Attributes.Add("onclick", "myDiv3('" +
                  e.Row.Cells[0].Text + "','" + e.Row.Cells[1].Text + "','" + e.Row.Cells[2].Text + "')");
                // thediv.Style.Add("display", "none");// 隐藏:
                // thediv.Style.Add("display", "block");//显示:
                // e.Row.Attributes.Add("onclick", "javascript:myDiv1()");
                // e.Row.Attributes.Add("onclick", "javascript:myDiv1()");
                // e.Row.Attributes.Add("onclick", "SetText('" +
                //   e.Row.Cells[0].Text + "','" + e.Row.Cells[1].Text + "','" + e.Row.Cells[2].Text + "')");
            }
        }
        protected void Button1_Click(object sender, EventArgs e)
        {
            SqlConnection sqlcon = new SqlConnection();
            sqlcon.ConnectionString = ConfigurationManager.ConnectionStrings["testConnectionString"].ConnectionString;
            sqlcon.Open();
    
            string str1 = "delete from SA where Sno='" + TextBox1.Text.Trim() + "'";//根据Sno删除记录
            SqlCommand sqlcmd1 = new SqlCommand(str1, sqlcon);
            sqlcmd1.ExecuteScalar();
    
            sqlcon.Close();
            sqlcon.Dispose();
            GridView1.DataBind();
            TextBox1.Text = "";
            TextBox2.Text = "";
            TextBox3.Text = "";
        }
    }

    应该就是这样了,单击GRIDVIEW任意一行,显示DIV,再次单击隐藏。单击删除按钮后重新绑定GRIDVIEW。
    2012年11月15日 5:38
  • 如果你的问题解决了的话,帮我看看我的问题。

    http://social.msdn.microsoft.com/Forums/zh-CN/295/thread/5e6a5034-dcdd-404e-81e0-fde658358bab

    在母版页+updatepanel环境下,子页面刷新父页面GRIDVIEW

    2012年11月15日 5:39