DataGrid中的级联菜单

要点：
1> 通过一个隐藏的页面根据传递的参数从数据源获取数据，并且写到网络流中。
2> 在主页面通过javascript+xmlhttp根据一级菜单提供的参数（省的代码）向隐藏页面发送请求，并且解析返回的响应，并且动态添加到二级菜单中。
3> 由于DropDownList是在DataGrid模板中，因此DropDownList的ID是不确定的，因此需要用js根据父菜单的ID来动态生成子菜单的ID并且用document.getElementByID查找。

隐藏页面代码（default2.aspx.cs):

 1 using  System;
 2 using  System.Data;
 3 using  System.Configuration;
 4 using  System.Collections;
 5 using  System.Web;
 6 using  System.Web.Security;
 7 using  System.Web.UI;
 8 using  System.Web.UI.WebControls;
 9 using  System.Web.UI.WebControls.WebParts;
10 using  System.Web.UI.HtmlControls;
11 using  System.Data.OleDb;
12
13
14 public  partial  class  Default2 : System.Web.UI.Page
15 {
16    /**//// <summary>
17    /// Retrive data from db based on querystring.
18    /// </summary>
19    /// <param name="sender"></param>
20    /// <param name="e"></param>
21    protected void Page_Load(object sender, EventArgs e)
22    { 
23        string id = Request.QueryString["id"];
24        OleDbConnection cnn=new OleDbConnection("provider=microsoft.jet.oledb.4.0; data source="+Server.MapPath(@"Data\Data.mdb"));
25        OleDbDataAdapter adapter=new OleDbDataAdapter("select * from child where provincecode="+id,cnn);
26        DataSet dst=new DataSet();
27        try
28        {
29            adapter.Fill(dst);
30            dst.WriteXml(Response.OutputStream);
31        }
32        catch(Exception ex)
33        {
34            Response.Write(ex.Message);
35        }
36    }
37}
38

主页面服务器端代码：

 1 using  System;
 2 using  System.Data;
 3 using  System.Configuration;
 4 using  System.Web;
 5 using  System.Web.Security;
 6 using  System.Web.UI;
 7 using  System.Web.UI.WebControls;
 8 using  System.Web.UI.WebControls.WebParts;
 9 using  System.Web.UI.HtmlControls;
10 using  System.Data.OleDb;
11
12 public  partial  class  _Default : System.Web.UI.Page
13 {
14    protected void Page_Load(object sender, EventArgs e)
15    {
16        if (!IsPostBack)
17        {
18            //Bind test data to grid view for display purpose.
19            GridView1.DataSource = getProvince();
20            GridView1.DataBind();
21         
22            for (int i = 0; i < GridView1.Rows.Count; i++)
23            {
24                DropDownList list = (DropDownList)(GridView1.Rows[i].FindControl("Province"));
25                //Register client event
26                list.Attributes.Add("onchange", "RequestByGet(this)");
27            }
28           
29        }
30    }
31
32    /**//// <summary>
33    /// Retrieve provinces for upcoming dropdownlist province binding.
34    /// </summary>
35    /// <returns></returns>
36    public DataTable getProvince()
37    {
38        OleDbConnection cnn = new OleDbConnection("provider=microsoft.jet.oledb.4.0; data source=" + Server.MapPath(@"Data\Data.mdb"));
39        OleDbDataAdapter adapter = new OleDbDataAdapter("select * from parent ", cnn);
40        DataSet dst = new DataSet();
41        try
42        {
43            adapter.Fill(dst);
44            
45        }
46        catch (Exception ex)
47        {
48            Response.Write(ex.Message);
49        }
50        return dst.Tables[0];
51    }
52  
53}
54

主页面客户端代码：

 1 <% @ Page Language = " C# "  AutoEventWireup = " true "   CodeFile = " Default.aspx.cs "  Inherits = " _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      < script language = javascript >
 9       function  RequestByGet(parentSelect) { 
10  
11       var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
12       var doc=new ActiveXObject("MSXML2.DOMDocument");
13       var URL;
14       var CityNamelist;
15       var CityCodeList;
16       var body;
17       var postion;
18       var parentSelectID;
19       var childPostion; 
20       var childID;
21       var child;
22       var id;
23       var status;
24       id=parentSelect.value;
25       
26       URL="http://localhost/WebSite4/Default2.aspx?id="+id;
27       xmlhttp.Open("GET",URL, false); 
28       xmlhttp.SetRequestHeader ("Content-Type","text/xml; charset=utf-8"); 
29       xmlhttp.SetRequestHeader ("SOAPAction","http://localhost/WebSite4/"); 
30       xmlhttp.Send(null); 
31       status = xmlhttp.status; 
32      
33      if(status==200)
34       { 
35            body=xmlhttp.responseText;
36            //Parse xml string from response text.
37            postion=body.lastIndexOf("NewDataSet");
38            body=body.substring(0,postion);
39            body=body+"NewDataSet>";
40            doc.loadXML(body);
41
42            //Get cityname nodes and provincecode nodes.
43            CityNamelist=doc.selectNodes("//NewDataSet/Table/CityName");
44            CityCodeList=doc.selectNodes("//NewDataSet/Table/ProvinceCode");
45            parentSelectID=parentSelect.id;
46            childPostion=parentSelectID.lastIndexOf("_");
47            childID=parentSelectID.substring(0,childPostion);
48            childID=childID+"_City";
49            child=document.getElementById(childID);
50            child.length=1;
51
52             for(var i=0;i<CityNamelist.length;i++)
53                   {
54                     var op=new Option(CityNamelist.item(i).text,CityCodeList.item(i).text);
55                     child.options[i+1]=op;
56                   }
57       } 
58     xmlhttp = null; 
59 }  
60 </ script >
61 </ head >
62 < body  >
63      < form id = " form1 "  runat = " server " >
64     
65      < div >
66          < asp:GridView ID = " GridView1 "  runat = " server "  OnSelectedIndexChanged = " GridView1_SelectedIndexChanged "   AutoGenerateColumns = false >
67          < Columns >
68           < asp:TemplateField HeaderText = " Province " >
69          < ItemTemplate >
70          < asp:DropDownList ID = " Province "  runat = server   DataSource = " <%#getProvince()%> "  DataTextField = " ProvinceName "  DataValueField = " ProvinceCode "   >
71          </ asp:DropDownList >
72          </ ItemTemplate >
73          </ asp:TemplateField >
74         
75          < asp:TemplateField HeaderText = " City " >
76          < ItemTemplate >
77          < asp:DropDownList ID = " City "  runat = server  >
78          < asp:ListItem >------</ asp:ListItem >
79          </ asp:DropDownList >
80          </ ItemTemplate >
81          </ asp:TemplateField >
82          < asp:BoundField  HeaderText = " Message "  DataField = " ProvinceName "  DataFormatString = " Just a static message inlcuding the word {0} " />
83          </ Columns >
84          </ asp:GridView >
85     
86      </ div >
87      </ form >
88 </ body >
89 </ html >
90

效果图：



代码下载（含数据库):
Download

其他：
这个例子只是用vs2005做了一个简单的演示，没有考虑代码移植，如果需要用其中的代码片段，请做对应的调整。

转载于:https://www.cnblogs.com/netboy/archive/2006/04/27/386230.html