基本构思：
实现单一数据源的数据关联的功能，首先，将数据源设定为关系型数据库SQL Server2000，在数据库中存在两个相互关联的数据表。当在页面选中表1中的数据时，将在页面显示表2中相关联的数据。选用table来呈现表1和表2的数据信息，便于用户查看！
技术支持：
| 选用技术 | 完成的功能 |
| 1. ajax技术 | 实现页面无刷新的呈现表1和表2的数据信息，完成异步交互。 |
| 2. JavaScript | 使用xmlHttpRequest对象完成页面与服务器的交互，实现服务器的数据在页面显示。 |
| 3. Java | 后台的操作，数据库操作，表1和表2的数据信息在页面以表格形式显示。 |
| 4. JSP | 调用Java类，返回表格数据。 |
| 5. Html | 主页面设计 |
示例说明：
1. HTML页面
触发按钮：
<input id="RelationFieldName" type="button" οnclick="javascript:getRelationFieldName();" value="获取表格"/>
显示区域：
<div id="RelationFieldNameList" >getRelationFieldName</div>
<br>
<div id ="RelationDetails">RelationDetails</div>
2. JavaScript
显示表1的内容：
var xmlHttp;
function getRelationFieldName()
{
createXMLHttpRequest();
xmlHttp.open("POST","./getRelationFieldName.jsp",true);
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(null);
}
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttRequest)
{
xmlHttp=new XMLHttpRequest();
}
}
function handleStateChange()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
document.getElementById("RelationFieldNameList").innerHTML=xmlHttp.responseText;
}else {alert("wrong wrong");}
}
}
显示表2内容用到的主要function：
function getdetail(name,value)
{
createXMLHttpRequest();
xmlHttp.open("get","./getRealionDetails.jsp?name=" + name + "&" + "value=" + value,true);
xmlHttp.onreadystatechange=handleStateChangeDetail; xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(null);
}
function handleStateChangeDetail()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{ document.getElementById("RelationDetails").innerHTML=xmlHttp.responseText;
}else {alert("wrong wrong");}
}
}
3. Java类
3.1 连接数据库dblink_sql(databaseName); 代码略
3.2 关闭数据库closeDB()；代码略
3.3 查询数据库中表1的内容
/**
* @param databaseName
* @param tablename
* @return 页面动态显示的表格，其表的内容可以点击
*/
public String DynamicTable_onclick(String databaseName,String tablename)
{
String sql1="select name from syscolumns where id=object_id";
sql1=sql1+"(";
sql1=sql1+"'";
String sql = (new StringBuilder(sql1)).append(tablename).toString();
sql=sql+"');";
System.out.println(sql);
String fieldnameList="";
StringBuffer fieldname=new StringBuffer();
StringBuffer field=new StringBuffer();
try
{
dblink_sql(databaseName);
Statement stmt= conn.createStatement();
rs=stmt.executeQuery(sql);
while (rs.next())
{
for (int i=0; i< rs.getMetaData().getColumnCount(); i++)
{
field.append(rs.getString(i+1)+",");
}
}
String fieldList=field.toString();
String FieldName=fieldList.substring(0, fieldList.length()-1);
String search="select "+ FieldName+ " from " + tablename ;
System.out.println(search);
ResultSet rs1=stmt.executeQuery(search);
ResultSetMetaData rsmd = rs1.getMetaData();
int numberOfColumns = rsmd.getColumnCount();
fieldname.append(""n<table border=1 algin=""center"">");
fieldname.append("<tr>");
for (int j = 1; j <= numberOfColumns; j++)
{
fieldname.append((new StringBuilder("<th>")).append(rsmd.getColumnName(j)).append("</th>").toString());
}
fieldname.append("</tr>");
fieldname.append("<tbody>");
for (; rs1.next(); fieldname.append("</tr>"))
{
fieldname.append("<tr>");
for (int k = 1; k <= numberOfColumns; k++)
{
String colname = rsmd.getColumnName(k);
fieldname.append((new StringBuilder("<td οnclick=""return getdetail('")).append(colname).append("','").append(rs1.getString(k)).append("');"">").append(rs1.getString(k)).append("</td>").toString());
}
}
fieldname.append("</tbody></table>");
fieldnameList=fieldname.toString();
System.out.println(fieldnameList);
rs.close();
stmt.close();
conn.close();
}
catch(SQLException e){e.printStackTrace();}
return fieldnameList;
}
3.4 根据点击table的单元获取name和value值，查询数据库中表2的内容
/**
* @param name 从表格中得到的“列名”
* @param value 从表格中得到的“列名”的“属性值”
* @return 关联的详细信息
*/
public String RelationsDetails(String databaseName, String tablename, String name, String value)
{
String tdatevalue = "";
String sql="select * from " + tablename + " where " + name + " = " + "'"+ value + "'";
System.out.println(sql);
try
{
dblink_sql(databaseName);
Statement st = conn.createStatement();
ResultSet rs = st.executeQuery(sql);
ResultSetMetaData rsmd = rs.getMetaData();
int numberOfColumns = rsmd.getColumnCount();
StringBuffer tdate = new StringBuffer();
tdate.append(""n<table border=1 algin=""center"">");
tdate.append("</tr>");
for (int i = 1; i <= numberOfColumns; i++)
tdate.append((new StringBuilder("<th>")).append(rsmd.getColumnName(i)).append("</th>").toString());
tdate.append("</tr>");
for (; rs.next(); tdate.append("</tr>"))
{
tdate.append("<tr>");
for (int i = 1; i < 6; i++)
tdate.append((new StringBuilder("<td>")).append(rs.getString(i)).append("</td>").toString());
}
tdate.append("</Table>");
tdatevalue = tdate.toString();
}
catch (Exception e)
{
e.printStackTrace();
}
return tdatevalue;
}
4. JSP
下面，JSP如何调用java类？方法如下：
<%@ page contentType="text/html;charset=GB2312"%>
<%@ page import="manage.*" %>
<%
String result="";
ShowRelationFieldName test = new ShowRelationFieldName();
result += test.DynamicTable_onclick("dschema_test", "student");
response.setContentType("text/html");
out.clear();
out.print(result);
%>
另一个java类的调用方法同上，代码略。
5. 效果图：
当单击主页面button时，在主页面显示如下的表格信息：
| name
| id
| age
|
| aa | 1 | 21 |
| bb | 2 | 24 |
| cc | 1 | 20 |
当单击“aa”时，将在该表格下方显示如下的表格信息：
| name
| id
| age
| Phone
| Address
| Number
|
| aa | 1 | 21 | 0532 | 济南 | 20022458 |
小结：
目前实现了单一数据源的数据关联，下一步即将实现不同数据源的数据关联！
5076
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
