302班

          java突擊隊
          posts - 151, comments - 74, trackbacks - 0, articles - 14
            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理
           實現無刷新DropDownList聯動效果
          在做一個文章添加功能時,想在選擇大類后,自動將其所屬二級小類顯示出來,使用DropDownList的SelectedIndexChanged事件可以很容易實現,但每次選擇后頁面總要刷新一次,讓人感覺很不爽。為實現DropDownList無刷新二級聯動,這幾天在網上找了些資料,但都無法達到我想要的效果,經過反復調試,現已基本實現了此功能,現將代碼附下。

          一、數據庫設計:
          字段名 數據類型 說明
          ClassID 自動編號 類編號
          ClassName     varchar(8) 類名
          UpClassID int(4) 上級類編號
          ClassLevel int(4) 類級別,1為大類,2為小類

          二、設計步驟:
          1、首先,我們新建一個頁面DropTest.aspx,在其中放入兩個DropDownList控件:DropDownList1和DropDownList2,其完整代碼如下:
          <%@ Page language="c#" Codebehind="DropTest.aspx.cs" AutoEventWireup="false" Inherits="studyWEB.DropTest" %>
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
          <HTML>
           <HEAD>
            <title>WebForm2</title>
            <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
            <meta content="C#" name="CODE_LANGUAGE">
            <meta content="JavaScript" name="vs_defaultClientScript">
            <meta content="
          http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
            <script>
                function load(ClassID){           //ClassID為接收傳遞的大類編號
                var drp2 = document.getElementById("DropDownList2");
                function RemoveAll(oElem) {             //清除DropDownList2的所有項
                var i = 0;
                for (i = oElem.length; i >= 0; i--){
                oElem.options.remove(i);
                }
                }
                RemoveAll(drp2) 
                 var oHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
                 var oDoc = new ActiveXObject("MSXML2.DOMDocument");
                 oHttpReq.open("POST", "DropChild.aspx?ClassID="+ClassID, false);         //調用讀取小類數據的頁面,將大類
                                                                                                                                     // 編號值傳遞過去
                 oHttpReq.send("");
                 result = oHttpReq.responseText;
                 oDoc.loadXML(result);
                 items1 = oDoc.selectNodes("http://CLASSNAME/Table/ClassName");              //讀取所有請求大類所屬小類的類名
                 items2 = oDoc.selectNodes("http://CLASSNAME/Table/ClassID");                   //讀取所有請求大類所屬小類的編號
                 var itemsLength=items1.length;
                 for(i=0;i<itemsLength;i++)                                                                 //將小類的類名和編號賦予DropDownList2
             {
                var newOption = document.createElement("OPTION");
                newOption.text=items1[i].text;
                newOption.value=items2[i].text;
                drp2.options.add(newOption);
             }
                }
            </script>
           </HEAD>
           <body MS_POSITIONING="flowLayout">
            <form id="Form1" method="post" runat="server">
             <asp:DropDownList id="DropDownList1" runat="server"></asp:DropDownList>
             <asp:DropDownList id="DropDownList2" runat="server"></asp:DropDownList>
             <asp:TextBox id="TH" runat="server" BorderStyle="None" ForeColor="White" BorderColor="White"></asp:TextBox>
             <asp:Label id="Label1" runat="server"></asp:Label>
             <asp:Button id="Button1" runat="server" Text="Button"></asp:Button>
            </form>
           </body>
          </HTML>
          該頁面的后臺文件(DropDownList1.aspx.cs)中Page_Load內的代碼如下:
          if(!this.IsPostBack)
             {
              SqlConnection con = new SqlConnection("server=localhost;database=gswebDB;uid=sa;pwd=;");
              SqlDataAdapter da = new SqlDataAdapter("select ClassName,ClassID from classname where ClassLevel=1",con);
              DataSet ds = new DataSet();
              da.Fill(ds);
              this.DropDownList1.DataSource=ds.Tables[0].DefaultView;
              this.DropDownList1.DataTextField = "ClassName";
              this.DropDownList1.DataValueField = "ClassID";
              this.DropDownList1.DataBind();
              this.DropDownList1.Attributes.Add("onchange","load(this.options[this.selectedIndex].value)");  //將ClassID作為參數傳遞給腳本函數load(ClassID),如果要傳遞的是ClassName,應將value改為innerText,但如果大類為中文,則調用小類時出現無法顯示的問題
             // this.DropDownList2.Attributes.Add("onChange","javascript:document.Form1.TH.value=this.options[this.selectedIndex].value;");   //讀取DropDownList2的值,將其賦給一個TextBox控件TH,以獲取DropDownList2的值,為獲取DropDownList2的值,網上有人說可通過使用隱藏的TextBox控件來獲取,我未能實現,因為在客戶端隱藏的TextBox控件也是不可用腳本來訪問的,沒法給其賦值,我只能通過將其樣式、字體顏色設于背景相同來達到隱藏效果,這是一個很笨的方法,有誰有好的方法,請幫我。
             }
          此頁面實現如下功能:首先從數據庫內讀取所有類級別為1(即大類)的類名和類編號,綁定到DropDownList1控件上;然后通過DropDownList1的Attributes屬性調用javascript函數load(ClassID);load()函數通過調用DropChild.aspx頁面,讀取XML流,得到大類所屬小類的ClassName和ClassID。
          2、新建DropChild.aspx頁面文件,其中不插入任何控件和文本,只在其后臺文件(DropChild.aspx.cs)中的Page_Load中加入以下代碼:
          if(this.Request["ClassID"]!=null)
             {
              int state = Convert.ToInt32(this.Request["ClassID"]);
              SqlConnection con = new SqlConnection("server=localhost;database=gswebDB;uid=sa;pwd=;");
              SqlDataAdapter da = new SqlDataAdapter("select ClassName,ClassID from classname where UpClassID='"+state+"'",con);
              DataSet ds = new DataSet("CLASSNAME");
              da.Fill(ds);
              XmlTextWriter writer = new XmlTextWriter(Response.OutputStream, Response.ContentEncoding);
              writer.Formatting = Formatting.Indented;
              writer.Indentation = 4;
              writer.IndentChar = ' ';
              ds.WriteXml(writer);
              writer.Flush();    
              Response.End();
              writer.Close();
                 該方法得到用戶選擇的大類的編號,通過查詢以后得到一個DataSet對象,使用該對象的WriteXML方法直接將內容寫到Response.OutputStream里面然后傳遞到客戶端,客戶端的load方法通過result =oHttpReq.responseText;句話得到一個XML字符串,最后解析此串。
             
              另外,測試獲取DropDownList2值,添加了TextBox控件TH,當點擊Button時,處理事件代碼如下:
          private void Button1_Click(object sender, System.EventArgs e)
            {
             Label1.Text=TH.Text;
            }

          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 陆良县| 靖安县| 松溪县| 长宁区| 合山市| 肥城市| 临安市| 轮台县| 蒙城县| 秦皇岛市| 和田市| 闽清县| 桑植县| 武乡县| 潜江市| 衡东县| 浠水县| 洛南县| 雷山县| 剑阁县| 安阳市| 邵武市| 盘锦市| 潍坊市| 准格尔旗| 阳曲县| 舟曲县| 花垣县| 祁阳县| 垦利县| 古浪县| 乡城县| 和林格尔县| 邵武市| 区。| 稷山县| 墨竹工卡县| 淮北市| 冕宁县| 红桥区| 靖宇县|