JavaScript_javascript 기술을 사용하여 SQL 쿼리 양식을 생성하는 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JavaScript_javascript 기술을 사용하여 SQL 쿼리 양식을 생성하는 방법

May 16, 2016 pm 03:45 PM

javascript 생성하다

이 기사의 예에서는 JavaScript를 사용하여 SQL 쿼리 양식을 생성하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

여기서 JavaScript는 복잡한 SQL 쿼리 양식을 생성하는 데 사용됩니다. 실행한 후에는 선택한 쿼리 조건에 따라 SQL 문을 자동으로 수정할 수 있습니다.

런닝 효과 스크린샷은 다음과 같습니다.

구체적인 코드는 다음과 같습니다.

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;
&lt;title&gt;查询条件表单&lt;/title&gt;
&lt;style&gt;
*{
 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%;
}
&lt;/style&gt;
&lt;script&gt;
////构造函数
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 &gt; 1){
  var a = ac.arguments[0];
  for (i=1; i&lt;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&lt;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&gt;=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&lt;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+=" &gt; "+"\'"+fvalue+"\'";
   if(conn=="小于")
    sql+=" &lt; "+"\'"+fvalue+"\'";
   if(conn=="不等于")
    sql+=" &lt;&gt; "+"\'"+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;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;table border="0" cellspacing="0" cellpadding="0" id="MainBox"&gt;
 &lt;tr&gt; 
 &lt;td colspan="2" style="background-color:#999;color:#000;font-weight:bolder;font-size:14px"&gt;复杂查询表单&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt; 
 &lt;td&gt;&lt;div id="ConditionBox"&gt;&lt;/div&gt;
 &lt;div style="width:100%"&gt;&lt;SPAN title='放大显示框' style='float:right;FONT-SIZE: 14px; CURSOR: hand;FONT-FAMILY: webdings' onclick='CBadd()'&gt;6&lt;/SPAN&gt;&lt;SPAN title='缩小显示' style='float:right;FONT-SIZE: 14px; CURSOR: hand;FONT-FAMILY: webdings' onclick='CBcut()'&gt;5&lt;/SPAN&gt;&lt;/div&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt; 
 &lt;td&gt;
 &lt;fieldset&gt;
 &lt;legend&gt;SQL表达式&lt;/legend&gt;
  &lt;input type="text" id="sqlwords" class="sqlwords" /&gt;&lt;input type="submit" name="Submit" value="GET SQL" onclick="getSQL()" style="float:right"/&gt;
  &lt;/fieldset&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt; 
 &lt;td&gt;
 &lt;fieldset&gt;
 &lt;legend&gt;定义条件&lt;/legend&gt;
 &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
  &lt;tr&gt;
   &lt;td&gt;表&lt;/td&gt;
   &lt;td&gt;&lt;select name="tname" id="tname"&gt;
    &lt;option value="table1" selected="selected"&gt;表1&lt;/option&gt;
    &lt;option value="table2"&gt;表2&lt;/option&gt;
    &lt;option value="table3"&gt;表3&lt;/option&gt;
    &lt;option value="table4"&gt;表4&lt;/option&gt;
    &lt;option value="table5"&gt;表5&lt;/option&gt;
   &lt;/select&gt;&lt;/td&gt;
   &lt;td&gt;字段&lt;/td&gt;
   &lt;td&gt;&lt;select name="fname" id="fname"&gt;
    &lt;option value="f1"&gt;字段1&lt;/option&gt;
    &lt;option value="f2"&gt;字段2&lt;/option&gt;
    &lt;option value="f3"&gt;字段3&lt;/option&gt;
    &lt;option value="f4"&gt;字段4&lt;/option&gt;
    &lt;option value="f5"&gt;字段5&lt;/option&gt;
    &lt;option value="f6"&gt;字段6&lt;/option&gt;
    &lt;option value="f7"&gt;字段7&lt;/option&gt;
   &lt;/select&gt;&lt;/td&gt;
   &lt;td&gt;关系&lt;/td&gt;
   &lt;td&gt;&lt;select name="conn" id="conn"&gt;
    &lt;option value="大于"&gt;大于&lt;/option&gt;
    &lt;option value="等于"&gt;等于&lt;/option&gt;
    &lt;option value="小于"&gt;小于&lt;/option&gt;
    &lt;option value="不等于"&gt;不等于&lt;/option&gt;
    &lt;option value="为空"&gt;为空&lt;/option&gt;
    &lt;option value="不为空"&gt;不为空&lt;/option&gt;
    &lt;option value="包含"&gt;包含&lt;/option&gt;
   &lt;/select&gt;&lt;/td&gt;
   &lt;td&gt;值&lt;/td&gt;
   &lt;td&gt;&lt;input name="fvalue" type="text" id="fvalue" value="111111" /&gt;&lt;/td&gt;
   &lt;td&gt;&lt;input type="submit" name="Submit" value="增加新条件" onclick="insertterm()"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/fieldset&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.