动态生成SQL查询条件定制表单及语句的脚本

/***********本人原创，欢迎转载，转载请保留本人信息*************/

作者：(wallimn

电邮：wallimn@sohu.com

博客：http://wallimn.bokee.com

　　　http://blog.csdn.net/wallimn

网络硬盘：http://wallimn.gbaopan.com

时间：2006-12-15

/***********本人原创，欢迎转载，转载请保留本人信息*************/

　　最近使用AJAX技术来做东西，写了很多的JS代码，也分析了一些别人的JS程序，使用VS.net进行跟踪调试，积累了些经验，现在可以很流畅地使用JS来写些程序来满足自己的需要了。

　　我做的东西里有一项是通用的表格展示，服务器端使用DOM4J来转换生成XML数据，在客户端使用JS解析XML数据，然后在插件中展示数据，附带添加、删除及修改功能，这部分功能已经实现，基本上使用一个页面和一个Action(struts里的东东)就可以对任何表进行展示、添加、删除和修改。但对于查询，不太容易做到通用，想了好长时间，还是使用XML与JS来解决了。也就是使用XML来定义要查询的字段、类型，然后在客户端自动解释成表单。目前的版本功能很简单，没有数据验证功能，仅能用AND连接查询条件(不过好象实际使用中，多数时候都是用AND)，更多功能在以后会进一步完善。

　　代码分为四个部分：

　　一、核心是解析XML形式的表单定义数据、生成表单、拼接SQL语句、并对表单面板进行控制的JS文件；其中XML数据可以是数据岛中定义的，可以是网页中的字符串，也可以是单独的XML文件，另外，XML数据可以使用异步的方式进行加载（这个功能借鉴了dhtmlXTree中的方法）；

　　二、一个辅助的日期选择脚本，供日期类型字段选择日期用；

　　三、一个样式表文件；

　　四、一个例子网页；

　　下面我的核心代码贴在这里，详细的代码请到我的网络硬盘下载http://wallimn.gbaopan.com，或发邮件向我索取。

///////////////////////////////sqlgen.js///////////////////////////////////////

// JavaScript Document

 function sqlgen(fields){

  this.dateind=0;

  this.panelini=false;

  if(typeof fields=="object")

   this.fields=fields;

  else this.fields=null;

  this.panelini=false;

  this.contab=document.getElementById("conditiontabbody");

  this.whereclause="";

  this.onokafter=function(sql){alert("条件子句为："+sql+"/n点击后处理事件尚未添加，请定义onokafter函数。");};

  this.test = function(){

   return this.onokafter.apply(null, this);

  };

 }

 function genbtnhook(self){

  var okbtn = document.getElementById('beginsearch');

  if(typeof okbtn!="undefined"){

   okbtn.onclick=function(){return self.onsqlok.apply(self, []);};

  }

 }

 sqlgen.prototype.onsqlok=function(){

  //return null;

  this.whereclause = this.getsqlstring();

  //alert(this.whereclause+this.dateind);

  if(this.onokafter!=null){

   //this.onokafter(this.whereclause);

   //alert(this.whereclause);

   return this.onokafter.apply(null, [this.whereclause]);

  }

 }

 sqlgen.prototype.getsqlstring=function(){

  //var contab = document.getElementById("conditiontabbody");

  if(this.fields==null || typeof this.contab=="undefined")return "";

  //alert(contab.tbody.innerHTML);

  var trs = this.contab.getElementsByTagName("tr");

  var onerow=null;

  var desc, type, name;

  var c1,c2,v1,v2;

  if(typeof trs == "undefined")return "";

  //var fields = document.all('xmlfields').XMLDocument.getElementsByTagName('Field');

  var field=null;

  var re="";

  for(var i=0; i<trs.length; i++){

   onerow = trs[i];

   c1 = onerow.getElementsByTagName("select")[0].value;

   if(c1=="")continue;

   desc = onerow.getElementsByTagName("span")[0].innerText;

   v1 = onerow.getElementsByTagName("input")[0].value;

   field = this.fields[i];

   type = field.getAttribute('Type');

   name = field.getAttribute('Name');

   if(type=="String")v1="'"+v1+"'";

   else if(type=="Date")v1="todate('"+v1+"','yyyy-mm-dd hh24:mi:ss')";

   else if(type=="Number")v1=v1;

   else continue;

   if(c1!="" && v1!="")re = re + "("+name + " "+ c1 +" "+  v1 + ") and ";

   //type = onerow.getElementById("fieldtype").innerText;

   //desc = onerow.getElementById("fielddesc");

   //alert(' desc='+desc+' c1='+c1+' v1='+v1+' type='+type+' name='+name);   

   //break;

  }

  if(re!="") re =re.substr(0, re.length-5);

  return re;

 }

 sqlgen.prototype.generatepanel=function(){

  //var fields = document.all('xmlfields').XMLDocument.getElementsByTagName('Field');

  var field=null;

  var desc="", type="";

  var newrow = null;

  var cell,arr;

  //var contab = document.getElementById("conditiontabbody");

  for(var i=0; i<this.fields.length; i++){

   field = this.fields[i];

   desc = field.getAttribute('Desc');

   type = field.getAttribute('Type');

   newrow = this.contab.insertRow();

   //newrow.setAttribute("height","20px");

   arr = this.getcondition(type,desc);

   cell = newrow.insertCell();

   cell.setAttribute("width","100px");

   cell.setAttribute("align","right");

   cell.innerHTML=arr[0];

   cell = newrow.insertCell();

   cell.setAttribute("width","290px");

   cell.innerHTML=arr[1];

   cell = newrow.insertCell();

   cell.setAttribute("width","290px");

   cell.innerHTML=arr[2];

  }

 }

 sqlgen.prototype.getcondition=function(type,desc){

 var arr = new Array(0);

 if(type=="String"){

  arr[0] = '<span class="a" id="fielddesc">'+desc+'</span>';

  

  arr[1] = '<select name="select" id="sqlcondition'+this.dateind+'" style="width:90px;">' +

     '<option value="">无限制</option>' +

     '<option value="=">等于</option>' +

     '<option value="like">象</option>' +

    '</select>' +

    '<input type="text" name="textfield" id="sqlvalue'+this.dateind+'" style="width:160px;" />';

    

  this.dateind++;//从0开始

  arr[2] = ' ';

  this.dateind++;//从0开始

 }

 else if(type=="Number"){

  arr[0] = '<span class="a" id="fielddesc">'+desc+'</span>';

  

  arr[1] =  '<select name="select" id="sqlcondition'+this.dateind+'" style="width:90px;">' +

      '<option value="">无限制</option>' +

      '<option value="=">等于</option>' +

      '<option value="<">小于</option>' +

      '<option value="<=">小于等于</option>' +

     '</select>' +

     '<input type="text" name="textfield" id="sqlvalue'+this.dateind+'" style="width:160px;" /> ';

  this.dateind++;//从0开始

      

  arr[2] =  '<select name="select" id="sqlcondition'+this.dateind+'" style="width:90px;">' +

      '<option value="">无限制</option>' +

      '<option value="=">等于</option>' +

      '<option value=">">大于</option>' +

      '<option value=">=">大于等于</option>' +

     '</select>' +

     '<input type="text" name="textfield" id="sqlvalue'+this.dateind+'" style="width:160px;" />' ;

  this.dateind++;//从0开始

  }

  else if(type=="Date"){

  arr[0] = '<span class="a" id="fielddesc">'+desc+'</span>';

  

  arr[1] =  '<select name="select" id="sqlcondition'+this.dateind+'" style="width:90px;">' +

     '<option value="">无限制</option>' +

     '<option value="=">等于</option>' +

     '<option value="<">小于</option>' +

     '<option value="<=">小于等于</option>' +

     '</select>' +

     '<input type="text" class="textInput" name="sqlvalue'+this.dateind+'" id="sqlvalue'+this.dateind+'" readonly ' +

     'style="width:140px;" onclick="javascript:DateControl20(document.getElementById(/'sqlvalue'+this.dateind+'/'))" />' +

     '<input type="button" value="×" onclick="javascript:document.getElementById(/'sqlvalue'+this.dateind+'/').value=/'/';"/>';

  this.dateind++;//从0开始

   

  arr[2] =  '<select name="select" id="sqlcondition'+this.dateind+'" style="width:90px;">' +

      '<option value="">无限制</option>' +

      '<option value="=">等于</option>' +

      '<option value=">">大于</option>' +

      '<option value=">=">大于等于</option>' +

     '</select>' +

     '<input type="text" class="textInput" name="sqlvalue'+this.dateind+'" id="sqlvalue'+this.dateind+'" readonly ' +

     'style="width:140px;" onclick="javascript:DateControl20(document.getElementById(/'sqlvalue'+this.dateind+'/'))" />' +

     '<input type="button" value="×" onclick="javascript:document.getElementById(/'sqlvalue'+this.dateind+'/').value=/'/';"/>';

  this.dateind++;//从0开始

  //alert(arr[1]+"/n"+arr[2]);   

  }

  else {

   arr[0]='类型不合法';

   arr[1]='类型不合法';

   this.dateind++;//从0开始

   arr[2]='类型不合法';

   this.dateind++;//从0开始

  }

  return arr;

 }

 function paneldisptoggle(){

  var panel = document.getElementById('searchpanel');

  //alert(this.panelini);

  var left = (document.body.clientWidth-700)/2;

  if(left<=0)left=1;

  panel.style.left=left+"px";

  //DispToggle('searchpanel');

     panel.style.display = panel.style.display=="none"?"":"none";

 }

 function paneldisptoggle2(){

  var panel = document.getElementById('searchpanel');

  //alert(this.panelini);

  panel.style.position="static";

  panel.style.margin="0 auto";

  //DispToggle('searchpanel');

     panel.style.display = panel.style.display=="none"?"":"none";

 }

 function placesqlgen(){

  document.write('<div id="searchpanel" style="display:none">');

  document.write('<div id="paneltitle">');

  document.write('  <table width="680px" border="0">');

  document.write(' <tr>');

  document.write('   <td><span style="color:#000000" class="a">查询条件定制面板</span></td>');

  document.write('   <td align="right"><input type="button" value="×" onclick="javascript:paneldisptoggle();"/></td>');

  document.write(' </tr>');

  document.write('  </table>');

  document.write('</div>');

  document.write('<div id="panelcontent">');

  document.write('<table width="680px" height="180" border="1" align="left" cellpadding="0" cellspacing="0" id="conditiontab">');

  document.write(' <tbody id="conditiontabbody">');

  document.write(' </tbody>');

  document.write('</table>');

  document.write('</div>');

  document.write('<div id="panelbottom">');

  document.write('  <table width="680px" border="0">');

  document.write(' <tr>');

  document.write('   <td align="center">');

  document.write('  <input type="button" value="　确　　定　" name="beginsearch" id="beginsearch" />');

  document.write('   </td>');

  document.write('   <td align="center">');

  document.write('  <input type="button" value="　取　　消　" name="cancelsearch" ');

  document.write('          id="cancelsearch" onclick="javascript:paneldisptoggle();"/>');

  document.write('   </td>');

  document.write(' </tr>');

  document.write('  </table>');

  document.write('</div>');

  document.write('</div>');

 }

 function docloadXML(xmlString){

     var xmldoc;

  try {

   xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

   xmlDoc.async=false;

   xmlDoc.loadXML(xmlString);

  }

  catch(e){

      var parser = new DOMParser();

      xmlDoc = parser.parseFromString(xmlString,"text/xml");

  }

  return xmlDoc;

    }

 //FileName也可以是个URL

 function docload(FileName){

     var xmldoc;

  try {

   xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

   xmlDoc.async=false;

   xmlDoc.load(FileName);

  }

  catch(e){

   //对于netscape不知如何处理。以后再添加。

   //下边的函数两个浏览器通用。纯属估计

   return null;

  }

  return xmlDoc;

    }

 

 function docloadURL(url){

   var xmlDoc=null;

   try{

     xmlDoc = new XMLHttpRequest();

  }

   catch(e){

    xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");

  }

   xmlDoc.open("GET",url,false);

   xmlDoc.setRequestHeader('Content-type','application/x-www-form-urlencoded');

   xmlDoc.send(null);

   return xmlDoc.responseXML;

    }

 

 //异步装载XML数据。

 function xmlkit(asyn){

  if(typeof asyn=="undefined")this.asyn=true;

  else this.asyn=asyn;

  this.xmlDoc=null;

  this.dealxml=null;

  this.onloadAction=function(xmldoc){

   //alert("装载完成!"+xmldoc.xml);

    if(this.dealxml!=null){

     this.dealxml.apply(null,[xmldoc]);

    }

   };

 }

 xmlkit.prototype.loadurlover=function(myxmldoc){

   this.check=function(){

    if(myxmldoc.onloadAction!=null){

     if((!myxmldoc.xmlDoc.readyState)||(myxmldoc.xmlDoc.readyState == 4)){

     myxmldoc.onloadAction(myxmldoc.xmlDoc.responseXML);

     myxmldoc=null;

    }

   }

  };

  return this.check;

 }

 xmlkit.prototype.loadurl=function(filePath,postMode,postVars){

   try{

    if(this.xmlDoc==null)

     this.xmlDoc = new XMLHttpRequest();

    this.xmlDoc.open(postMode?"POST":"GET",filePath,this.asyn);

    if(postMode)

    this.xmlDoc.setRequestHeader('Content-type','application/x-www-form-urlencoded');

    this.xmlDoc.onreadystatechange=new this.loadurlover(this);

    this.xmlDoc.send(null||postVars);

  }

   catch(e){

    if(this.xmlDoc==null)

     this.xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");

    this.xmlDoc.open(postMode?"POST":"GET",filePath,this.asyn);

    if(postMode)this.xmlDoc.setRequestHeader('Content-type','application/x-www-form-urlencoded');

    this.xmlDoc.onreadystatechange= new this.loadurlover(this);

    this.xmlDoc.send(null||postVars);

  }

 }