selectdata.js

AJAX的一个学习实例

//----------------------------------------------------------------------------------//
//	ajax下拉框
//	作者：阿星，博客：lxxnet.cnblogs.com
//----------------------------------------------------------------------------------//


var StylePath = "skin/defualt";						//设置样式皮肤路径

//----------------------------------------------------------------------------------//
//								全局变量,一般不用修改
//----------------------------------------------------------------------------------//
	var xmlHttp;
	var xmlContent;									//ajax请求后返回保存的数据
	var KEY = "";									//保存搜索关键它
	var ID  = "";									//保存分类ID
	var DivID = "selectMain";						//选择框div的id
	var ClassID = "";								//保存下拉框分类ID

	var ObjectID = "";								//设置要返回结果控件ID
	var FieldNames;									//设置绑定绑定字段
	var RequestURL;									//设置请求的URL
	var TableHead;									//设置表头列名
	var FieldNamesArray;							//各列名数组,用于取值时在该值前添加列名
	var PageSize = 10;								//分页大小,默认为10页
	var IsShowFiledName = true;						//取值时,是否显示列名,默认是显示

	var DivTop;										//选择框显示位置
	var DivLeft;									//选择框显示位置

	var PageCount=0;								//总页数
	var CurrentPage = 1;							//当前页
//----------------------------------------------------------------------------------//
//									外部调用
//----------------------------------------------------------------------------------//

//设置表头;
function SetHead()
{
	FieldNamesArray = new Array(arguments.length);
	TableHead = "<thead>";
	for ( var i = 0; i < arguments.length; i++)
	{
		TableHead += "<th>" + arguments[i] + "</th>";
		FieldNamesArray[i] = arguments[i] + ":";
	}
	TableHead += "</thead>";
}

//设置绑定绑定字段
function SetFileds()
{
	FieldNames = "";
	for ( var i = 0; i < arguments.length; i++)
	{
		FieldNames += "<td><div id='selectDataRow' DATAFLD='" + arguments[i] + "'></div></td>";
	}
}

//设置请求的URL和显示返回值文本框控件ID
function SetUrlObjID(strurl,objID)
{
	RequestURL	= strurl;
	ObjectID	= objID;
	var point	= fGetXY($(ObjectID));
	DivTop		= point.y + $(ObjectID).offsetHeight + 1;
	DivLeft		= point.x + 1;
}

//显示选择框
function show(classID,obj)
{
	CreateDiv();
	ClassID = classID;						//保存当前分类ID,用于搜索时用
	$(DivID).style.display = '';
	$(DivID).style.top = DivTop;
	$(DivID).style.left = DivLeft;
	KEY = "";
	ID = $(ClassID).options[$(ClassID).selectedIndex].value;
	CurrentPage = 1;
	RequestXML();
}

//设置分页大小
function SetPageSize(n)
{
	PageSize = n;
}

//取值时,是否显示列名,默认是显示
function SetShowFiledName(isShow)
{
	IsShowFiledName = isShow;
}

//分类改变时隐藏
function ChangeID()
{
	hide();
}


//----------------------------------------------------------------------------------//
//									内部方法,一般不用修改
//----------------------------------------------------------------------------------//

//显示选择框内容
function ShowData()
{
	var data =	$(DivID);
	var	content = "<div id=\"selectSearchMain\">";
			content += "<table><tr><td><input id=\"key\" type=\"text\" /></td><td><a href='#' onclick='selectSearch()'><img src='" + StylePath + "/btnSearch.gif' /></a></td><td><a href='#' onclick='hide()'><img src='" + StylePath + "/btnCancel.gif' /></a></td></tr></table>";
		content += "</div>";
		content += "<xml id=\"data_souce\">" + xmlContent + "</xml>";
		content += "<div id='selectContentMain'>";			
			//----------------翻页操作-----------------------//
			content += "<table id='operatePage' CELLPADDING=0 CELLSPACING=0><tr><td>";
			content += "<a href=\"#\" onclick=\"firstPage()\"><img src='" + StylePath + "/btnFirst.gif'/></a> ";
			content += "<a href=\"#\" onclick=\"previousPage()\"><img src='" + StylePath + "/btnPrevious.gif'/></a> ";
			content += "<a href=\"#\" onclick=\"nextPage()\"><img src='" + StylePath + "/btnNext.gif'/></a> ";
			content += "<a href=\"#\" onclick=\"lastPage()\"><img src='" + StylePath + "/btnLast.gif'/></a>";
			content += "</td>";
			content += "<td align='rigth'><span id='pageInfo'>当前</span><span id='page'></span><span id='pagesInfo'>/总页</span><span id='pages'>" + PageCount + "</span></td>";
			content += "<td><input id='gotoPageNum' size='3' type='Text'></td>";
			content += "<td><a href=\"#\" onclick=\"GotoPage()\"><img src='" + StylePath + "/btnGotoPage.gif'/></a></td>";
			content += "</tr></table>";
			content += "<table id=\"selectDatas\" CELLPADDING=0 CELLSPACING=0 DATASRC=\"#data_souce\" DATAPAGESIZE=" + PageSize + ">";
			content += TableHead;
			content += "<tr style='cursor:hand;' onmouseover=\"this.className='Select-OnMouseOver'\" onmouseout=\"this.className='Select-OnMouseOut'\" onclick=\"getCurrentRowData(this)\">";
			content += FieldNames;			
			content += "</tr>";
			content += "</table>";
		content += "</div>";
		content += "<iframe src=\"javascript:false\" style=\"position:absolute; visibility:inherit; top:0px; left:0px; width:700px; height:500px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';\"></iframe>";
	data.innerHTML = content;
	GetPageInfo();
}

//取得要显示的X,Y坐标
function fGetXY(aTag)
{
	var oTmp = aTag;
	var pt = new Point(0,0);
	do 
	{
		pt.x += oTmp.offsetLeft;
		pt.y += oTmp.offsetTop;
		oTmp = oTmp.offsetParent;
	} while(oTmp.tagName!="BODY");
	return pt;
}

//存放x,y坐标
function Point(iX, iY)
{
	this.x = iX;
	this.y = iY;
}


//搜索
function selectSearch()
{
	KEY = $("key").value;
	if(KEY != "")
	{
		CurrentPage = 1;
		RequestXML();
	}
	else
	{
		alert("请先输入搜索关键字");
	}
}

//隐藏选择框
function hide()
{
	CreateDiv();						//如果第一次不选择分类,直接点选择的话,会因为没有该层而错误,所以要新建层
	$(DivID).style.display ="none";
}

//根据ID得到对象
function $(id)
{
	return document.getElementById(id);
}

//新建一个Div层
function CreateDiv()
{	
	var IsDivExist = $(DivID);
	if(IsDivExist == null)//如果层不存在,则新建层
	{
		var newDiv = document.createElement("div");
		newDiv.innerHTML = "";
		newDiv.id = DivID;
		document.body.appendChild(newDiv);
	}
}

//选择某行的值,显示到文本框
function getCurrentRowData(tr)
{
  var tds = tr.getElementsByTagName("td");		//得到所有列
  var result="";
  var getXml="";
    
  for(var i = 0; i < tds.length; i++)
  {
	try
	{
		getXml = tr.getElementsByTagName("div")[i].firstChild.nodeValue + ",";
	}
	catch (exception)
	{
		getXml = " ,";
	}
	if(IsShowFiledName){result += FieldNamesArray[i]};
	result += getXml.toString();
  }
  result = result.substring(0,result.lastIndexOf(","));
  $(ObjectID).value = result;
  hide();
}


//----------------------------------------------------------------------------------//
//									分页相关
//----------------------------------------------------------------------------------//
//是否有记录
function GetPageInfo()
{
	$("page").innerHTML = CurrentPage;
	if(PageCount == 0)
	{
		$("selectContentMain").innerHTML = "找不到相关数据";
	}
}

//首页时得到当前页
function firstPage()
{
	if(CurrentPage != 1)
	{
		CurrentPage = 1;
		RequestXML();
	}
}

//上页时得到当前页
function previousPage()
{
	if (CurrentPage >1)
	{
		CurrentPage -= 1;
		RequestXML();
	}
}

//下页时得到当前页
function nextPage()
{
	if (CurrentPage < PageCount)
	{
		CurrentPage += 1;
		RequestXML();
	}
}

//尾页时得到当前页
function lastPage()
{
	if(CurrentPage != PageCount)
	{
		CurrentPage = PageCount;
		RequestXML();
	}
}

//跳转页
function GotoPage()
{
	if($("gotoPageNum").value !="")
	{
		var pageNum= parseInt($("gotoPageNum").value);
		if(pageNum>0)
		{
			if (pageNum <= PageCount)
			{
				CurrentPage = pageNum;
				RequestXML();
			}
			else
			{
				alert("不能超过总页数");
			}
		}
		else
		{
			alert("页数不正确,请重新输入");
		}
	}
	else
	{
		alert("请输入页数");
	}

}

//----------------------------------------------------------------------------------//
//									ajax相关
//----------------------------------------------------------------------------------//

//创建XMLHttpRequest
function CreateXMLHttpRequest()
{
	if(window.ActiveXObject)
	{
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else if(window.XMLHttpRequest)
	{
		xmlHttp = new XMLHttpRequest();
	}
}

//请求
function RequestXML()
{
	var url = "";
	var cPageAndPages = "&pagesize=" + PageSize + "&page=" + CurrentPage;
	if(RequestURL.indexOf("?") == -1)
	{
		url = RequestURL + "?classID=" + ID + "&searchKey=" + KEY + cPageAndPages;
	}
	else
	{
		url = RequestURL + "&classID=" + ID + "&searchKey=" + KEY + cPageAndPages;
	}
	CreateXMLHttpRequest();
	//xmlHttp.setRequestHeader("Cache-Control","no-cache");
	xmlHttp.open("get",url);
	xmlHttp.onreadystatechange = GetXMLResult;
	xmlHttp.send(null);
}

//接收ajax返回数据,接收完成后显示选择框
function GetXMLResult()
{
	if(xmlHttp.readyState == 4)
	{
		if(xmlHttp.status == 200)
		{
			GetContentAndPageCount(xmlHttp.responseText);
		}
	}
	else
	{
		$(DivID).innerHTML = "正在读取数据中...<iframe src=\"javascript:false\" style=\"position:absolute; visibility:inherit; top:0px; left:0px; width:700px; height:500px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';\"></iframe>";
	}
}

function GetContentAndPageCount(XmlData)
{
	xmlContent = XmlData.substring(0,XmlData.indexOf("<PageCount>")) + "</NewDataSet>";						//取到xml数据
	PageCount  = XmlData.substring(XmlData.indexOf("<PageCount>")+ 11,XmlData.lastIndexOf("</PageCount>"));	//取得总页数据
	ShowData();
}