背景:
在一些项目中要用到高级查询这个功能,很有必要独立出来封装成一个搜索块,我简单地说下我的实现方法,以资笑谈。是在.net的环境,不过我没有用到ajax这些封装好的控件,整个ajax的请求是自己处理。当然很多东西写的不够成熟。希望不要砸石头,因为我本身就是石头了。。哈哈
简单说来
思路很简单了:主要是三步:1.ajax获取数据();2.div呈现数据;3.再在呈现数据的div上再做呈现。
下面给出主要一些js
//js需要画出两层数据。--dvID为参数传入的divid,AllArray是ajax取得的数据
function putIncludeSubData(dvID,AllArray)
{
//alert(dvID+"QQQQQQQQ");
var strGrid0="";
strGrid0 = '<div id=/''+dvID+'/' width="600px" style="position:absolute;left:10px;top:10px;z-index:100;';
strGrid0 +='filter:progid:DXImageTransform.Microsoft.DropShadow(Color=#949694,OffX=4,OffY=4);';
strGrid0+=' font-family:verdana,Lucida Sans Unicode,宋体,新宋体,sans-serif;font-size:12px;">';
strGrid0 +='<table width="600px" border="0" cellspacing="0" cellpadding="0" ';
strGrid0 +='bgcolor="#999999"><tr>';
strGrid0 += '<td align="left" valign="middle" width="600px" height="27" ><span style="color:#FFFFFF">';
strGrid0 +='请选择</span></td><td align="left" valign="middle" width="50" height="27" >';
strGrid0 +='<span><a οnclick="javascript:hiddenLayer(/''+dvID+'/')" style="color:#FFFFFF;cursor:hand;">';
strGrid0 +='[关闭]</a></span></td></tr>';
strGrid0 += '<tr><td colspan="2" width="600px" valign="top">'
strGrid0 +='<table width="100%" border="0" cellspacing="0" cellpadding="0" ';
strGrid0 +='bgcolor="#DDF3FF"><tr>';
var strGrid1="";
var j = (6 - AllArray.length%6) == 6 ? 0 : (6 - AllArray.length%6);
for(var k=0;k<AllArray.length;k++)
{
var thisArray = AllArray[k].split("##");
strGrid1+= '<td height="20" align="center">';
strGrid1+='<a οnclick="javascript:OpenSubColumn(/''+thisArray[0]+'/',/''+thisArray[1]+'/',/''+dvID+'/')" ';
strGrid1+='style="cursor:hand;">/''+thisArray[1]+'/'</a></td>';
if(k%6 == 5)
{
strGrid1 = strGrid1 + '</tr><tr>';
}
}
if(j > 0)
{
for(var l=1;l<=j;l++)
{
strGrid1 = strGrid1 + '<td height="20"> </td>';
}
strGrid1 = strGrid1 + '</tr>';
}
strGrid1=strGrid0+strGrid1;
strGrid1 = strGrid1 + '</table></td></tr></table></div>';
document.getElementById(clientID+'dvFather').innerHTML=strGrid1;
GetCenterXY_ForLayer(dvID);
}
//打开子层
function OpenSubColumn(strID,strText,dvID)
{
//displayLayer(null);
displayLayer('dvSon');
var xmlHttp=fn_getXmlHttpRequest();
var ToURL="Ajaxsearch.aspx?ID="+escape(strID)+"&AjaxQueryControl=Sub"+"&TypeID="+escape(dvID)+"&CacheFresh=" + Math.random();
xmlHttp.open("post",ToURL,false);
xmlHttp.send(null);
var result = xmlHttp.responseText;
if(result!="" && result!="&&&")
{
var allArray = result.split("@@"); switch(dvID)
{ ...... }
showSubDiv(dvID+"_Sub",allArray);
}
else
{
}
}
//显示子层数据
function showSubDiv(dvSubID,allArray)
{
var strGrid0="";
strGrid0 = '<div id=/''+dvSubID+'/' width="600px" style="position:absolute;left:40px;top:30px;z-index:100;';
strGrid0 +='filter:progid:DXImageTransform.Microsoft.DropShadow(Color=#949694,OffX=4,OffY=4);';
strGrid0+=' font-family:verdana,Lucida Sans Unicode,宋体,新宋体,sans-serif;font-size:11px;">';
strGrid0 +='<table width="600px" border="0" cellspacing="0" cellpadding="0" ';
strGrid0 +='bgcolor="#999999"><tr>';
strGrid0 += '<td align="left" valign="middle" width="600px" height="27" ><span style="color:#FFFFFF">';
strGrid0 +='请选择</span></td><td align="left" valign="middle" width="50" height="27" >';
strGrid0 +='<span><a οnclick="javascript:hiddenLayer(/''+dvSubID+'/')" style="color:#FFFFFF;cursor:hand;">';
strGrid0 +='[关闭]</a></span></td></tr>';
strGrid0 += '<tr><td colspan="2" width="600px" valign="top">'
strGrid0 +='<table width="100%" border="0" cellspacing="0" cellpadding="0" ';
strGrid0 +='bgcolor="#DDF3FF"><tr>';
var strGrid1="";
var j = (4 - allArray.length%4) == 4? 0 : (4 - allArray.length%4);
for(var k=0;k<allArray.length;k++)
{
var thisArray = allArray[k].split("##");
strGrid1+= '<td height="20" align="center">';
strGrid1+='<a οnclick="javascript:selectSubText(/''+thisArray[0]+'/',/''+thisArray[1]+'/',/''+dvSubID+'/')" ';
strGrid1+='style="cursor:hand;">/''+thisArray[1]+'/'</a></td>';
if(k%4 == 3)
{
strGrid1 = strGrid1 + '</tr><tr>';
}
}
if(j > 0)
{
for(var l=1;l<=j;l++)
{
strGrid1 = strGrid1 + '<td height="20"> </td>';
}
strGrid1 = strGrid1 + '</tr>';
}
strGrid1=strGrid0+strGrid1;
strGrid1 = strGrid1 + '</table></td></tr></table></div>';
document.getElementById(clientID+'dvSon').innerHTML=strGrid1;
GetLeftXY_ForLayer(dvSubID);
}
//隐藏显示层
function hiddenLayer(obj)
{
//alert(obj);
if(obj!=null)
{
document.getElementById(obj).innerHTML="";
document.getElementById(obj).style.visibility='hidden';
}
else
{
document.getElementById(clientID+'dvFather').innerHTML="";
document.getElementById(clientID+'dvFather').style.visibility='hidden';
}
}
//将悬浮层的位置定位在屏幕中央
function GetCenterXY_ForLayer(objdiv)
{
var obj=document.getElementById(objdiv);
x = document.body.scrollLeft;
y = document.body.scrollTop;
//获取屏幕宽度
availWidth = parseInt(window.screen.availWidth);
availHeight = parseInt(window.screen.availHeight);
tblWidth = parseInt(obj.width);
y = y + availHeight/4+120;
x = (availWidth - tblWidth)/2+60;
obj.style.top = y;
obj.style.left = x;
}
有点乱啊;不过无所谓了,有个思路自己走去。