xml 페이징 ajax 요청 데이터 소스 dom 결과 예제 code_javascript 기술

效果图如下:

解决思路:
1.单击[选择]时,根据当前选择(下拉框)的分类ID,使用ajax请求,取得数据源(服务端使用dataSet.getXml()输出,因为数据量不是很大,所以就偷懒了)
2.客户端使用xml数据岛分页显示(使用数据岛分页比较简单,不用写太多的代码)
3.搜索时,根据当前选择(下拉框)的分类ID,和搜索关键字,重新使用ajax请求(好像也可以使用xml的结果过滤,但为了方便,重新请求算了),跳到第2步显示
4.取数据时,单击某行时,使用onclick事件,把当前行的tr做为参数,使用dom操作就可以得到tr里的td的值
附:由于没考虑到其它细节的问题,所以代码有点乱,希望各位能多多指导,各位的批评就是我进步的最好的捷径.谢谢
贴出全部代码,希望能和大家相互交流一下
index.html 显示页面:

1111
2222
3333

data.js 所有操作js代码
var xmlHttp;
var xmlContent; //ajax请求后返回保存的数据
var key = "";
var id = "";
//---------------------样式设置------------------//
var divid = "selectData" //说明第4步
var txtValueID = "selectValue"; //说时第2步
var fieldNames = new Array(3); //单击某行取值是,每列值前添加一个该值列名
var isShowFieldNames = true; //取值时,是否要显示列名 true为显示,false不显示
fieldNames[0]="编号:";
fieldNames[1]="用户名:";
fieldNames[2]="密码:";
var pageSize = 10; //每页显示行数
var onmouseoverBG = "#DDFFEC"; //鼠标移上去该行的背景颜色
var onmouseoutBG = "#ffffff"; //鼠标离开后该行的背景颜色
//表头列名根据需要修改
var tableHead = "";
tableHead += "编号";
tableHead += "用户名";
tableHead += "密码";
tableHead += "";
//数据绑定字段名,修改DATAFLD里的的字段名
var dataFiled = "

";
dataFiled += "

";
dataFiled += "

";
var RequestFile = "getXml1.aspx"; //请求页面
//-------------------外部调用--------------------------//
//显示选择
//productID是下拉框ID,请根据需要修改
function show()
{
$(divid).style.display = ''
$(divid).style.position="absolute"
$(divid).style.backgroundColor="#FFFFFF"
key = "";
id = productID.options[productID.selectedIndex].value;
RequestXML();
}
//分类改变时隐藏
function changeID()
{
hide();
}
//---------------------内部方法,一般不用修改---------------------------//
//选择某行的值,显示到文本框
function getCurrentRowData(tr)
{
var tds = tr.getElementsByTagName("td") //得到所有列
var result="";
for(var i = 0; 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();
}
//显示内容
function ShowData()
{
var data = $(divid);
var content = "

";
content += "

";
content += "";
content += "

";
content += "" + xmlContent + "";
content += "

"
//----------------翻页操作-----------------------//
content += ""
content += "

" content += " "; content += " "; content += " "; content += ""; content += "

1" content += "

"
//----------------数据源-----------------------//
content += "";
//----------------列名-----------------------//
content += tableHead;
content += "";
content += dataFiled;
content += "";
content += "";
content += "

"
content += "

"
data.innerHTML = content;
GetPages();
}
//전체 페이지 가져오기
function GetPages()
{
var rowCount = $( " data_souce").getElementsByTagName("Table"); //모든 테이블 노드를 가져오고 총 레코드 수를 가져옵니다.
$("pages").innerHTML = Math.ceil(rowCount.length / pageSize); >$( "compart").innerHTML = "/";
if(rowCount.length == 0)
{
$("resultxml").innerHTML = "관련 데이터를 찾을 수 없습니다"; 🎜> }
}
//홈페이지에서 현재 페이지 가져오기
function firstPage()
{
$("page").innerHTML = 1
}
//Up 페이지
function PreviousPage()
{
if($("page").innerHTML != "1")
{
$(" page").innerHTML = parsInt($("page").innerHTML) - 1;
}
}
//다음 페이지로 이동할 때 현재 페이지 가져오기
function nextPage()
{
if( $("page").innerHTML != $("pages").innerHTML)
{
$("page").innerHTML =parseInt($("page ").innerHTML) 1;
}
}
//마지막 페이지에서 현재 페이지 가져오기
function lastPage()
{
$("page").innerHTML = $("pages").
}
//페이지 넘김 작업
function GotoPage(page)
{
switch(page)
{
case " first":
{
datas .firstPage();
firstPage();
break;
}
case "이전":
{
datas.previousPage ();
이전 페이지();
break;
}
case "다음":
{
datas.nextPage(); break;
}
case " last":
{
datas.lastPage()
lastPage()
break; }
//
함수 검색()
{
key = $("key").value
if(key == "")
{
alert("검색 키워드를 입력하세요");
return;
}
RequestXML()
}
//ID를 기준으로 객체 가져오기
function $(id )
{
return document.getElementById(id );
}
//선택 항목 숨기기
function hide()
{
$(divid).style.display = "없음";
}
//XMLHttpRequest 만들기
function CreateXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft. XMLHTTP");
}
else if( window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
//요청
함수 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 = "데이터 가져오기 읽기";
}
}
getXml.aspx 서버 데이터 소스
private void Page_Load(object sender, System.EventArgs e)
{
Response.Write(GetData ());
Response.End();
}
비공개 문자열 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 = " 및 F_id는 '%" 키 " %' 또는 F_passWord는 '%" 키 "%' 또는 F_userName은 '%" 키 "%'";}
StringBuilder sb = new StringBuilder(); sb.Append("");
SqlConnection conn = new SqlConnection("server=.;uid=sa;pwd=sa;database=WebTest")
conn.Open();
SqlDataAdapter da = new SqlDataAdapter(sql,conn);
DataSet ds = new DataSet()
conn.Close() ;
sb.Append(ds.GetXml ())
return sb.ToString();