背景:
在一些项目中要用到高级查询这个功能,很有必要独立出来封装成一个搜索块,我简单地说下我的实现方法,以资笑谈。是在.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; } |