技术：ajax
实现背景：选择一个形式的数据库,选择该库中的某个表,再选择该表的某些字段,然后能在当前页上显示了该表的内容，用表格形式显示。
任务：
1.将显示在当前页面上的数据库表添加一个标题，内容就是显示当前表的表名
2.双击该标题栏时，打开一个配置数据源窗体，可以进行如下配置：
（1）重新选择当前库中的表、重新选择字段，单击确定按钮，在当前页中显示新表
（2）输入SQL语句，执行并在当前页中显示结果
（3）对当前页中表加过滤条件，显示满足条件的记录
任务1实现：在读取表内容的jsp页面中，添加表头用于显示当前表的表名并添加单击事件显示配置窗体，单击事件函数
function database_show()
{
dojo.widget.byId("database_floatpane").show();
}
任务2，界面设计如下：
窗体使用dojo框架设计，包含一个tabcontainer，三个tab，每个tab分别对应前面三种功能，本周实现2.1
tab1界面设计如下：
含有两个下拉列表choose_table_name、choose_columns_name，下拉列表choose_table_name 用于显示当前数据库的所有表，choose_columns_name用于显示选中表的所有字段。（如图）
（1）当窗体打开时,在下拉列表choose_table_name中应显示当前库中所有的表。考虑主页面中有显示当前库中表的下拉列表table_name，可以直接复制其中内容，实现代码如下：
var choosetablename=document.getElementById("choose_table_name");
var tablename = document.getElementById("table_name");
for(var i=0;i<tablename.options.length;i++)
{
choosetablename.add(new Option(tablename.options[i].value,tablename.options[i].value));
}
（2）当选择下拉列表choose_table_name中表时，choose_columns_name应该该表所有字段名。考虑添加onChange事件，访问显示表中字段的jsp文件。发现此函数需要三个参数，当前库的类型、当前库、当前表名，当前表名可以通过choose_table_name直接得到，虽然当前库的类型、当前库页可以从当前页面直接得到，但是存在不一致的情况，如：当改变了当前数据库类型时库名改变，但是表并没有改变。为避免此情况发生，可以在当前页面上添加一个隐藏项，用来记录得到当前表名列表时的库的类型和库名。每当选择数据库时就记录一次，
记录隐藏项代码如下：
var databasenStyle="";
for(var i=0;i <radio.length;i++){
if(radio[i].checked) {
databasenStyle=radio[i].value;
break;
}
}
获取三个参数并传递的实现如下：
function choosetablename()
{
var xmlHttpr_columns;
var applicationRoot = "/MIS_Frame_0.20/jsp/";
function createXMLHttpRequestr_columns(){
if(window.ActiveXObject){
xmlHttpr_columns=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttRequest){
xmlHttpr_columns=new XMLHttpRequest();
}
}
function choosetablename1(){
//var tfd=document.getElementById("selected_column");
createXMLHttpRequestr_columns();
xmlHttpr_columns.onreadystatechange=handleStateChanger_columns;
var databasenStyle= document.getElementById("hidden").name;
var databasename=document.getElementById("hidden").value;
var sel1=document.getElementById("choose_table_name");
var tablename="";
for(var i=0;i<sel1.options.length;i++)
if(sel1[i].selected){
tablename=sel1[i].value;
break;
}
//alert("localtablename= "+localtablename+"&standardtablename= "+standardtablename);
xmlHttpr_columns.open("POST",applicationRoot+"columns.jsp",true);
xmlHttpr_columns.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpr_columns.send("databasename="+databasename+"&databasenStyle="+databasenStyle+"&tablename="+tablename);
}
function handleStateChanger_columns(){
if(xmlHttpr_columns.readyState==4){//请求完成
//alert("ok");
if(xmlHttpr_columns.status==200){//成功得到请求内容
//alert("good");
//提示返回的信息
//alert("服务器返回信息:"+xmlHttp1.responseText);
chooseshowfieldvaluer_columns();
}
}
}
function chooseshowfieldvaluer_columns(){
var sList = document.getElementById("choose_columns_name");
//Clear out all old options
var optsLen = sList.options.length;
for(i=0; i<optsLen; i++)
{
sList.remove(0);
}
//add in new options
new showfieldvalueLoaderr_columns("choose_columns_name");
}
function showfieldvalueLoaderr_columns(ToId){
var root=xmlHttpr_columns.responseXML.documentElement;
fieldvalueDefs = root.getElementsByTagName('feild');
list = document.getElementById(ToId);
for(i=0; i<fieldvalueDefs.length; i++){
name = new EZDom(fieldvalueDefs[i]).getChildValue('feildvalue');
list.options[i] = new Option(name, name);
}
}
function EZDom(anElement)
{
this.anElement = anElement;
this.getChildValue = function(name)
{
return this.anElement.getElementsByTagName(name)[0].firstChild.data;
}
}
choosetablename1()
}
（3）单击确定显示设置后的表，需要传递四个参数，当前库类型、当前库名、当前表名、当前所选择列名
在确定按钮的单击事件中添加如下代码
function database_selectcolumnsname()
{
var xmlHttpre_data;
var applicationRoot = "/MIS_Frame_0.20/jsp/";
function createXMLHttpRequestre_data()
{
if(window.ActiveXObject)
{
xmlHttpre_data=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttRequest)
{
xmlHttpre_data=new XMLHttpRequest();
}
}
function database_selectcolumnsname1()
{
//var tfd=document.getElementById("selected_column");
createXMLHttpRequestre_data();
xmlHttpre_data.onreadystatechange=handleStateChangere_data;
var databasenStyle= document.getElementById("hidden").name;
var databasename=document.getElementById("hidden").value;
var sel1=document.getElementById("choose_table_name");
var tablename="";
for(var i=0;i<sel1.options.length;i++)
if(sel1[i].selected){
tablename=sel1[i].value;
break;
}
//alert(tablename);
var sel1=document.getElementById("choose_columns_name");
var columns="";
for(var i=0;i<sel1.options.length;i++)
{
if(sel1.options[i].selected)
{
columns+=sel1.options[i].value;
//columns+=sel1.options[columns_name.selectedIndex].value;
columns+=",";
//break;
}
}
alert(columns);
//alert("localtablename= "+localtablename+"&standardtablename= "+standardtablename);
xmlHttpre_data.open("POST",applicationRoot+"data.jsp",true);
xmlHttpre_data.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpre_data.send("databasename="+databasename+"&databasenStyle="+databasenStyle+"&tablename="+tablename+"&columns="+columns);
}
function handleStateChangere_data()
{
if(xmlHttpre_data.readyState==4)
{//请求完成
//alert("ok");
if(xmlHttpre_data.status==200)
{//成功得到请求内容
//alert("good");
//提示返回的信息
//alert("服务器返回信息:"+xmlHttpre_data.responseText);
document.getElementById("grp3").innerHTML=xmlHttpre_data.responseText;
}
else{alert("wrong wrong");}
}
}
database_selectcolumnsname1();
dojo.widget.byId("database_floatpane").hide();
}
//********************************************************************************************************
function database_cancel()
{
dojo.widget.byId("database_floatpane").hide();
}
var sel1=document.getElementById("database_name");
var databasename="";
for(var i=0;i<sel1.options.length;i++)
if(sel1[i].selected){
databasename=sel1[i].value;
break;
}
var hidden= document.getElementById("hidden");
hidden.name = databasenStyle;
hidden.value = databasename;
浙公网安备 33010602011771号