JavaScript操作服务器控件之Gridview控件

Posted asdyzh

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript操作服务器控件之Gridview控件相关的知识，希望对你有一定的参考价值。

1.javascript脚本如下：

<script language="javascript" type="text/javascript">
    function gridviewControl()
    {
        //获取GridView的客户端元素
        var table=document.getElementById("GridView1");
        //获取第5列（Test_Column，从0开始）的列标题
        var title = table.getElementsByTagName("th")[5].innerText;
        //循环访问第Test_Column中的控件
        for(var i=1;i<table.rows.length;i++)
        {
          //获取第一个TextBox
          var txt1 = table.rows[i].cells[5].getElementsByTagName("INPUT")[0];
          //获取第二个TextBox
          var txt2 = table.rows[i].cells[5].getElementsByTagName("INPUT")[1];
          //获取 CheckBox
          var chkItem = table.rows[i].cells[5].getElementsByTagName("input")[2];
          //获取第一个DropDownList
          var ddlItem = table.rows[i].cells[5].getElementsByTagName("select")[0];
          //获取第二个DropDwonList
          var ddlItem2 = table.rows[i].cells[5].getElementsByTagName("select")[1];         
         
          //测试结果
           alert("Title Name is " + title
                 + ",  /t/n  第一个TextBox的值 " + txt1.value
                 + ",  /t/n  第二个TextBox的值 " + txt2.value
                 + ",  /t/n  CheckBox的选项值 " + (chkItem.checked ? ‘true‘ : ‘false‘)
                 + ",  /t/n  第一个DropDownList的选项值是： " + ddlItem.value
                 + ",  /t/n  第二个DropDownList的选项值是： " + ddlItem2.value);
       }  
       
   }
    </script>

 

2.aspx代码如下：

 

[c-sharp] view plain copy
 
 
print?
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestWeb._Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml" >  
  6. <head runat="server">  
  7.     <title>Untitled Page</title>  
  8.     <mce:script language="javascript" type="text/javascript"><!--  
  9.     function gridviewControl()  
  10.     {  
  11.         //获取GridView的客户端元素  
  12.         var table=document.getElementById("GridView1");  
  13.         //获取第5列（Test_Column，从0开始）的列标题  
  14.         var title = table.getElementsByTagName("th")[5].innerText;  
  15.         //循环访问第Test_Column中的控件  
  16.         for(var i=1;i<table.rows.length;i++)  
  17.         {   
  18.           //获取第一个TextBox  
  19.           var txt1 = table.rows[i].cells[5].getElementsByTagName("INPUT")[0];  
  20.           //获取第二个TextBox  
  21.           var txt2 = table.rows[i].cells[5].getElementsByTagName("INPUT")[1];  
  22.           //获取 CheckBox  
  23.           var chkItem = table.rows[i].cells[5].getElementsByTagName("input")[2];  
  24.           //获取第一个DropDownList  
  25.           var ddlItem = table.rows[i].cells[5].getElementsByTagName("select")[0];  
  26.           //获取第二个DropDwonList  
  27.           var ddlItem2 = table.rows[i].cells[5].getElementsByTagName("select")[1];            
  28.             
  29.           //测试结果  
  30.            alert("Title Name is " + title  
  31.                  + ",  /t/n  第一个TextBox的值 " + txt1.value   
  32.                  + ",  /t/n  第二个TextBox的值 " + txt2.value   
  33.                  + ",  /t/n  CheckBox的选项值 " + (chkItem.checked ? ‘true‘ : ‘false‘)   
  34.                  + ",  /t/n  第一个DropDownList的选项值是： " + ddlItem.value   
  35.                  + ",  /t/n  第二个DropDownList的选项值是： " + ddlItem2.value);  
  36.   }    
  37.          
  38.            }  
  39.       
  40. // --></mce:script>  
  41. </head>  
  42. <body>  
  43.     <form id="form1" runat="server">  
  44.     <div style="float:left;width:200px;">  
  45.         <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"   
  46.              onrowcreated="GridView1_RowCreated">  
  47.             <Columns>  
  48.                   
  49.                 <asp:BoundField  HeaderText="CH1" />  
  50.                 <asp:BoundField  HeaderText="CH2" />  
  51.                 <asp:BoundField DataField="Column1" HeaderText="   Column1   "  />  
  52.                 <asp:BoundField DataField="Column2" HeaderText="   Column2   " />  
  53.                 <asp:BoundField DataField="Column3" HeaderText="   Column3   " />  
  54.                                   
  55.                 <asp:TemplateField HeaderText="   Test_Column    " >  
  56.                 <ItemTemplate>  
  57.                  <asp:TextBox ID="gdvTxtValue" runat="server" Text=‘<%# Bind("txtData1") %>‘></asp:TextBox>  
  58.                  <br />  
  59.                  <asp:TextBox ID="gdvTxtItem" runat="server" Text=‘<%# Bind("txtData2") %>‘ BackColor="LightBlue"></asp:TextBox>  
  60.                  <br />  
  61.                  <asp:CheckBox ID="gdvchkValue" runat="server" Text=‘<%# Bind("chkData1") %>‘ Enabled=‘<%# Bind("chkEnableData1") %>‘/>  
  62.                  <br />                   
  63.                  <asp:DropDownList ID="ddlItem" runat="server" >  
  64.                  <asp:ListItem Selected="True"></asp:ListItem>  
  65.                  <asp:ListItem Text="I‘m No.11" Value="No.11"></asp:ListItem>  
  66.                  <asp:ListItem Text="I‘m No.12" Value="No.12"></asp:ListItem>  
  67.                  </asp:DropDownList>  
  68.                  <br />  
  69.                  <asp:DropDownList ID="ddlItem2" runat="server">  
  70.                  <asp:ListItem Selected="True"></asp:ListItem>  
  71.                  <asp:ListItem Text="I‘m No.21" Value="No.21"></asp:ListItem>  
  72.                  <asp:ListItem Text="I‘m No.22" Value="No.22"></asp:ListItem>  
  73.                  </asp:DropDownList>  
  74.                    
  75.                  </ItemTemplate>  
  76.                 </asp:TemplateField>  
  77.             </Columns>  
  78.               
  79.         </asp:GridView>  
  80.         <%--<asp:SqlDataSource ID="SqlDataSource1" runat="server"   
  81.             ConnectionString="<%$ ConnectionStrings:PMConnectionString %>"   
  82.             SelectCommand="SELECT * FROM [AP_TRANS]"></asp:SqlDataSource>  
  83.             <br /><%--DataSourceID="SqlDataSource1"--%>  
  84.             <br />  
  85.               
  86.     </div>  
  87.     <div style="position:absolute;left:450px;">  
  88.     <asp:DropDownList ID="DropDownList1" runat="server"  Visible="false" AutoPostBack="True"   
  89.         Height="16px" onselectedindexchanged="DropDownList1_SelectedIndexChanged"   
  90.         Width="149px">  
  91.         <asp:ListItem></asp:ListItem>  
  92.         <asp:ListItem Value="VAlue1">1</asp:ListItem>  
  93.         <asp:ListItem Value="value2">2</asp:ListItem>  
  94.         <asp:ListItem Value="value3">3</asp:ListItem>  
  95.         <asp:ListItem></asp:ListItem>  
  96.     </asp:DropDownList>  
  97.     <asp:Label ID="Label1" runat="server" Text="Label"  Visible="false" Width="200px"></asp:Label>  
  98.     <asp:Button ID="Button1" runat="server" Text="Button"  Visible="false" OnClientClick="gridviewControl()"/>  
  99.     <br />  
  100.     <input type="button" id="btnTest" value="Test_Button" onclick="gridviewControl()" />  
  101.     </div>  
  102.     </form>  
  103. </body>  
  104. </html>  

 

 

3.aspx.cs文件代码如下：

 

[c-sharp] view plain copy
 
 
print?
  1. using System;  
  2. using System.Collections;  
  3. using System.Configuration;  
  4. using System.Data;  
  5. using System.Linq;  
  6. using System.Web;  
  7. using System.Web.Security;  
  8. using System.Web.UI;  
  9. using System.Web.UI.HtmlControls;  
  10. using System.Web.UI.WebControls;  
  11. using System.Web.UI.WebControls.WebParts;  
  12. using System.Xml.Linq;  
  13.   
  14. namespace TestWeb  
  15. {  
  16.     public partial class _Default : System.Web.UI.Page  
  17.     {  
  18.         protected void Page_Load(object sender, EventArgs e)  
  19.         {  
  20.             //DataTable  
  21.             DataTable Record = new DataTable();  
  22.   
  23.             Record.Columns.Add("Column1", typeof(int));  
  24.             Record.Columns.Add("Column2", typeof(string));  
  25.             Record.Columns.Add("Column3", typeof(string));  
  26.             Record.Columns.Add("txtData1", typeof(string));  
  27.             Record.Columns.Add("txtData2", typeof(string));  
  28.             Record.Columns.Add("chkData1", typeof(bool));  
  29.             Record.Columns.Add("chkEnableData1", typeof(bool));  
  30.   
  31.             for (int i = 0; i < 5; i++)  
  32.             {  
  33.                 Record.Rows.Add();  
  34.   
  35.                 Record.Rows[i]["Column1"] = i + 1;  
  36.                 Record.Rows[i]["Column2"] = "参照列1";  
  37.                 Record.Rows[i]["Column3"] = "参照列2";  
  38.                 Record.Rows[i]["txtData1"] = "Data of Box1-" + i.ToString();  
  39.                 Record.Rows[i]["txtData2"] = "Data of Box2-" + i.ToString();  
  40.                 Record.Rows[i]["chkData1"] = true;  
  41.                 Record.Rows[i]["chkEnableData1"] = true;  
  42.   
  43.             }  
  44.   
  45.             GridView1.DataSource = Record;  
  46.             GridView1.DataBind();  
  47.         }  
  48.   
  49.         protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)  
  50.         {  
  51.             //e.Row.Cells[0].Visible = false;  
  52.             e.Row.Cells[0].Style.Add("display", "none");  
  53.             e.Row.Cells[1].Style.Add("display", "none");  
  54.         }  
  55.         protected void l2131l()  
  56.         {  
  57.             //string onclick =" ScriptName=ReturnThsSearch_0&"  
  58.             //               + "  tableId=&valueCount=0&Imode=0‘, null, ‘left=400, top=100, status=no, toolbar= no, location= no, menubar= no ,height=550,width=670‘);";  
  59.             //string onclick =" ScriptName=ReturnSearchVendor_0&"  
  60.                            //+ "  WS_CD=&Imode=1‘,                    null, ‘left=400, top=100, status=no, toolbar= no, location= no, menubar= no ,height=550,width=660‘);";  
  61.         }  
  62.   
  63.         protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)  
  64.         {  
  65.             this.Label1.Text = DropDownList1.Text;  
  66.         }  
  67.   
  68.         protected void Button1_Click(object sender, EventArgs e)  
  69.         {  
  70.             this.Label1.Text =  DropDownList1.SelectedItem.Text + "-" + DropDownList1.SelectedItem.Value;  
  71.             for (int i = 0; i < this.DropDownList1.Items.Count; i++)  
  72.             {  
  73.                 string ttt = this.DropDownList1.Items[0].Text + DropDownList1.Items[i].Value;  
  74.             }  
  75.         }  
  76.     }  
  77. }  

 

--------------------- 本文来自 goforwarder 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/yd2005zxq/article/details/5613262?utm_source=copy 
































以上是关于JavaScript操作服务器控件之Gridview控件的主要内容，如果未能解决你的问题，请参考以下文章

dev 小问题列表

javascript 怎么获取dropdownlist上的值,

ListView.GridViewColumn (*) 宽度

浏览器自动化的一些体会2 webBrowser控件之ajax

Javascript 操作select控件

WPF控件操作之改变父控件之TabControl示例