用asp+javascript實現動態資料聯動,不重新整理

來源:互聯網
上載者:User
javascript|動態|資料|重新整理 /////////////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層級聯動都可以做,只不過麻煩而已,當然,你也可以用其他的方法,或者用一個表來對應演算法,這隨便你,我這例子也是從我實際開發中得來的一點經驗積累,主要是為了思路清晰,為不懂程式的人好維護,所以將組織分開,因為鄙人從不維護,嘿嘿。

夏天要過去了,呵呵,祝大家安康!祝未來的中秋佳節開心,我又要一個人在外地過嘍。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。