效果圖如下:

解決思路:
1.單擊[選擇]時(shí),根據(jù)當(dāng)前選擇(下拉框)的分類ID,使用ajax請(qǐng)求,取得數(shù)據(jù)源(服務(wù)端使用dataSet.getXml()輸出,因?yàn)閿?shù)據(jù)量不是很大,所以就偷懶了)
2.客戶端使用xml數(shù)據(jù)島分頁(yè)顯示(使用數(shù)據(jù)島分頁(yè)比較簡(jiǎn)單,不用寫太多的代碼)
3.搜索時(shí),根據(jù)當(dāng)前選擇(下拉框)的分類ID,和搜索關(guān)鍵字,重新使用ajax請(qǐng)求(好像也可以使用xml的結(jié)果過(guò)濾,但為了方便,重新請(qǐng)求算了),跳到第2步顯示
4.取數(shù)據(jù)時(shí),單擊某行時(shí),使用onclick事件,把當(dāng)前行的tr做為參數(shù),使用dom操作就可以得到tr里的td的值
附:由于沒考慮到其它細(xì)節(jié)的問(wèn)題,所以代碼有點(diǎn)亂,希望各位能多多指導(dǎo),各位的批評(píng)就是我進(jìn)步的最好的捷徑.謝謝
貼出全部代碼,希望能和大家相互交流一下
index.html 顯示頁(yè)面:
<select id="productID" onchange="changeID()" NAME="productID">
<option value="1" selected>1111</option>
<option value="2">2222</option>
<option value="3">3333</option>
</select><br>
<table>
<tr>
<td><input id="selectValue" type="text" size="40"></td><td><a href='#' onclick='show()'><img src='img/btnSelect.gif' /></a></td>
</tr>
</table>
<div id="selectData"></div>
<input id="abc" type="text" size="50%" />
data.js 所有操作js代碼
var xmlHttp;
var xmlContent; //ajax請(qǐng)求后返回保存的數(shù)據(jù)
var key = "";
var id = "";
//---------------------樣式設(shè)置------------------//
var divid = "selectData" //說(shuō)明第4步
var txtValueID = "selectValue"; //說(shuō)時(shí)第2步
var fieldNames = new Array(3); //單擊某行取值是,每列值前添加一個(gè)該值列名
var isShowFieldNames = true; //取值時(shí),是否要顯示列名 true為顯示,false不顯示
fieldNames[0]="編號(hào):";
fieldNames[1]="用戶名:";
fieldNames[2]="密碼:";
var pageSize = 10; //每頁(yè)顯示行數(shù)
var onmouseoverBG = "#DDFFEC"; //鼠標(biāo)移上去該行的背景顏色
var onmouseoutBG = "#ffffff"; //鼠標(biāo)離開后該行的背景顏色
//表頭列名根據(jù)需要修改
var tableHead = "<thead style='background: #DDFFEC;'>";
tableHead += "<th>編號(hào)</th>";
tableHead += "<th>用戶名</th>";
tableHead += "<th>密碼</th>";
tableHead += "</thead>";
//數(shù)據(jù)綁定字段名,修改DATAFLD里的的字段名
var dataFiled = "<td style='border-top: 1px solid #B9E2CC;'><div DATAFLD='F_id'></div></td>";
dataFiled += "<td style='border-top: 1px solid #B9E2CC;'><div DATAFLD='F_userName'></div></td>";
dataFiled += "<td style='border-top: 1px solid #B9E2CC;'><div DATAFLD='F_passWord'></div></td>";
var RequestFile = "getXml1.aspx"; //請(qǐng)求頁(yè)面
//-------------------外部調(diào)用--------------------------//
//顯示選擇
//productID是下拉框ID,請(qǐng)根據(jù)需要修改
function show()
{
$(divid).style.display = ''
$(divid).style.position="absolute"
$(divid).style.backgroundColor="#FFFFFF"
key = "";
id = productID.options[productID.selectedIndex].value;
RequestXML();
}
//分類改變時(shí)隱藏
function changeID()
{
hide();
}
//---------------------內(nèi)部方法,一般不用修改---------------------------//
//選擇某行的值,顯示到文本框
function getCurrentRowData(tr)
{
var tds = tr.getElementsByTagName("td") //得到所有列
var result="";
for(var i = 0; i < tds.length; i++)
{
if(isShowFieldNames){result += fieldNames[i]};
if(i != tds.length -1 )//是否是最后一列
{
result += tr.getElementsByTagName("div")[i].firstChild.nodeValue + ","; //得到第i列的值 + ","
}
else
{
result += tr.getElementsByTagName("div")[i].firstChild.nodeValue; //得到第i列的值
}
}
$(txtValueID).value = result;
hide();
}
//顯示內(nèi)容
function ShowData()
{
var data = $(divid);
var content = "<div id=\"main\" style='border: 1px solid #009966;width:300px;font-size:13px';>";
content += "<div id=\"searchMain\">";
content += "<table><tr><td><input style='border: 1px solid #B9E2CC;' id=\"key\" type=\"text\" /></td><td><a href='#' onclick='Search()'><img style='border:0px;' src='img/btnSearch.gif' /></a></td><td><a href='#' onclick='hide()'><img style='border:0px' src='img/btnCancel.gif' /></a></td></tr></table>";
content += "</div>";
content += "<xml id=\"data_souce\">" + xmlContent + "</xml>";
content += "<div id='resultxml'>"
//----------------翻頁(yè)操作-----------------------//
content += "<table CELLPADDING=0 CELLSPACING=0 width='100%'><tr><td>"
content += "<a href=\"#\" onclick=\"GotoPage('first')\"><img style='border:0px;' src='img/btnFirst.gif'/></a> ";
content += "<a href=\"#\" onclick=\"GotoPage('previous')\"><img style='border:0px;' src='img/btnPrevious.gif'/></a> ";
content += "<a href=\"#\" onclick=\"GotoPage('next')\"><img style='border:0px;' src='img/btnNext.gif'/></a> ";
content += "<a href=\"#\" onclick=\"GotoPage('last')\"><img style='border:0px;' src='img/btnLast.gif'/></a>";
content += "</td>"
content += "<td align='rigth' style='font-size:13px'><span style='color:red' id='page'>1</span><span id='compart'></span><span id='pages'></span>"
content += "</td></tr></table>"
//----------------數(shù)據(jù)源-----------------------//
content += "<table style='text-align:center;font-size:13px;border: 1px solid #B9E2CC;' width='300px' CELLPADDING=0 CELLSPACING=0 id=\"datas\" DATASRC=\"#data_souce\" DATAPAGESIZE=" + pageSize + ">";
//----------------列名-----------------------//
content += tableHead;
content += "<tr style=\"cursor:hand\" onmouseover=\"this.bgColor='" + onmouseoverBG + "'\" onmouseout=\"this.bgColor='" + onmouseoutBG + "'\" onclick=\"getCurrentRowData(this)\">";
content += dataFiled;
content += "</tr>";
content += "</table>";
content += "</div>"
content += "</div>"
data.innerHTML = content;
GetPages();
}
//得到總頁(yè)
function GetPages()
{
var rowCount = $("data_souce").getElementsByTagName("Table"); //得到所有table節(jié)點(diǎn),得到總記錄數(shù)
$("pages").innerHTML = Math.ceil(rowCount.length / pageSize);
$("compart").innerHTML = "/";
if(rowCount.length == 0)
{
$("resultxml").innerHTML = "找不到相關(guān)數(shù)據(jù)";
}
}
//首頁(yè)時(shí)得到當(dāng)前頁(yè)
function firstPage()
{
$("page").innerHTML = 1;
}
//上頁(yè)時(shí)得到當(dāng)前頁(yè)
function previousPage()
{
if($("page").innerHTML != "1")
{
$("page").innerHTML = parseInt($("page").innerHTML) - 1;
}
}
//下頁(yè)時(shí)得到當(dāng)前頁(yè)
function nextPage()
{
if($("page").innerHTML != $("pages").innerHTML)
{
$("page").innerHTML = parseInt($("page").innerHTML) + 1;
}
}
//尾頁(yè)時(shí)得到當(dāng)前頁(yè)
function lastPage()
{
$("page").innerHTML = $("pages").innerHTML;
}
//翻頁(yè)操作
function GotoPage(page)
{
switch(page)
{
case "first":
{
datas.firstPage();
firstPage();
break;
}
case "previous":
{
datas.previousPage();
previousPage();
break;
}
case "next":
{
datas.nextPage();
nextPage();
break;
}
case "last":
{
datas.lastPage();
lastPage();
break;
}
}
}
//搜索
function Search()
{
key = $("key").value;
if(key == "")
{
alert("請(qǐng)輸入搜索關(guān)鍵字");
return;
}
RequestXML();
}
//根據(jù)ID得到對(duì)象
function $(id)
{
return document.getElementById(id);
}
//隱藏選擇
function hide()
{
$(divid).style.display ="none";
}
//創(chuàng)建XMLHttpRequest
function CreateXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
//請(qǐng)求
function RequestXML()
{
var url = RequestFile + "?id=" + id + "&key=" + key;
CreateXMLHttpRequest();
xmlHttp.open("get",url);
xmlHttp.onreadystatechange = GetXMLResult;
xmlHttp.send(null);
}
//接收
function GetXMLResult()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
xmlContent = xmlHttp.responseText;
ShowData();
}
}
else
{
$(divid).innerHTML = "正在讀取數(shù)據(jù)中";
}
}
getXml.aspx 服務(wù)端數(shù)據(jù)源
private void Page_Load(object sender, System.EventArgs e)
{
Response.Write(GetData());
Response.End();
}
private string GetData()
{
string id = Request.QueryString["id"];
string key = Request.QueryString["key"];
string sql = "select * from T_user where F_id = " + id;
if (key.Length > 0){sql += " and F_id like '%" + key + "%'or F_passWord like '%" + key + "%' or F_userName like '%" + key + "%'";}
StringBuilder sb = new StringBuilder();
sb.Append("<?xml version=\"1.0\"?>");
SqlConnection conn = new SqlConnection("server=.;uid=sa;pwd=sa;database=WebTest");
conn.Open();
SqlDataAdapter da = new SqlDataAdapter(sql,conn);
DataSet ds = new DataSet();
da.Fill(ds);
conn.Close();
sb.Append(ds.GetXml());
return sb.ToString();
}

最新評(píng)論