用asp＋javascript實現動態數據聯動，不刷新 - 中國WEB開發者網絡 (http://www.webasp.net) -- 技術教程 (http://www.webasp.net/article/) --- 用asp＋javascript實現動態數據聯動，不刷新 (http://www.webasp.net/article/8/7692.htm)

-- 作者：未知 -- 發佈日期： 2003-08-29

/////////////by xxrl(孔曰成仁，孟曰取E) /////////////Chinese:蔣健華 /////////////email:jjh_115@eyou.com 聯動，聯動，聯動。。。。困擾了好多網友的神經，在CSDN－ASP板塊中，總是看到網友們大呼救命，救什麼？聯動！為什麼聯動這樣受到關注，其實用性無可非議，用戶也能認可，可是如果數據是大量並相互關聯的，那問題就來了，怎麼識別並顯示是一個很苦惱的問題。那究竟有沒有一個很好的解決辦法呢？答案是肯定的，因為我們有asp和javascript，哈哈，那麼我們就開始行動吧！ 我們要獲得的數據，既然要達到聯動的效果，肯定這些數據是有關聯的，那麼我們用這樣的實例來說明我們的方法 準備條件： SQL SERVER 2000 中文企業版，IIS5.0+，IE5.0+，當然，最好有一個好的編輯器，VS.NET就不錯，當然，如果你是記事本的擁護者，那我也沒辦法。L 我們以人事管理中的部門級別進行聯動方法的說明，認識管理中的部門級別可以這樣定義，也是實際企業的定義規則，**化工廠/**系統/**部，舉例說明就是 ××化工廠/營銷系統/市場部，在文中，FirstOrganization表對應的是」××化工廠」，SecondOrganization對應的是」營銷系統」，ThirdOrganization對應的是」市場部」 在SQL SERVER 2000中新建兩個表，或者三個表，為了我們能更大限度的發揮聯動的功能，我們建三個表，呵呵。 數據庫名稱：xxrl_STUDY，用戶名xxrl_STUDY,密碼xxrl_STUDY 接著建ODBC數據源，你也可以不用，但我這樣用，呵呵 ODBC名：xxrl_ ODBC,用用戶名xxrl_STUDY，密碼xxrl_STUDY連接，指向xxrl_STUDY數據庫，默認中文設置，測試－－>ok 新建表： 第一個表FirstOrganization SQL腳本如下： if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[FirstOrganization]') and OBJECTPROPERTY(id, N'IsUserTable') = 1) drop table [dbo].[FirstOrganization] GO CREATE TABLE [dbo].[FirstOrganization] ( [id] [int] IDENTITY (1, 1) NOT NULL , [OrganizationName] [varchar] (100) COLLATE Chinese_PRC_CI_AS NOT NULL , [Description] [varchar] (8000) COLLATE Chinese_PRC_CI_AS NULL ) ON [PRIMARY] GO 第二個表SecondOrganization SQL腳本如下： if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[SecondOrganization]') and OBJECTPROPERTY(id, N'IsUserTable') = 1) drop table [dbo].[SecondOrganization] GO CREATE TABLE [dbo].[SecondOrganization] ( [id] [int] IDENTITY (1, 1) NOT NULL , [parentID] [int] NOT NULL , [OrganizationName] [varchar] (100) COLLATE Chinese_PRC_CI_AS NOT NULL , [Description] [varchar] (8000) COLLATE Chinese_PRC_CI_AS NULL , [OrderNumber] [int] NULL ) ON [PRIMARY] GO 第三個表ThirdOrganization SQL腳本如下： if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[ThirdOrganization]') and OBJECTPROPERTY(id, N'IsUserTable') = 1) drop table [dbo].[ThirdOrganization] GO CREATE TABLE [dbo].[ThirdOrganization] ( [id] [int] IDENTITY (1, 1) NOT NULL , [parentID] [int] NOT NULL , [OrganizationName] [varchar] (100) COLLATE Chinese_PRC_CI_AS NOT NULL , [Description] [varchar] (8000) COLLATE Chinese_PRC_CI_AS NULL , [OrderNumber] [int] NULL ) ON [PRIMARY] GO Ok，ODBC，我們建好了，數據庫也建好了，至於站點的配置，我想大家都應該知道的，這裡不再陳述。這裡我的站點IP是http://200.100.100.88 （內部網絡IP） 終於開始寫程序嘍，好累，噗哧，噗哧，剛幫我同事搬東西，歇一會兒，coffee-ing………. 好的，為了方便IIS他老人家，我們也懶得敲多餘的字母，我們是聰明的，不勤勞的程序員，本來程序員就已經夠累的了，還不方便我們自己？嘿嘿，贊同者鼓掌，啪啪啪啪，faint，哪來的鞭炮？啥家的小孩也不好好管管。。。。。。。。。J 新建default.asp文件，我們在寫如下程序， 建立數據庫連接對象， set objconn=server.CreateObject("adodb.connection") objconn.Open " xxrl_ ODBC ","xxrl_STUDY","xxrl_STUDY" 然後打開我們要進行操作的3個數據集 dim sql1,sql2,sql3 sql1="select * from FirstOrganization" sql2 = "select * from SecondOrganization" sql3 = "select * from ThirdOrganization" 『/////////////////////////打開第一組織庫 set rs1=server.CreateObject("adodb.recordset") rs1.Open sql1,objconn,1,1 set rs2=server.CreateObject("adodb.recordset") rs2.Open sql2,objconn,1,1 set rs3=server.CreateObject("adodb.recordset") rs3.Open sql3,objconn,1,1 建一個SELECT類型的HTTP控件，包含在form表單中如下： 『////////////////////控件的初始值是從FirstOrganization中讀取的，FirstOrganization在本例子中只有一個數據就是××化工廠代碼如下： <form name=form1 style="margin:0;" method="post"> <select name=FirstOrganization> <% if rs1.RecordCount >0 then Response.Write"<option value="&rs1(「id」)&」>」&rs1("OrganizationName")&"</option>" Else Response.Write "沒有配置" end if %> </select> </form> 好，這就是我們的聯動功能的頭 下面我們要建立第二個select控件了，第二個select控件中，我們用到了onchange函數，關於這個函數的詳細解釋，請看MSDN。代碼如下(包含在form中)： <select name=SecondOrganization onchange=」ChangeLocationi(form1.SecondOrganization.options[form1.SecondOrganization.selectedIndex].value);」> <option value=」」>-------------</option> <% if rs2.RecordCount<0 then response.write 「<option value=」」」」>庫中沒有部門！</option>」 else while not rs2.eof response.write 「<option value=」&rs2(「id」)&」>」 &rs2(「OrganizationName」)&」</option>」 rs2.movenext wend end if %> </select> OK,第二個也搞定，下面我們來建立第三個SELECT 同樣放在form表單裡，如下： <select name=ThirdOrganization> </select> 不要忘記關數據集噢， rs1.close set rs1 = nothing rs2.close set rs2 = nothing rs3.close set rs3 = nothing ok，頁面元素全部準備就緒，下面開始我們真正的聯動之旅。 本例子採用ASP和JAVASCRIPT交互的方法取數據庫中的數據，由於我們在form表單前我們新建script腳本快，由於要交互，所以我們要這麼寫才能很好的交互 <%=」<script language=javascript>」%> </script> 然後我們就可以在script塊中書寫我們的程序了。 我們的基本操作是根據二級下拉中得出三級下拉，二級我們都從數據庫中取出來了，下面我們要取三級組織的數據了，如下 <%=」<script language=javascript>」%> <%』asp塊 dim sql_GetThirdOrganization sql_GetThirdOrganization = "select * from ThirdOrganization order by id desc" set rs_GetThirdOrganization = server.CreateObject("adodb.recordset") rs_GetThirdOrganization.Open sql_GetThirdOrganization,objconn,1,1 %> var temp,temp_2;//////////////javascript塊 temp=0;///////////////////for循環變量初始化 Related = new Array();//////////////////////數組，用來存放三級組織的id，名稱，和對應的父ID <% temp_2 = 0 『一個臨時變量，用來存放三級組織的個數 while not rs_GetThirdOrganization.eof 『循環第三級組織 %> ////////////三維分別對應的第三級組織的ID，第三級組織的名稱 ////////////第三級別組織的父ID（即第二級別ID） Related[<%=temp_2%>] = new Array("<%=rs_GetThirdOrganization(「id」)%>","<%=rs_GetThirdOrganization(「OrganizationName」)%>","<%=rs_GetThirdOrganization(「parentID」)%>"); <% temp_2 = temp_2 + 1 rs_GetThirdOrganization.movenext wend %> temp = <%=temp_2%>; function ChangeLocation(id){ //// var id = id; 接受二級菜單的選擇的item的索引值 document.form1.ThirdOrganization.length=0; //初始化第三級菜單的長度，下標從0開始 var i = 0; /////////////////初始化第三級菜單的text和value屬性的值，第一個參數值是text 」--------」,二是////////value 空值 document.form1.ThirdOrganization.options[0]=new Option('-------',''); ////////////循環數組，用數組的第三維數（父ID）和函數傳過來的數進行比較 for(i=0;i< temp;i++){ if(Related[i][2]==id){ /////////如果相等，證明在第三級裡面有輸入第二級組織的子集 ///////////////////並將子集（第三級）的值賦給第三個select， document.form1.ThirdOrganization.options[document.form1.ThirdOrganization.length] = new Option(Related[i][1], Related[i][0]); } } } </script> 最後在頁面的最後可不要忘了添加objconn.close噢，呵呵 上面介紹的東西，主要是根據選擇第二個select來聯動第三個select,那麼如果我們在第三個select控件處這樣再定義一個函數如下： <select name=ThirdOrganization onchange=」fnChangeAgain(form1.ThirdOrganization.options[form1.ThirdOrganization.selectedIndex].value)」> </select> 這樣，再在script塊中再寫一個同樣的函數，函數內容同ChangeLocation函數，是不是實現了三級聯動，那麼依此類推，呵呵，10級別聯動都可以做，只不過麻煩而已，當然，你也可以用其他的方法，或者用一個表來對應算法，這隨便你，我這例子也是從我實際開發中得來的一點經驗積累，主要是為了思路清晰，為不懂程序的人好維護，所以將組織分開，因為鄙人從不維護，嘿嘿。 夏天要過去了，呵呵，祝大家安康！祝未來的中秋佳節開心，我又要一個人在外地過嘍。 xxrl(孔曰成仁，孟曰取E) 2003-8-26

webasp.net