我在作ASP程序時經常遇到這種情況:
將數據庫中的數據(如所有雇員名)列在列表框中,程序要求進行選擇其中一項或多項提交到下一個頁面。
但麻煩的是如果數據(如雇員)過多,會給客戶的選擇帶來麻煩--要從很長的列表中進行數據定位。最好的解決方法是用戶在選擇前采用模糊查詢的方式進行數據定位,准確找出需要選擇的雇員名,再選擇、提交。
問題出現在我們程序員面前:如何不刷新頁面篩選從數據庫中篩選數據。本人的方法有兩種:
1、采用雙列表框的方法
2、采用XML方法
本文主要介紹第二種方法:采用XML的解決方法
編程思想:
首先將放入需要放入列表框中的數據從數據庫下載到XML數據島中;
使用Javascript將查詢條件與數據島中每一項進行對比,把符合條件的放入列表框中;
這樣即可實現不刷新頁面篩選數據庫中的內容。
其缺點是不具備實時性。
實現:
下面以SQL Server為例,篩選NorthWind庫中Employees表的雇員名進行說明。
<Html>
<head>
<title>不刷新頁面查詢的方法</title>
<meta http-equiv="Content-Type" content="text/Html; charset=gb2312">
</head>
<script language="Javascript">
<!--初始化,將數據島中數據裝入列表框中-->
function loadinsel()
{
var employeeid,employeelastname; //分別存放雇員ID和雇員名字
root=document.all.XMLemployees.childNodes.item(0); //返回第一個元素--employee
for(i=0;i<root.childNodes.length;i++){
getnode=root.childNodes(i); //得到empolyee的一個子節點
employeeid=root.childNodes(i).getAttribute("emid");//得到雇員ID
for(j=0;j<getnode.childNodes.length;j++){
employeeinf=getnode.childNodes(j).nodeName;
if(employeeinf=="lastname"){
employeelastname=getnode.childNodes(j).text; //得到雇員名字
}
}
//將得到的employeeid和employeelastname寫進select中
if(employeeid!="" && employeelastname!=""){
option1=document.createElement("option");
option1.text=employeelastname;
option1.value=employeeid;
employeelist.add(option1);
}
}
}
<!--初始化,從數據島中檢索數據,裝入列表框中-->
function findemployee(){
var employeelastname,employeeid; //分別存放雇員名字和雇員ID
employeelastname="";
employeeid="";
findtext=window.findcontent.value; //得到檢索條件
//清除列表框
employeecount=employeelist.length
for(i=employeecount-1;i>=0;i--){
employeelist.remove(i);
}
root=window.XMLemployees.childNodes(0);
for(i=0;i<root.childNodes.length;i++){
getitem=root.childNodes(i); //得到empolyee的一個子節點
employeeid=root.childNodes(i).getAttribute("emid"); //得到雇員ID
for(j=0;j<getitem.childNodes.length;j++){
if(getitem.childNodes(j).nodeName=="lastname"){
employee_temp=getitem.childNodes(j).text;
if(employee_temp.indexOf(findtext)!=-1){ //查找匹配項
employeelastname=employee_temp; //找到名字匹配的雇員
}
}
}
//將符合條件的雇員信息寫進select中
if(employeeid!="" && employeelastname!=""){
option1=document.createElement("option");
option1.value=employeeid;
option1.text=employeelastname;
window.employeelist.add(option1);
employeeid="";
employeelastname="";
}
}
}
</script>
<body bgcolor="#FFFFFF" text="#000000" onload="Javascript:loadinsel()">
<table width="80%" border="1">
<tr>
<td> 請輸入查詢條件:
<input type="text" name="findcontent">
<input type="button" name="Submit" value="查找" onclick="Javascript:findemployee()">
</td>
</tr>
<tr>
<td> 查詢結果:
<select name="employeelist">
</select>
</td>
</tr>
</table>
<?XML version="1.0" encoding="gb2312"?>
<%
servername="wyb" '服務器名
user="sa" '用戶名
pw="" '用戶密碼
databasename="northwind" '數據庫名
set conn=server.CreateObject("adodb.connection")
conn.Open "DRIVER=SQL Server;SERVER="&servername&";UID="&user&";pwd="&pw&";DATABASE="&databasename
set rs=server.CreateObject("adodb.recordset")
sql="Select employeeid,lastname from employees order by employeeid"
rs.Open sql,conn%>
<!--將數據庫中信息放入數據島中-->
<xml id="XMLemployees">
<employee>
<%do while not rs.eof%>
<employeeitem emid="<%=rs("employeeid")%>">
<lastname><%=rs("lastname")%></lastname>
</employeeitem>
<%rs.movenext%>
<%loop%>
</employee> </XML>
<%rs.close
set rs=nothing
%>
</body>
</Html>