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

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级别联动都可以做,只不过麻烦而已,当然,你也可以用其他的方法,或者用一个表来对应算法,这随便你,我这例子也是从我实际开发中得来的一点经验积累,主要是为了思路清晰,为不懂程序的人好维护,所以将组织分开,因为鄙人从不维护,嘿嘿。

夏天要过去了,呵呵,祝大家安康!祝未来的中秋佳节开心,我又要一个人在外地过喽。

时间: 2024-09-23 07:17:19

用asp+javascript实现动态数据联动,不刷新的相关文章

ASP + XML + JavaScript 实现动态无限级联动菜单

javascript|xml|菜单|动态|联动菜单 我做某个项目时,有需求的是做一个动态的无限级的联动菜单.由于本人比较懒于是上网找找有关的代码,但很多都没有满足需求,其中有一编文章是用 JavaScript对XML文件操作来实现无限级联动菜单的,我们可结合ASP来完成对数据库值的读取,然后写入XML文件,再用JavaScript 读出来并且控制它的联动.这儿的关键是把数据库内的N层数据类读出来然后正确写入XML文件中:我的数据库表结构是这样的:'tbl_Class 列名 数据类型 长度  说明

原生JavaScript实现动态省市县三级联动下拉框菜单实例代码_javascript技巧

像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 先给大家展示下测试结果: 未做任何选择时: 选择时: 代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>三级联动测试</titl

用ASP的方法动态写出JavaScript的表单验证的函数checkSubmit()

javascript|表单验证|动态|函数 <%'请转存为CheckForm_JS.asp使用 '*****************************************************************************'函数名称:CheckForm_JS(frmName,errStr)'功能:用ASP的方法动态写出JavaScript的表单验证的函数checkSubmit()'使用方法:1.<!--Include File=URL+本函数所在的页>;' 

Excel如何实现图表与数据联动的动态图表

  公司常常会将员工的工作业绩用柱形图展示出来.在用Excel制作图表时,图表的数据源多是手动根据现有数据选取的,但有时员工的人数并不是固定不变的,这就意味着原始的数据区域也是可变的,有可能是持续增加的,这样,数据增加后还得手动更新图表的数据源,这样操作起来比较费事.其实,如果将原始数据进行可变性设置,就能实现图表与数据联动的动态图表. 如需利用柱形图展示员工的工作业绩,当员工人数增加或减少时,柱形图的个数实现自动进行相应的变化,即增加或减少(图1).在一般操作中,实例中柱形图的数值系列的数据源

JavaScript如何获得从java程序输入的动态数据

问题描述 JavaScript如何获得从java程序输入的动态数据 JavaScript如何获得从java程序输入的动态数据.具体的格式怎么写 解决方案 在java程序中把数据保存到session里传到前台的jsp页面,然后在前台的jsp页面里用js就可以取出了 session.setAttribute("AttName",Object); 保存 session.getAttribute("AttName") 取出 解决方案二: 动态数据报表

我的ASP之旅:二级联动菜单制作

菜单|联动菜单     这个问题其实已经蛮老了,不过作为刚学ASP3个月的我来说,还是有必要写下来强化自己的基础知识.     就拿最常用的"省市下拉列表联动"作为例子吧!     在我们制作网站会员注册信息时,一般会涉及到填写自己所在省/市,如果用input或textarea做成填写形式不太理想.所以大部分网站都会选择联动下来列表形式,做起来也不算很复杂,同时看上去也很轻松.         具体做法如下:         1.设计数据库         我们选用Access数据库.

JS实现table表格数据排序功能(可支持动态数据+分页效果)_javascript技巧

asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用数组自带的sort排序,进行表格重组.已在.net mvc 中测试过.支持分页.(申明一点.只对当前页面数据排序 无刷新,对所有页面排序的话,肯定需要刷新.这点我还在解决中.)希望有新想法的高手们,给下指点. 下面把html的代码贴出来: <!DOCTYPE HTML

asp.net DropDownList实现二级联动效果_实用技巧

最近在做新闻发布系统的时候,用到了二级联动,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们.下面是效果图: 下面来讲解一下实现的方法: 1.在.aspx页面中,拖入两个DroDownList控件.代码如下: <tr> <td>新闻风格:</td> <td><asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True&q

排序-asp.net repeater 绑定数据后 怎么改变显示的顺序

问题描述 asp.net repeater 绑定数据后 怎么改变显示的顺序 <ul style=" margin-left:20px"> <asp:Repeater ID="rep_data" runat="server"> <ItemTemplate> <li ><p ><span><%# Eval("data").ToString()%>: