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

　　最近使用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] = '&nbsp;';
  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);
  }
 } 

/***********本人原创，欢迎转载，转载请保留本人信息*************/
作者：wallimn
电邮：[e-mail]
博客：http://wallimn.iteye.com  http://blog.csdn.net/wallimn
网络硬盘：http://wallimn.gbaopan.com
时间：2006-12-15
/***********本人原创，欢迎转载，转载请保留本人信息*************/