communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Comment générer un formulaire de requête SQL à l'aide des compétences JavaScript_javascript

Comment générer un formulaire de requête SQL à l'aide des compétences JavaScript_javascript

WBOY
Libérer： 2016-05-16 15:45:22
original
1726 Les gens l'ont consulté

L'exemple de cet article décrit la méthode de génération d'un formulaire de requête SQL à l'aide de JavaScript. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

JavaScript est utilisé ici pour générer un formulaire de requête SQL complexe. Vous comprendrez après l'avoir exécuté. Il peut modifier automatiquement votre instruction SQL en fonction des conditions de requête sélectionnées.

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>查询条件表单</title>
<style>
*{
 font-size:12px;
 padding:0;
 margin:0;
}
body{
 padding:40px;
}
#MainBox{
 border:#666 1px solid;
 background-color:#eee;
 width:700px;
}
#MainBox td{
 padding:4px;
}
#ConditionBox{
 height:150px;
 width:100%;
 overflow-y:auto;
 border:#bbb 1px solid;
 padding:2px;
 background-color:#fff;
}
.tmFrame{
 border:#eee 1px solid;
 padding:2px;
 width:100%;
}
.tmFrame_highlight{
 border:#666 1px solid;
 padding:2px;
 width:100%;
 background-color:#f7f7f7;
}
.fname{
 float:left;
 width:200px;
}
.conn{
 float:left;
 width:100px;
}
.fvalue{
 float:left;
 width:100px;
}
.handlebox{
 float:right;
 width:180px;
 display:none;
}
.handlebox_view{
 float:right;
 width:180px;
 display:block;
}
.rbox{
 float:right;
 margin:1px;
 background-color:#999;
 color:#fff;
 padding:1px;
 width:15px;
 cursor:hand;
}
legend{
 border:#bbb 1px solid;
 padding:4px;
}
fieldset{
 border:#bbb 1px solid;
 padding:4px;
}
.sqlwords{
 margin:2px;
 border:#bbb 1px solid;
 width:100%;
}
</style>
<script>
////构造函数
function ce(e){return document.createElement(e)}
/* Example:
* var a = cex("DIV", {onmouseover:foo, name:'div1', id:'main'});
*/
function cex(e, x){
 var a = ce(e);
 for (prop in x){
  a[prop] = x[prop];
 }
 return a;
}
/*
* function ge
* Shorthand function for document.getElementById(i)
*/
function ge(i){return document.getElementById(i)}
/*
* function ac
* Example: ac( house, ac(roof, shingles), ac(floor, ac(tiles, grout)))
*/
function ac(){
 if (ac.arguments.length > 1){
  var a = ac.arguments[0];
  for (i=1; i<ac.arguments.length; i++){
   if (arguments[i])
    a.appendChild(ac.arguments[i]);
  }
  return a;
 } else {
  return null;
 }
}
/////ID增量
function guid(){
 if (!window.__id) window.__id = 0;
 return ++window.__id;
}
//======建立条件类
function term(tname,fname,conn,fvalue,ttype){
 this.tname=tname;
 this.fname=fname;
 this.conn=conn;
 this.fvalue=fvalue;
 this.id= guid();
 this.ttype=ttype;
}
term.prototype.getHTML = function(){
 var termFrame = cex("DIV", {
  id:this.id,
  className:'tmframe',
  onmouseover:this.fc_term_onmouseover(),
  onmouseout:this.fc_term_onmouseout()
  });
 //var module = cex("DIV", {
  //id:'module'+this.id,
  //className:'module'
  //});
 var tttt=this.tname+"."+this.fname;
 if(this.ttype!='fset')
  tttt=this.tname;
 var mtt = cex("input", {
  id:'tp'+this.id,
  name:'fname'+this.id,
  type:"hidden",
  value:this.ttype
  });
 var fname = cex("DIV", {
  id:'fname'+this.id,
  className:'fname',
  innerHTML:tttt
  });
 var conn = cex("DIV", {
  id:'conn'+this.id,
  className:'conn',
  innerHTML:this.conn
  });
 var fvalue = cex("DIV", {
  id:'fvalue'+this.id,
  className:'fvalue',
  innerHTML:this.fvalue
  });
 var handlebox = cex("div", {
  id:'handlebox'+this.id,
  className:"handlebox"
  });
 var mdel = cex("div", {
  id:'tmdel'+this.id,
  onclick:this.fc_mdel_onclick(),
  className:"rbox",
  title:"删除此条件",
  innerHTML: 'X'
  });
 var mup = cex("div", {
  id:'tmup'+this.id,
  onclick:this.fc_mup_onclick(),
  className:"rbox",
  title:"向上移动",
  innerHTML: '↑'
  });
 var mdown = cex("div", {
  id:'tmdown'+this.id,
  onclick:this.fc_mdown_onclick(),
  className:"rbox",
  title:"向下移动",
  innerHTML: '↓'
  });
 var mzkh = cex("div", {
  id:'tzkh'+this.id,
  onclick:this.fc_mzkh_onclick(),
  className:"rbox",
  title:"添加左括号",
  innerHTML: '('
  });
 var mykh = cex("div", {
  id:'tykh'+this.id,
  onclick:this.fc_mykh_onclick(),
  className:"rbox",
  title:"添加右括号",
  innerHTML: ')'
  });
 var mand = cex("div", {
  id:'tand'+this.id,
  onclick:this.fc_mand_onclick(),
  className:"rbox",
  title:"添加并条件",
  innerHTML: 'and'
  });
 var mor = cex("div", {
  id:'tor'+this.id,
  onclick:this.fc_mor_onclick(),
  className:"rbox",
  title:"添加或条件",
  innerHTML: 'or'
  });
 // Build DIV
 ac (termFrame,
   mtt,
   ac (handlebox,
   mdel,
   mup,
   mdown,
   mykh,
   mzkh,
   mand,
   mor
   ),
   fname,
   conn,
   fvalue
  );
 return termFrame;
}
term.prototype.highlight = function(){
 ge("handlebox"+this.id).className = 'handlebox_view'; 
 ge(this.id).className = 'tmFrame_highlight';
}
term.prototype.lowlight = function(){
 ge("handlebox"+this.id).className = 'handlebox';
 ge(this.id).className = 'tmFrame';
}
term.prototype.remove = function(){
 var _this = ge(this.id);
 _this.parentNode.removeChild(_this);
}
term.prototype.moveup = function(){
 var _this = ge(this.id);
 var pre_this = _this.previousSibling;
 if(pre_this!=null){
  _this.parentNode.insertBefore(_this,pre_this);
  this.lowlight();
 }
}
term.prototype.movedown = function(){
 var _this = ge(this.id);
 var next_this = _this.nextSibling;
 if(next_this!=null){
  _this.parentNode.insertBefore(next_this,_this);
  this.lowlight();
 }
}
term.prototype.addzkh = function(){
 var _this = ge(this.id);
 var tzkh = new term('╭----------------','','','','zkh');
 var node_zkh = tzkh.getHTML();
 _this.parentNode.insertBefore(node_zkh,_this);
}
term.prototype.addykh = function(){
 var _this = ge(this.id);
 var tykh = new term('╰----------------','','','','ykh');
 var node_ykh = tykh.getHTML();
 if(_this.nextSibling!=null)
  _this.parentNode.insertBefore(node_ykh,_this.nextSibling);
 else
  _this.parentNode.appendChild(node_ykh);
}
term.prototype.addand = function(){
 var _this = ge(this.id);
 var tand = new term(' 并且','','','','tand');
 var node_and = tand.getHTML();
 if(_this.nextSibling!=null)
  _this.parentNode.insertBefore(node_and,_this.nextSibling);
 else
  _this.parentNode.appendChild(node_and);
}
term.prototype.addor = function(){
 var _this = ge(this.id);
 var tor = new term(' 或者','','','','tor');
 var node_or = tor.getHTML();
 if(_this.nextSibling!=null)
  _this.parentNode.insertBefore(node_or,_this.nextSibling);
 else
  _this.parentNode.appendChild(node_or);
}
///对象控制函数
term.prototype.fc_term_onmouseover = function(){
 var _this = this;
 return function(){
  //if (!_this.isDragging)
   _this.highlight();
 }
}
term.prototype.fc_term_onmouseout = function(){
 var _this = this;
 return function(){
  //if (!_this.isDragging)
   _this.lowlight();
 }
}
term.prototype.fc_mdel_onclick = function(){
 var _this = this;
 return function(){
  _this.remove();
 }
}
term.prototype.fc_mup_onclick = function(){
 var _this = this;
 return function(){
  _this.moveup();
 }
}
term.prototype.fc_mdown_onclick = function(){
 var _this = this;
 return function(){
  _this.movedown();
 }
}
term.prototype.fc_mzkh_onclick = function(){
 var _this = this;
 return function(){
  _this.addzkh();
 }
}
term.prototype.fc_mykh_onclick = function(){
 var _this = this;
 return function(){
  _this.addykh();
 }
}
term.prototype.fc_mand_onclick = function(){
 var _this = this;
 return function(){
  _this.addand();
 }
}
term.prototype.fc_mor_onclick = function(){
 var _this = this;
 return function(){
  _this.addor();
 }
}
/////插入页面
function insertterm(){
 var tname = document.all.tname.value;
 var fname = document.all.fname.value;
 var conn = document.all.conn.value;
 var fvalue = document.all.fvalue.value;
 //xl(tname+"|"+fname+"|"+conn+"|"+fvalue);
 var tm = new term(tname,fname,conn,fvalue,"fset");
 var tmHTML = tm.getHTML();
 ac(ge("ConditionBox"),tmHTML);
 //ZA.addterm(tm);
 addtofrom(tname);
}
var tt = new Array();
function addtofrom(tname){
  var ttexit="no";
  for(var i=0;i<tt.length;i++){
   if(tt[i]==tname)
    ttexit="yes";     
  }
  if(ttexit=="no"){
   tt[i]=tname;
   //alert(tt[i]);
  }
}
//====条件控制窗口函数
function CBadd(){
 var h = document.all.ConditionBox.offsetHeight;
 document.all.ConditionBox.style.height = h + 20 + "px";
}
function CBcut(){
 var h = document.all.ConditionBox.offsetHeight;
 if(h>=150)
  document.all.ConditionBox.style.height = h - 20 + "px";
 else
  return false;
}
function getSQL(){
 var sql="";
 var ma = ge("ConditionBox").childNodes;
 for(i=0;i<ma.length;i++){
  var id = ma[i].getAttribute("id");
  var tp = ge("tp"+id).value;
  if(tp=="fset"){
   //sql+=" "+ge("fname"+id).innerHTML;
   //sql+=" "+ge("conn"+id).innerHTML;
   //sql+=" \""+ge("fvalue"+id).innerHTML+"\"";
   var fname=ge("fname"+id).innerHTML;
   var conn=ge("conn"+id).innerHTML;
   var fvalue=ge("fvalue"+id).innerHTML;
   sql+=" "+fname;
   if(conn=="等于")
    sql+=" = "+"\'"+fvalue+"\'";
   if(conn=="大于")
    sql+=" > "+"\'"+fvalue+"\'";
   if(conn=="小于")
    sql+=" < "+"\'"+fvalue+"\'";
   if(conn=="不等于")
    sql+=" <> "+"\'"+fvalue+"\'";
   if(conn=="为空")
    sql+=" is null ";
   if(conn=="不为空")
    sql+=" is not null ";
   if(conn=="包含")
    sql+=" like \'%"+fvalue+"%\'";
  }
  else{
   //sql+=" "+ge("fname"+id).innerHTML;
   if(tp=="zkh")
    sql+=" (";
   if(tp=="ykh")
    sql+=" )";
   if(tp=="tand")
    sql+=" and";
   if(tp=="tor")
    sql+=" or";
  }
  //var mn = ma.childNodes;
 }
 var ffrom = "FROM "+getFrom();
 ge("sqlwords").value ="Select * "+ ffrom+" Where "+sql;
}
function getFrom(){
 var ff=tt.toString();
 return ff;
}
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="MainBox">
 <tr> 
 <td colspan="2" style="background-color:#999;color:#000;font-weight:bolder;font-size:14px">复杂查询表单</td>
 </tr>
 <tr> 
 <td><div id="ConditionBox"></div>
 <div style="width:100%"><SPAN title='放大显示框' style='float:right;FONT-SIZE: 14px; CURSOR: hand;FONT-FAMILY: webdings' onclick='CBadd()'>6</SPAN><SPAN title='缩小显示' style='float:right;FONT-SIZE: 14px; CURSOR: hand;FONT-FAMILY: webdings' onclick='CBcut()'>5</SPAN></div></td>
 </tr>
 <tr> 
 <td>
 <fieldset>
 <legend>SQL表达式</legend>
  <input type="text" id="sqlwords" class="sqlwords" /><input type="submit" name="Submit" value="GET SQL" onclick="getSQL()" style="float:right"/>
  </fieldset>
  </td>
 </tr>
 <tr> 
 <td>
 <fieldset>
 <legend>定义条件</legend>
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td>表</td>
   <td><select name="tname" id="tname">
    <option value="table1" selected="selected">表1</option>
    <option value="table2">表2</option>
    <option value="table3">表3</option>
    <option value="table4">表4</option>
    <option value="table5">表5</option>
   </select></td>
   <td>字段</td>
   <td><select name="fname" id="fname">
    <option value="f1">字段1</option>
    <option value="f2">字段2</option>
    <option value="f3">字段3</option>
    <option value="f4">字段4</option>
    <option value="f5">字段5</option>
    <option value="f6">字段6</option>
    <option value="f7">字段7</option>
   </select></td>
   <td>关系</td>
   <td><select name="conn" id="conn">
    <option value="大于">大于</option>
    <option value="等于">等于</option>
    <option value="小于">小于</option>
    <option value="不等于">不等于</option>
    <option value="为空">为空</option>
    <option value="不为空">不为空</option>
    <option value="包含">包含</option>
   </select></td>
   <td>值</td>
   <td><input name="fvalue" type="text" id="fvalue" value="111111" /></td>
   <td><input type="submit" name="Submit" value="增加新条件" onclick="insertterm()"/></td>
  </tr>
  </table>
  </fieldset>
  </td>
 </tr>
</table>
</body>
</html>
Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Étiquettes associées：
javascript 生成
source：php.cn
Article précédent：js implémente les compétences effect_javascript de la couche contextuelle de zone de texte Discuz d'imitation Article suivant：Quelques suggestions d'optimisation pour jQuery performance_jquery
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Méthode CSS uniquement pour modifier dynamiquement le src de l'image au clic sans utiliser JavaScript Je dois changer le src d'une image en cliquant sur la souris en utilisant uniquement du CS...
Depuis 2024-04-06 19:25:49
0
1
505
Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...
Depuis 2024-04-06 18:16:26
0
1
403
Événements de survol JavaScript sur des pseudo-éléments spécifiques au fournisseur Il s'agit de HTMLinput.$("input[type='range']::-webkit-slider-thumb").on('hover'...
Depuis 2024-04-06 15:35:24
0
1
274
Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...
Depuis 2024-04-06 14:54:03
0
2
421
Personnalisez l'apparence des en-têtes accordéon Bootstrap à l'aide de la classe CollapseDisplay Je souhaite styliser le titre de la carte d'un panneau avec la classeeffondrementshow. Dan...
Depuis 2024-04-06 12:53:11
0
1
376
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal