用asp+javascript实现动态数据联动,不刷新,多级
作者:admin 日期:2008-06-30
/////////////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级别联动都可以做,只不过麻烦而已,当然,你也可以用其他的方法,或者用一个表来对应算法,这随便你,我这例子也是从我实际开发中得来的一点经验积累,主要是为了思路清晰,为不懂程序的人好维护,所以将组织分开,因为鄙人从不维护,嘿嘿。
//引有自http://www.jscode.cn/arthtml/art4451.htm
/////////////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级别联动都可以做,只不过麻烦而已,当然,你也可以用其他的方法,或者用一个表来对应算法,这随便你,我这例子也是从我实际开发中得来的一点经验积累,主要是为了思路清晰,为不懂程序的人好维护,所以将组织分开,因为鄙人从不维护,嘿嘿。
//引有自http://www.jscode.cn/arthtml/art4451.htm
评论: 0 | 引用: 0 | 查看次数: 1613
发表评论
你没有权限发表留言!