用Ajax结合div来实现的查询控件

背景： 

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