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

转载 2007年10月11日 13:54:00

背景: 

     在一些项目中要用到高级查询这个功能,很有必要独立出来封装成一个搜索块,我简单地说下我的实现方法,以资笑谈。是在.net 的环境,不过我没有用到 ajax 这些封装好的控件,整个 ajax 的请求是自己处理。当然很多东西写的不够成熟。希望不要砸石头,因为我本身就是石头了。。哈哈

简单说来

    思路很简单了:主要是三步:1.ajax 获取数据();2.div 呈现数据;3.再在呈现数据的 div 上再做呈现。

   下面给出主要一些js

//js 需要画出两层数据。--dvID 为参数传入的 dividAllArray  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;
}

 
 

Jquery+Json+ajax实现异步查询显示数据

JQuery,JSON,AJAX前面我都有简单介绍过,这里我用这三种技术简单实现了一个网页异步访问服务器显示返回结果的实例,原理上应该是要查询数据库,然后返回的是数据库的数据,而现在为了查看方便我只是...
  • u012882327
  • u012882327
  • 2015年09月09日 17:28
  • 7119

jQuery实现AJAX定时刷新局部页面实例

jQuery实现AJAX定时刷新局部页面实例
  • sunyiming537
  • sunyiming537
  • 2016年09月06日 10:07
  • 5116

Ajax利用JQuery在Struts2的实现

这里有篇文章但是基本对的,有些东西需要自己写很坑爹,感觉他吧一些东西删去了。1.Struts.xml必须写上json格式和数据,不然传什么值 dataM...
  • liuzhustu
  • liuzhustu
  • 2017年03月11日 14:23
  • 358

【AJAX进阶(二)】--异步模糊查询

上篇博客讨论了DOM的基本使用情况,DOM树使得程序员能够直接在后台来操作HTML元素,熟练的使用DOM并集合AJAX能够构造出网页应用程序。今天进一步使用AJAX来实现一些复杂的功能,主要来讨论使用...
  • zhang_xinxiu
  • zhang_xinxiu
  • 2014年03月16日 23:53
  • 6842

Div里面载入另一个页面的实现(取代框架)(AJax)

随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便 今天突然遇到一个问题,那就是需要导入另一...
  • shaobingj126
  • shaobingj126
  • 2014年04月14日 14:26
  • 64545

利用Div仿Select控件

目的是解决自定义的select控件在IE下显示不完整
  • Qiustion
  • Qiustion
  • 2016年04月18日 15:54
  • 2902

Ajax 模糊查询的简单实现

类似于百度的搜索引擎模糊查询功能,不过百度的模糊查询功能更强大,这里简单实现下. 要实现模糊查询,首先要做的就是把SQL写好。话不多少,直接贴代码了! JSP页面: ...
  • yulei_qq
  • yulei_qq
  • 2014年01月03日 11:03
  • 9315

jquery ajax 实现动态联动查询

jquery ajax 实现动态联动查询
  • sinat_24491773
  • sinat_24491773
  • 2016年03月05日 20:14
  • 3874

Java EE中Ajax技术简单实现

1.异步数据获取技术,使用XMLHttpRequest.   2.基于标准的表示技术,使用XHTML与CSS.   3.动态显示和交互技术,使用Document Object Model(文档对象模型...
  • suwu150
  • suwu150
  • 2016年05月18日 12:42
  • 855

Ajax实现异步查询,返回Json数据

在项目中要实现一个发送邮件的功能,但是因为用户比较多,在选择用户的时候需要根据用户输入的关键字,及时的显现出匹配的结果,当然这个可以用jQuery的autocomplete.js来实现,不过今天我是用...
  • judyfun
  • judyfun
  • 2014年12月27日 18:19
  • 4417
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用Ajax结合div来实现的查询控件
举报原因:
原因补充:

(最多只允许输入30个字)