用asp+javascript实现动态数据联动,不刷新

<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

/////////////by xxrl(孔曰成仁,孟曰取e)

/////////////chinese:蒋健华

/////////////email:jjh_115@eyou.com

联动,联动,联动。。。。困扰了好多网友的神经,在csdnasp板块中,总是看到网友们大呼救命,救什么?联动!为什么联动这样受到关注,其实用性无可非议,用户也能认可,可是如果数据是大量并相互关联的,那问题就来了,怎么识别并显示是一个很苦恼的问题。那究竟有没有一个很好的解决办法呢?答案是肯定的,因为我们有aspjavascript,哈哈,那么我们就开始行动吧!

我们要获得的数据,既然要达到联动的效果,肯定这些数据是有关联的,那么我们用这样的实例来说明我们的方法

准备条件:

   sql server 2000 中文企业版,iis5.0+ie5.0+,当然,最好有一个好的编辑器,vs.net就不错,当然,如果你是记事本的拥护者,那我也没办法。l

   我们以人事管理中的部门级别进行联动方法的说明,认识管理中的部门级别可以这样定义,也是实际企业的定义规则,**化工厂/**系统/**部,举例说明就是

××化工厂/营销系统/市场部,在文中,firstorganization表对应的是××化工厂secondorganization对应的是营销系统thirdorganization对应的是市场部

 <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

   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

 

okodbc,我们建好了,数据库也建好了,至于站点的配置,我想大家都应该知道的,这里不再陈述。这里我的站点iphttp://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,页面元素全部准备就绪,下面开始我们真正的联动之旅。

本例子采用aspjavascript交互的方法取数据库中的数据,由于我们在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;

/////////////////初始化第三级菜单的textvalue属性的值,第一个参数值是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

< <script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
阅读更多
个人分类: javascript
上一篇Java Servlet 和 JSP入门教程(3)
下一篇Java Servlet 和 JSP入门教程(4)
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭